相關函數
簡單地說,React Component通過其定義的幾個函數來控制組件在生命周期的各個階段的動作。
在ES6中,一個React組件是用一個class來表示的(具體可以參考官方文檔),如下:
// 定義一個TodoList的React組件,通過繼承React.Component來實現
class TodoList extends React.Component {
...
}
生命周期相關的函數有:
constructor(props, context)
構造函數,在創建組件的時候調用一次。
componentWillMount()
在組件掛載之前調用一次。如果在這個函數里面調用setState,本次的render函數可以看到更新后的state,并且只渲染一次。
componentDidMount()
在組件掛載之后調用一次。這個時候,子主鍵也都掛載好了,可以在這里使用refs。
componentWillReceiveProps(nextProps)
props是父組件傳遞給子組件的。父組件發生render的時候子組件就會調用componentWillReceiveProps(不管props有沒有更新,也不管父子組件之間有沒有數據交換)。
shouldComponentUpdate(nextProps, nextState)
組件掛載之后,每次調用setState后都會調用shouldComponentUpdate判斷是否需要重新渲染組件。默認返回true,需要重新render。在比較復雜的應用里,有一些數據的改變并不影響界面展示,可以在這里做判斷,優化渲染效率。
componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者調用forceUpdate之后,componentWillUpdate會被調用。
componentDidUpdate()
除了首次render之后調用componentDidMount,其它render結束之后都是調用componentDidUpdate。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以對應起來。區別在于,前者只有在掛載的時候會被調用;而后者在以后的每次更新渲染之后都會被調用。
ReactElement render()
render是一個React組件所必不可少的核心函數(上面的其它函數都不是必須的)。記住,不要在render里面修改state。
componentWillUnmount()
組件被卸載的時候調用。一般在componentDidMount里面注冊的事件需要在這里刪除。
更新方式
在react中,觸發render的有4條路徑。
以下假設shouldComponentUpdate都是按照默認返回true的方式。
首次渲染Initial Render
調用this.setState (并不是一次setState會觸發一次render,React可能會合并操作,再一次性進行render)
父組件發生更新(一般就是props發生改變,但是就算props沒有改變或者父子組件之間沒有數據交換也會觸發render)
調用this.forceUpdate
下面是我對React組件四條更新路徑地總結:
注意,如果在shouldComponentUpdate里面返回false可以提前退出更新路徑。