元件更新

componentWillReceiveProps(nextProps)

這是第一個呼叫屬性更改的函式。

當元件的屬性發生變化時，React 將使用新屬性呼叫此函式。你可以訪問到舊的道具與 this.props 和新道具與 nextProps 。

使用這些變數，你可以在舊道具和新道具之間進行一些比較操作，或者因為屬性更改等而呼叫函式。

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

這是第二個函式呼叫屬性更改和第一個 on 狀態更改。

預設情況下，如果另一個元件/元件更改元件的屬性/狀態， React 將呈現元件的新版本。在這種情況下，此函式始終返回 true。

如果元件必須更新，你可以覆蓋此功能並更精確地選擇。

該功能主要用於優化。

如果函式返回 false ，則更新管道立即停止。

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

這個功能就像 componentWillMount()。更改不在 DOM 中，因此你可以在更新執行之前進行一些更改。

/！\： 你不能使用 this.setState() 。

componentWillUpdate(nextProps, nextState){}

render()

有一些變化，所以重新渲染元件。

componentDidUpdate(prevProps, prevState)

與 componentDidMount() 相同的東西： DOM 被重新整理，所以你可以在這裡對 DOM 做一些工作。

componentDidUpdate(prevProps, prevState){}