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