- Stateless function 無狀態組件平時寫組件用到比較多的就是無狀態組件，不但優雅，也是優化react性能的一種手段。
const Greeting = ({ name, style }) => { return <div style={style}>{name}</div> };
- Array as children 把數組數據渲染出來
經常會遇到處理數組數據的情況，可以用下面的方式簡單的渲染出來。
render() { return ( (<ul> {List.map((item) => ( <li>{item}</li> ))} </ul>) ) }
- 封裝基礎類組件
比如
<input type="text" >每次寫很麻煩吧，可以封裝一個成一個組件const input = (props) => { return <input type = {props.type} {...props} /> } - Layout Component 布局組件
組件可以分成很多類類，有的是布局類，有的是功能類。下面是一種布局類的組件。
<FlexContainer> <div style={{ flex: 1 }}>{this.props.leftSide}</div> <div style={{ flex: 2 }}>{this.props.rightSide}</div> </FlexContainer>
- Higher Order Component 高階組件
高階組件很像decorator，提升組件的能力。比如你想一些組件里面使用一下功能，react-router 中
import { withRouter } from 'react-router' withRouter(SomeComponent)例子：
var Enhance = ComposedComponent => class extends React.Component { componentDidMount() { this.setState({ name: "李狗子" }); } render() { return <ComposedComponent {...this.props} name = {this.state.name} />; } }; - 受控組件，不受控組件
項目中經常會用到這兩種情況如：
受控組件，更新的時候需要使用this.setStateconstructor() { super(); this.state = {value: ""} } render() { return <input type="text" value={this.state.value} /> }不受控組件，主要需要通過ref來獲取input的值。
render() { return <input type="text" ref="myInput" /> }兩種方法都可以在特定的場合去使用，個人覺得數據相對重要的頁面需要使用受控組件會比較合適。
- 使用三元表達式
項目中經常有判斷語句，用三元表達式可以很方便的寫出想要的邏輯
const demo = ({ isOK }) => { return isOK ? <p> Yes </p> : <p> No </p> }; - 給setState傳入function
可以使用function來更新state
this.setState((prevState, props) => ({ return ... })); - 通過ref屬性獲取component
場景：下面的例子是初始化組件后，讓input默認獲取光標。ref最終指向的已經渲染好的DOM節點，或者是react class的實例。具體可以看官方的文檔
componentDidMount() { this.input.focus(); } render() { return ( <input ref={comp => { this.input = comp; }} /> ) } - 切勿使用...props傳遞數據
一個非常錯誤的做法比如：
<Component {...props} />props上面如果有非常多的屬性，會造成非常昂貴的計算。正確的應該
<Component name = { props.name } />
以上是平時寫React用到的一些寫法小技巧，說有用還蠻有用的！
有錯誤的地方還請指正！謝謝大家。
下面2個鏈接都很棒哦！記得收藏star...
參考：
https://github.com/vasanthk/react-bits
react 代碼規范
https://github.com/airbnb/javascript/tree/master/react
dangerouslySetHTML 和 style 屬性
dangerouslySetHTML
出於安全考慮的原因（XSS 攻擊），在 React.js 當中所有的表達式插入的內容都會被自動轉義，就相當於 jQuery 里面的 text(…) 函數一樣，任何的 HTML 格式都會被轉義掉：
class Editor extends Component { constructor() { super() this.state = { content: '<h1>React.js 小書</h1>' } } render () { return ( <div className='editor-wrapper'> {this.state.content} </div> ) } } 假設上面是一個富文本編輯器組件，富文本編輯器的內容是動態的 HTML 內容，用 this.state.content 來保存。我希望在編輯器內部顯示這個動態 HTML 結構，但是因為 React.js 的轉義特性，頁面上會顯示：
表達式插入並不會把一個 <h1> 渲染到頁面，而是把它的文本形式渲染了。那要怎么才能做到設置動態 HTML 結構的效果呢？React.js 提供了一個屬性 dangerouslySetInnerHTML，可以讓我們設置動態設置元素的 innerHTML：
...
render () {
return ( <div className='editor-wrapper' dangerouslySetInnerHTML={{__html: this.state.content}} /> ) } ... 需要給 dangerouslySetInnerHTML 傳入一個對象，這個對象的 __html 屬性值就相當於元素的 innerHTML，這樣我們就可以動態渲染元素的 innerHTML 結構了。
有寫朋友會覺得很奇怪，為什么要把一件這么簡單的事情搞得這么復雜，名字又長，還要傳入一個奇怪的對象。那是因為設置 innerHTML 可能會導致跨站腳本攻擊（XSS），所以 React.js 團隊認為把事情搞復雜可以防止（警示）大家濫用這個屬性。這個屬性不必要的情況就不要使用。
style
React.js 中的元素的 style 屬性的用法和 DOM 里面的 style 不大一樣，普通的 HTML 中的：
<h1 style='font-size: 12px; color: red;'>React.js 小書</h1> 在 React.js 中你需要把 CSS 屬性變成一個對象再傳給元素：
<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小書</h1> style 接受一個對象，這個對象里面是這個元素的 CSS 屬性鍵值對，原來 CSS 屬性中帶 - 的元素都必須要去掉 - 換成駝峰命名，如 font-size 換成 fontSize，text-align 換成 textAlign。
用對象作為 style 方便我們動態設置元素的樣式。我們可以用 props 或者 state中的數據生成樣式對象再傳給元素，然后用 setState 就可以修改樣式，非常靈活：
<h1 style={{fontSize: '12px', color: this.state.color}}>React.js 小書</h1> 只要簡單地 setState({color: 'blue'}) 就可以修改元素的顏色成藍色。
Prop 驗證
隨着應用不斷變大，保證組件被正確使用變得非常有用。為此我們引入propTypes。React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據的有效性。當向 props 傳入無效數據時，JavaScript 控制台會拋出警告。注意為了性能考慮，只在開發環境驗證 propTypes。下面用例子來說明不同驗證器的區別：
React.createClass({ propTypes: { // 可以聲明 prop 為指定的 JS 基本類型。默認 // 情況下，這些 prop 都是可傳可不傳的。 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 所有可以被渲染的對象：數字， // 字符串，DOM 元素或包含這些類型的數組。 optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符聲明 prop 為類的實例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 來限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多個對象類型中的一個 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定類型組成的數組 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定類型的屬性構成的對象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定形狀參數的對象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 以后任意類型加上 `isRequired` 來使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意類型 requiredAny: React.PropTypes.any.isRequired, // 自定義驗證器。如果驗證失敗需要返回一個 Error 對象。不要直接 // 使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) {