1. 程式人生 > >react 生命週期筆記

react 生命週期筆記

Component initial

1. constructor() 會在裝配之前呼叫,建構函式是初始化狀態的合適位置

可以基於屬性來初始化狀態,這樣有效的分離屬性並根據初始屬性設定狀態

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

2. componentWillMount()

在這個方法裡同步的設定狀態不會觸發重渲,避免在該方法中引入任何的副作用或者訂閱,這是唯一的會在伺服器渲染掉的生命週期的鉤子函式

3. render()

render()

函式應該是純函式,意味著其不應該改變元件的狀態,保持render() 方法的純淨使得元件更容易思考 若 shouldComponentsUpdate() 返回 falserender()將不會被呼叫

4. componentDidMount()

若要從遠端家在資料,這是一個適合實現網路請求的地方,該方法設定狀態將會觸發重渲

state Changes

Created with Raphaël 2.1.2updating StateshouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdateEnd
yesno

5. shouldComponentUpdate(nextProps, nextState)

預設返回true

6. componentWillUpdate(nextProps, nextState)

不能在這裡呼叫this.setState() ,若你需要更新狀態響應屬性的調整,使用 componentWillMount()代替。

7. componentDidUpdate(nextProps, nextState)

Props Changes

Created with Raphaël 2.1.2updating PropscomponentWillReceiveProps
shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdateEndyesno

8. componentWillReceiveProps(nextProps)

componentWillReceiveProps()在裝配了的元件接收到新屬性前呼叫。若你需要更新狀態響應屬性改變(例如,重置它),你可能需對比this.propsnextProps並在該方法中使用this.setState()處理狀態改變。

Unmounting

9. componentWillUnmount()

componentWillUnmount() 在元件被解除安裝和銷燬之前立刻呼叫。可以在該方法裡處理任何必要的清理工作,例如解繫結時器,取消網路請求,清理任何在componentDidMount環節建立的DOM元素。