componentDidUpdate之后的绘制

componentDidUpdate是更新版的componentDidMount方法。在这里可以处理本地的UI元素,可以操作refs,有需要的话也可以开启另外一个绘制过程。

componentDidUpdate方法会传入两个参数:prevProps, prevState。这个正好和componentWillUpdate是相对的。这个两个参数的值就是在方法调用之前的this.propsthis.state

react-tree-update.png

就如同componentDidMountcomponentDidUpdate在所有的子组件都更新之后被调用。如上图,A.0.0componentDidUpdate会先调用,然后是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.gitbooks.io/react-indepth/content/life_cycle/update/postrender_with_componentdidupdate.html