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...