整理下react中常見的坑
其實有些也不能算是坑，有些是react的規定，或者是react的模式和平常的js處理的方式不同罷了
1、setState()是異步的
this.setState()會調用render方法，但並不會立即改變state的值，state是在render方法中賦值的。所以執行this.setState()後立即獲取state的值是不變的。同樣的直接賦值state並不會出發更新，因為沒有調用render函數。
2、組件的生命周期
componentWillMount，componentDidMount 只有在初始化的時候才調用。
componentWillReceivePorps，shouldComponentUpdate，componentWillUpdata，componentDidUpdate 只有組件在更新的時候才被調用，初始化時不調用。
3、reducer必須返回一個新的對象才能出發組件的更新
因為在connect函數中會對新舊兩個state進行淺對比，如果state只是值改變但是引用地址沒有改變，connect會認為它們相同而不觸發更新。
4、無論reducer返回的state是否改變，subscribe中註冊的所有回調函數都會被觸發。
5、組件命名的首字母必須是大寫，這是類命名的規範。
6、組件卸載之前，加在dom元素上的監聽事件，和定時器需要手動清除，因為這些並不在react的控制範圍內，必須手動清除。（一般在componentwillunmount中做）
7、按需加載時如果組件是通過export default 暴露出去，那麽require.ensure時必須加上default。
require.ensure([], require => {
cb(null, require(‘../Component/saleRecord‘).default)
},‘saleRecord‘)
8、react的路由有hashHistory和browserHistory，hashHistory由hash#控制跳轉，一般用於正式線上部署，browserHistory就是普通的地址跳轉，一般用於開發階段。
9、標簽裏用到的，for 要寫成htmlFor，因為for已經成了關鍵字。
10、componentWillUpdate中可以直接改變state的值，而不能用setState。
11、如果使用es6class類繼承react的component組件，constructor中必須調用super
12、說說“內聯樣式”:
場景：在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"}}
13、遍歷數組元素：
場景：
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>
)
});
14、"根元素"：
場景：
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>
)
15、 “return同行”問題:
場景：
return <div class="some">
<p>some</p>
/div>
原因：return語句和返回元素不在同一行會被解析器視為返回null導致錯誤（註意：如果沒有使用()的情況）
解決：
return (
<div class="some">
p>some</p>
</div>
)
16、 table表格問題:
場景：
return (
<table>
<tr>
<td></td>
</tr>
</table>
)
報錯：Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>
原因：在React中<tr>元素不可以作為<table>元素的直接子元素
解決方法：加入thead/tbody即可。?
整理下react中常見的坑