平時寫react 小技巧
- Stateless function 無狀態組件平時寫組件用到比較多的就是無狀態組件，不但優雅，也是優化react性能的一種手段。
const Greeting = ({ name, style }) => { return <div style={style}>{name}</div> };
- Array as children 把數組數據渲染出來
常常會遇處處理數組數據的狀況，能夠用下面的方式簡單的渲染出來。javascript
render() { return ( (<ul> {List.map((item) => ( <li>{item}</li> ))} </ul>) ) }
- 封裝基礎類組件
好比
<input type="text" >每次寫很麻煩吧，能夠封裝一個成一個組件cssconst input = (props) => { return <input type = {props.type} {...props} /> } - Layout Component 佈局組件
組件能夠分紅不少類類，有的是佈局類，有的是功能類。下面是一種佈局類的組件。html
<FlexContainer> <div style={{ flex: 1 }}>{this.props.leftSide}</div> <div style={{ flex: 2 }}>{this.props.rightSide}</div> </FlexContainer>
- Higher Order Component 高階組件
高階組件很像decorator，提高組件的能力。好比你想一些組件裏面使用一下功能，react-router 中java
import { withRouter } from 'react-router' withRouter(SomeComponent)例子：node
var Enhance = ComposedComponent => class extends React.Component { componentDidMount() { this.setState({ name: "李狗子" }); } render() { return <ComposedComponent {...this.props} name = {this.state.name} />; } }; - 受控組件，不受控組件
項目中常常會用到這兩種狀況如：
受控組件，更新的時候須要使用this.setStatereactconstructor() { super(); this.state = {value: ""} } render() { return <input type="text" value={this.state.value} /> }不受控組件，主要須要經過ref來獲取input的值。git
render() { return <input type="text" ref="myInput" /> }兩種方法均可以在特定的場合去使用，我的以爲數據相對重要的頁面須要使用受控組件會比較合適。github
- 使用三元表達式
項目中常常有判斷語句，用三元表達式能夠很方便的寫出想要的邏輯npm
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])) { return new