整理下react中常見的坑

其實有些也不能算是坑，有些是react的規定，或者是react的模式和日常的js處理的方式不一樣罷了

一、setState()是異步的
this.setState()會調用render方法，但並不會當即改變state的值，state是在render方法中賦值的。（這裏我描述的不對，多謝評論區大神指點，setState只是將任務交給任務隊列，自己沒有執行任務）因此執行this.setState()後當即獲取state的值是不變的。一樣的直接賦值state並不會出發更新，由於沒有調用render函數。

二、組件的生命週期
componentWillMount，componentDidMount 只有在初始化的時候才調用。
componentWillReceivePorps，shouldComponentUpdate，componentWillUpdata，componentDidUpdate 只有組件在更新的時候才被調用，初始化時不調用。

三、reducer必須返回一個新的對象才能出發組件的更新
由於在connect函數中會對新舊兩個state進行淺對比，若是state只是值改變可是引用地址沒有改變，connect會認爲它們相同而不觸發更新。

四、不管reducer返回的state是否改變，subscribe中註冊的全部回調函數都會被觸發。

五、組件命名的首字母必須是大寫，這是類命名的規範。

六、組件卸載以前，加在dom元素上的監聽事件，和定時器須要手動清除，由於這些並不在react的控制範圍內，必須手動清除。（通常在componentwillunmount中作）

七、按需加載時若是組件是經過export default 暴露出去，那麼require.ensure時必須加上default。

require.ensure([], require => { 　　cb(null, require('../Component/saleRecord').default) },'saleRecord')

八、react的路由有hashHistory和browserHistory，hashHistory由hash#控制跳轉，通常用於正式線上部署，browserHistory就是普通的地址跳轉，通常用於開發階段。

九、標籤裏用到的，for 要寫成htmlFor，由於for已經成了關鍵字。

十、componentWillUpdate中能夠直接改變state的值，而不能用setState。

十一、若是使用es6class類繼承react的component組件，constructor中必須調用super，由於子類須要用super繼承component的this，不然實例化的時候會報錯。

 

十二、說說「內聯樣式」:

場景：在JSX的render中寫內聯樣式，如<div style={"marginTop:10px"}></div>

報錯：warning：Style prop value must be an object react/style-prop-object

緣由：在React框架的JSX編碼格式要求，style必須是一個對象

解決：style={{"marginTop:10px"}}

1三、遍歷數組元素：

場景：

const address = ['北京', '杭州', '深圳', '上海']; address.map((item) => { 　　return ( 　　　　<ul class="items">
　　　　<li class="item">{item}</li>
　　　　</ul>
　　) });

 

報錯：Warning:Each child in an array or iterator should have a unique "key" prop. Check the render method of `NavBlock`

緣由：在React中數組遍歷返回元素或組件時需加上key屬性做爲惟一標識（這也是react提升效率的途徑）

解決：

address.map((item, index) => { 　　return ( 　　　　<ul class="items">
　　　　<li class="item" key={index}>{item}</li>
　　　　</ul>
　　) });

 

1四、"根元素"：

場景：

render(){ 　　return ( 　　　　<div></div>
　　　　<div></div>
　　) }

報錯：Adjacent JSX elements must be wrapped in an enclosing tag

緣由：render()函數中返回的全部元素須要包裹在一個"根"元素裏面

解決：

return ( 　　<div class="some">
　　<div></div>
　　<div></div>
　　</div>
)

1五、 「return同行」問題:

場景：

return <div class="some">
　　　　　　<p>some</p>
　　　　/div>

緣由：return語句和返回元素不在同一行會被解析器視爲返回null致使錯誤（注意：若是沒有使用()的狀況）

解決：

return ( 　　<div class="some">
　　　　p>some</p>
　　</div>
)

 

1六、 table表格問題:

場景：

return ( 　　<table>
　　　　<tr>
　　　　　　<td></td>
　　　　</tr>
　　</table>
)

報錯：Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>

緣由：在React中<tr>元素不能夠做爲<table>元素的直接子元素

解決方法：加入thead/tbody便可。​