当我们在 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(() => {
setcount(prevcount => prevcount + 1);
}, []);
const expensivecalculation = usememo(() => {
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 = () => {
// Lokalni state
const [count, setCount] = useState(0);
// Redux state
const reduxValue = useSelector(state => state.someValue);
const dispatch = useDispatch();
// Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
const increment = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []);
// Memoizacija izračunate vrednosti
const expensiveCalculation = useMemo(() => {
return count * 2;
}, [count]);
// Efekat koji se pokreće samo pri promeni reduxValue
useEffect(() => {
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' })}>
Dispatch Redux Action
</button>
</div>
);
};
正如我们所看到的,这里使用了本地状态、redux、memoization 和 useeffect hook 的组合,以使应用程序尽可能高效。