其實有些也不能算是坑,有些是react的規定,或者是react的模式和平常的js處理的方式不同罷了
1、setState()是異步的
this.setState()會調用render方法,但並不會立即改變state的值,state是在render方法中賦值的。(這里我描述的不對,多謝評論區大神指點,setState只是將任務交給任務隊列,本身沒有執行任務)所以執行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,因為子類需要用super繼承component的this,否則實例化的時候會報錯。
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即可。
