React學習筆記（五）：生命周期

生命周期圖解：

根據圖解，我認為React生命周期可以分為四個階段：

• Initialization：初始化階段
• Mounting：挂載階段
• Updation：更新階段
• Unmounting：解除安裝階段

元件初始化階段(Initialization)

也就是元件中類的構造方法( constructor() )，constructor()用來做一些元件的初始化工作，如定義this.state的初始内容。constructor()中的super()方法是必須的，super(props)用來調用基類的構造方法( constructor() ), 也将父元件的props注入給子元件，供子元件讀取(元件中props隻讀不可變，state可變)。

挂載階段(Mounting)

此階段分為三個時期

• componentWillMount

  在元件挂載到DOM前調用，隻會被調用一次。

• render

  render()方法是類元件中唯一需要的方法，當元件的props和state重新傳遞和指派時，無論值是否有變化都會使元件重新render ，return 一個React元素（描述元件，即UI）。

• componentDidMount

  元件挂載到DOM後調用，且隻會被調用一次。

  componentDidMount()挂載元件（插入樹中）後立即調用。需要DOM節點的初始化應在此處進行。如果需要從遠端端點加載資料，這是執行個體化網絡請求的好地方。

更新階段(Updation)

• componentWillReceiveProps

  在元件接收到一個新的 prop (更新後)時被調用。此方法隻調用于props引起的元件更新過程中。(在該函數(componentWillReceiveProps)中調用 this.setState() 将不會引起第二次渲染.)

• shouldComponentUpdate

  在元件接收到新的props或者state時被調用。通過比較nextProps，nextState及目前元件的this.props，this.state，傳回true時目前元件将繼續執行更新過程，傳回false則目前元件更新停止，以此可用來減少元件的不必要渲染，優化元件性能。

• componentWillUpdate

  元件接收到新的props或者state但還沒有render時被調用，在這邊可執行一些元件更新發生前的工作，一般較少用。

• componentDidUpdate

  在元件完成更新後立即調用。

解除安裝階段（Unmounting）

• componentWillUnmount

在元件從 DOM 中移除之前立刻被調用。

關于生命周期有什麼不懂的可以看一下這裡，個人感覺講的還不錯