当前位置：首页 > news >正文

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

news 来源：原创 2024/9/19 21:24:05

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

什么是渲染？

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

初始渲染如何工作？

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

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

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

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

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

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

重新渲染：何时以及为何？

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

重新渲染如何工作？

状态变化检测：

使用 usestate，当你调用 setstate 时，react 知道它需要更新组件。
使用 redux，当存储中的值发生更改时，与该状态部分关联的每个组件都会重新渲染。

渲染触发器：

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

比较（差异）：

react 将新的虚拟 dom 与旧的虚拟 dom 进行比较，并计算要应用哪些更改。这是 react 优化渲染的一种方式。

查看更改：

计算出更改后，react 将它们应用到实际的 dom 上。因此，仅再次显示页面更改的部分。

渲染哪些组件？

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

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

时都会重新渲染组件

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

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

渲染优化

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

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

示例：

const memoizedcomponent = react.memo(mycomponent);

2。函数和值的记忆

为了避免在每次渲染时重新创建函数或值，请使用 usecallback 来记忆函数并使用 usememo 来记忆值。

usecallback 允许您记住函数并防止在依赖项发生变化之前重新创建它。
usememo 会记住函数的结果，因此不会在每次渲染时重新计算。

示例：

const increment = usecallback(() =&gt; {setcount(prevcount =&gt; prevcount + 1);
}, []);const expensivecalculation = usememo(() =&gt; {return count * 2;
}, [count]);

3。 redux 优化

如果您使用 redux，您可以使用记忆选择器（例如重新选择）进一步优化您的应用程序。这可以避免重新渲染不受状态更改影响的组件。

生命周期挂钩和渲染

在经典的react类中，我们使用shouldcomponentupdate来控制组件何时重新渲染。在功能组件中，可以使用 useeffect 和 memoization 来模拟这个概念。

结论

渲染和重新渲染对于 react 应用程序中的 ui 显示至关重要，但正确理解和优化这些过程可以区分慢速应用程序和超快应用程序。正确使用 memoization、usecallback、usememo 以及仔细处理 redux，有助于避免不必要的重新渲染，并保持我们的应用程序快速响应。

代码示例：实际渲染和重新渲染
这是一个使用 usestate、redux 和 memoization 来优化渲染的示例组件：

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';const MyComponent = () =&gt; {// Lokalni stateconst [count, setCount] = useState(0);// Redux stateconst reduxValue = useSelector(state =&gt; state.someValue);const dispatch = useDispatch();// Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderuconst increment = useCallback(() =&gt; {setCount(prevCount =&gt; prevCount + 1);}, []);// Memoizacija izračunate vrednosticonst expensiveCalculation = useMemo(() =&gt; {return count * 2;}, [count]);// Efekat koji se pokreće samo pri promeni reduxValueuseEffect(() =&gt; {console.log("Redux value changed:", reduxValue);}, [reduxValue]);return (<div><p>Count: {count}</p><p>Expensive Calculation: {expensiveCalculation}</p><button onclick="{increment}">Increment</button><button onclick="{()"> dispatch({ type: 'SOME_ACTION' })}&gt;Dispatch Redux Action</button></div>);
};

正如我们所看到的，这里使用了本地状态、redux、memoization 和 useeffect hook 的组合，以使应用程序尽可能高效。