关于React组件的生命周期的初始化问题
来源：3-15 【死与新生】探索React组件的生命周期
时代蠕虫
2022-02-03
老师我有个疑问：既然React组件初始化的逻辑是 构建函数=>getDerivedStateFromProps=>render()渲染UI=>componentDidMount ;
上图的代码运行的逻辑是：构建函数=>getDerivedStateFromProps=>render()渲染UI=>componentDidMount=>在componentDidMount函数中state更新后又会转到 getDerivedStateFromProps=>render()渲染UI，render()渲染用了两次，这样是不是多此一举呢，会不会影响初始化加载效率呢？怎样解决呢？
写回答
1回答
-
的确渲染了两次（甚至更多次）UI，但是这未必如此是多此一举。阿贾克斯（AJAX）的原理应该听说过吧？就是可以通过js实现页面的异步的变化。而在react中，异步操作我们是可以在componentDidMount中处理的，对于异步数据与页面渲染的绑定，就需要第二次、第三次、第四次的ui渲染了。所以，对于异步的ui渲染是需要被处理而且不能被忽略的，所以这是正常的。
不过，ui渲染的次数多了，也就意味着性能的下降，所以，当然也有一些比较高级的操作，就是把若干个异步处理合并在一起，最后一次过进行UI渲染。最典型的例子就是react类组件的 this.setState() 这个方法。
20
相似问题