反应如何决定重新渲染组件

Question

我知道React有一个名为shouldComponentUpdate的生命周期方法，默认情况下返回true，这就是组件决定更新的方式

但是，当状态或道具更改该组件时，该生命周期方法将如何调用。当我们收到新的道具或状态时，实际发生了什么？当我们将组件连接到redux状态和mapStateToProps时，是否正在检查组件内部值的变化？如果不是，当我们正在寻找状态或道具的改变时？

当道具或状态发生变化时，如何调用生命周期方法？当属性或状态更改时，我们是否有一个侦听器调用这些方法？

Answer 1

您应该查看两者的生命周期，它们的执行方式以及每种方法的调用顺序。在下面的反应生命周期图像中，您可以看到componentWillMount和componentDidMount以及其他类似componentDidUpdate，componentWillUpdate等的区别

此外，您还应说明何时使用每种方法

要更新状态，请调用this.setState()，它告诉反应有些事情已经更改，它将重新呈现组件树。如果您使用this.state.data = something，则react不会触发render（）。现在要更新道具，您需要了解render（）的实际工作方式。答案是从现有的anwser中总结出来的：

  

每次调用render（）时，react都会创建一个新的虚拟DOM   根节点是调用其渲染函数的组件。   当状态或道具时，将调用render（）函数   组件或其任何子代更改。 render（）函数   从根目录开始销毁所有旧的虚拟DOM节点，   创建一个全新的虚拟DOM。

     

为确保组件的重新渲染流畅且   高效的React使用Diffing算法来减少所需的时间   创建新树的时间复杂度为O（n），通常为时间   复制树的复杂度> O（n ^ 2）。它实现此目的的方式   通过在DOM中的每个元素上使用“ key”属性。   React知道，与其从头创建每个元素，还可以   检查DOM中每个节点上的“关键字”属性。这就是为什么你得到   如果您未设置每个元素的“ key”属性，则会发出警告   使用这些键可以大大提高其渲染速度。

反应生命周期

Redux生命周期

Answer 2

如果您使用redux库，则可能是，更改道具后，组件不会重新呈现。通过componentWillReceiveProps结帐this issue来解决道具变更问题