时间戳

首页 > 解决方案 > react如何更新DOM的一部分？

reactjs - react如何更新DOM的一部分？

问题描述

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

我知道要决定是否更新 DOM，react 会将虚拟 DOM 与重新渲染的 DOM 进行比较。但我只是不明白它是否决定更新它 - 它是否更新特定重新渲染组件的所有元素，或者它是否知道只更新组件的更改元素？

提前致谢，

标签： reactjsvirtual-dom

解决方案

更好地了解 react 如何决定重新渲染元素的好地方是协调文档，但我可以总结一下：

每次调用 render() 时， react 都会创建一个新的虚拟 DOM，其中根节点是调用其渲染函数的组件。当组件或其任何子组件的状态或道具发生变化时，将调用 render() 函数。render() 函数从根开始销毁所有旧的虚拟 DOM 节点，并创建一个全新的虚拟 DOM。

为了确保组件的重新渲染顺畅高效，React 使用Diffing 算法将创建新树所需的时间减少到 O(n) 的时间复杂度，通常复制树的时间复杂度 > O (n^2)。它实现这一点的方法是在 DOM 中的每个元素上使用“key”属性。React 知道，它可以检查 DOM 中每个节点上的“key”属性，而不是从头开始创建每个元素。这就是为什么如果你没有设置每个元素的“key”属性你会得到一个警告，React 使用这些键来极大地提高它的渲染速度。

推荐阅读