• Mounting：元件初始化

• Updating：元件更新

• Unmounting：元件卸載

Mounting：元件初始化(React.createClass)

1. getDefaultProps()
• React.createClass 時觸發，早於 constructor
• 只會在 Mounting 時呼叫一次
• 不能使用 setState() (尚未初始化)
• 回傳得將設為 props 的預設值

2. getInitialState()
• React.createClass 時觸發，渲染前觸發
• 只會在 Mounting 時呼叫一次
• 不能使用 setState() (尚未初始化)
• 回傳得將設為 state 的預設值

3. componentWillMount()
• 只會在 Mounting 時呼叫一次
• 使用 setState 不會再觸發一次 render，會立即更新

4. render()
• 不能使用 setState() （無限遞迴）
• 一定要改寫，必須且只能回傳一個頂層 JSX Component 或是 null/false （不渲染）
• 結束後會造成子元件的 Mounting，意即，子元件的生命周期由此開始

5. componentDidMount()
• 只會在 Mounting 時呼叫一次
• 子元件 Mounting 完後才觸發
• 適合存取 DOM

Updating：

元件接收的 props 改變時

1. componentWillReceiveProps(nextProps)
• 使用 setState 不會再觸發一次 render，會立即更新
• 若該元件有傳入的 props，則父元件 Updating-render 時會觸發（因為會重傳 props）
• 若沒有 props，此函數將不會被觸發

2. shouldComponentUpdate(nextProps, nextState)
• 不能使用 setState() （無限遞迴）
• 回傳false的話這次更新直接結束
• 優化效能用的

3. componentWillUpdate(nextProps, nextState)
• 不能使用 setState() （無限遞迴）

4. render()
• 詳見 Mounting - 4.
• 結束後會造成子元件的 Mounting、Updating、Unmounting

5. componentDidUpdate(prevProps, prevState)
• 子元件 Mounting、Updating、Unmounting 完後才觸發

元件內部的 state 改變時 (setState)

在這裡任何地方使用 setState 都會造成無限遞迴，除了 componentDidUpdate

1. shouldComponentUpdate(nextProps, nextState)

2. componentWillUpdate(nextProps, nextState)

3. render()

4. componentDidUpdate(prevProps, prevState)

使用 forceUpdate 時

1. componentWillUpdate(nextProps, nextState)

2. render()

3. componentDidUpdate(prevProps, prevState)

Unmount：元件卸載時

1. componentWillUnmount()