1. 程式人生 > >React常見的一些坑

React常見的一些坑

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的控制範圍內,必須手動清除。

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,否則例項化的時候會報錯。