了解 React 应用程序中的渲染和重新渲染：它们如何工作以及如何优化它们

发布日期： 2024-09-14 阅读量： 作者： 网络

了解 react 应用程序中的渲染和重新渲染：它们如何工作以及如何优化它们

当我们在 react 中创建应用程序时，我们经常会遇到术语“渲染”和“重新渲染组件”。虽然乍一看这似乎很简单，但当涉及不同的状态管理系统（如 usestate、redux）或当我们插入生命周期钩子（如 useeffect）时，事情会变得有趣。如果您希望您的应用程序快速高效，那么了解这些流程是关键。

什么是渲染？

渲染是 react 根据状态或属性在屏幕上渲染用户界面 (ui) 的过程。当你的组件第一次渲染时，它被称为第一次渲染。

当组件首次“安装”到 dom 时，会发生以下情况：

1。状态初始化：
无论你使用 usestate、props 还是 redux，都会创建组件的初始状态。

2。渲染函数：
react 循环遍历 jsx 代码并根据当前状态生成虚拟 dom。

3。为组件的当前状态创建一个虚拟 dom（虚拟 dom）。

4。比较（差异）：
虚拟 dom 与真实 dom 进行比较（由于是第一次渲染，所以所有元素都会完全渲染）。

5。显示：
该组件显示在屏幕上。
组件渲染完成后，下一个挑战就是渲染它。

每次状态或道具发生变化时都会发生重新渲染。您是否单击了更改屏幕上数字的按钮？更改了 redux 存储中的值？所有这些操作都可能导致 react 再次渲染组件，这就是重新渲染的用武之地。

状态变化检测：

渲染触发器：

当状态发生变化时，react 会根据该变化创建一个新的虚拟 dom。

比较（差异）：

查看更改：

并非所有组件都会受到每次更改的影响。 react 仅重新渲染那些满足以下条件的组件：

使用当地州：
如果您使用 usestate，则每次调用 setstate.

时都会重新渲染组件

使用 redux 状态：
如果你的组件依赖于 redux 状态（通过 useselector 或 connect），当该部分状态发生变化时，它将重新渲染。

使用道具：
如果 props 值发生变化，组件将使用新值重新渲染。

当然，不必要地重新渲染所有组件并不总是理想的。如果我们希望应用程序快速高效地运行，这里有一些优化技巧：

1。组件记忆
react 通过 react.memo 提供组件记忆功能。如果你的组件不依赖于 props 或状态变化，你可以“记住”它，因此只有当相关值发生变化时它才会重新渲染。

示例：

const memoizedcomponent = react.memo(mycomponent);