componentDidUpdate是更新版的componentDidMount方法。在這里可以處理本地的UI元素，可以操作refs，有需要的話也可以開啟另外一個(gè)繪制過程。

componentDidUpdate方法會傳入兩個(gè)參數(shù)：prevProps, prevState。這個(gè)正好和componentWillUpdate是相對的。這個(gè)兩個(gè)參數(shù)的值就是在方法調(diào)用之前的this.props和this.state。

react-tree-update.png

就如同componentDidMount，componentDidUpdate在所有的子組件都更新之后被調(diào)用。如上圖，A.0.0的componentDidUpdate會先調(diào)用，然后是A.0的，最后才是A的。

如何使用

使用componentDidUpdate最一般的情況就是管理第三個(gè)的UI組件，以及和本地UI元素交互。比如你使用了Chart庫之后：

componentDidUpdate(prevProps, prevState) {
  // 如果數(shù)據(jù)發(fā)生變化，則更新圖表
  if(prevProps.data !== this.props.data) {
    this.chart = c3.load({
      data: this.props.data
    });
  }
}

在數(shù)據(jù)發(fā)橫變化之后，更新圖表

其他繪制過程

我們也可以查找本地的UI元素、獲取大小和css的樣式等。我們可以更新子組件。這時(shí)，可以調(diào)用this.setState或者forceUpdate。但是，這樣也會引起很多的其他問題。

最糟糕的問題就是在沒有檢查條件的情況下直接調(diào)用setState方法：

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

默認(rèn)情況下shouldComponentUpdate方法返回的是true。所以，如果我們用了上面的方法，我們會進(jìn)入無限循環(huán)的狀態(tài)。

總的來說，一般不需要這么做。而且這樣的重繪會造成性能問題。

原文地址：https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/postrender_with_componentdidupdate.html