componentDidUpdate以後的繪製

componentDidUpdate是更新版的componentDidMount方法。在這裏能夠處理本地的UI元素，能夠操做refs，有須要的話也能夠開啓另一個繪製過程。

componentDidUpdate方法會傳入兩個參數：prevProps, prevState。這個正好和componentWillUpdate是相對的。這個兩個參數的值就是在方法調用以前的this.props和this.state。

就如同componentDidMount，componentDidUpdate在全部的子組件都更新以後被調用。如上圖，A.0.0的componentDidUpdate會先調用，而後是A.0的，最後纔是A的。

如何使用

使用componentDidUpdate最通常的狀況就是管理第三個的UI組件，以及和本地UI元素交互。好比你使用了Chart庫以後：

componentDidUpdate(prevProps, prevState) {
  // 若是數據發生變化，則更新圖表
  if(prevProps.data !== this.props.data) {
    this.chart = c3.load({
      data: this.props.data
    });
  }
}

在數據發橫變化以後，更新圖表

其餘繪製過程

咱們也能夠查找本地的UI元素、獲取大小和css的樣式等。咱們能夠更新子組件。這時，能夠調用this.setState或者forceUpdate。可是，這樣也會引發不少的其餘問題。

最糟糕的問題就是在沒有檢查條件的狀況下直接調用setState方法：

componentDidUpdate(prevProps, prevState) {
  let height = ReactDOM.findDOMNode(this).offsetHeight;
  this.setState({
    internalHeight: height
  });
}

默認狀況下shouldComponentUpdate方法返回的是true。因此，若是咱們用了上面的方法，咱們會進入無限循環的狀態。

總的來講，通常不須要這麼作。並且這樣的重繪會形成性能問題。

原文地址：https://developmentarc.gitboo...