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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。