如何反应更新DOM的一部分？

Question

我知道这个问题已经讨论了很多，但是我不确定如何研究我的问题，我希望它遵循这里的规则。

我知道，要决定是否更新DOM，请对虚拟DOM与重新渲染的DOM进行比较。但是我只是不知道它是否决定更新它-它会更新特定的重新渲染组件的所有元素，还是只知道更改componenet的更改的元素？

预先感谢

Answer 1

reconciliation documentation是一个更好地了解React如何决定重新渲染元素的好地方，但我可以总结一下：

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

为了确保组件的重新渲染流畅高效，React使用Diffing Algorithm将创建新树所需的时间减少到O（n）的时间复杂度，通常是时间复杂度用于复制树的> O（n ^ 2）。完成此操作的方法是在DOM中的每个元素上使用“ key”属性。 React知道，除了从头创建每个元素之外，它还可以检查DOM中每个节点上的“ key”属性。这就是为什么如果不设置每个元素的“ key”属性会收到警告的原因，React使用这些键大大提高了其渲染速度。

Answer 2

执行Integer方法并不意味着react也可以渲染实际的DOM。 React保留了虚拟DOM的两个副本，即旧的虚拟DOM和在调用render()方法时创建的重新渲染的虚拟DOM。

render()方法的输出是一个javascript对象，该对象被映射到DOM元素。更改组件后，我们将获得一个新的react元素。然后，它将重新渲染的虚拟DOM中的新react元素及其子代与旧虚拟DOM中的元素及其子代进行比较。如果发现任何差异，则仅在发生某些更改的地方（例如按钮的文本已更改）更新真实DOM，而不更新整个真实DOM。如果没有发现差异，则不会触动真实的DOM。