了解 react native 如何渲染组件对于构建高效且高性能的应用程序至关重要。当组件的状态或属性发生变化时，react 会自动更新用户界面（ui）以反映这些变化。结果，react 再次调用组件的 render 方法来生成更新的 ui 表示。
在本文中，我们将探讨三个 react hook 以及它们如何防止 react 中不必要的渲染
- 使用备忘录
- usecallback
- useref
这些工具使我们能够通过避免不必要的重新渲染、提高性能和有效存储值来优化代码。
在本文结束时，我们将更好地了解如何使用这些方便的 react hook 使我们的 react 应用程序更快、响应更快。
使用 react 的 usememo
在 react 中，usememo 可以防止不必要的重新渲染并优化性能。
让我们探索一下 usememo 钩子如何防止 react 组件中不必要的重新渲染。
通过记住函数的结果并跟踪其依赖关系，usememo 确保仅在必要时重新计算该过程。
考虑以下示例：
import { usememo, usestate } from 'react';
function page() {
const [count, setcount] = usestate(0);
const [items] = usestate(generateitems(300));
const selecteditem = usememo(() => items.find((item) => item.id === count), [
count,
items,
]);
function generateitems(count) {
const items = [];
for (let i = 0; i < count; i++) {
items.push({
id: i,
isselected: i === count - 1,
});
}
return items;
}
return (
<div classname="tutorial">
<h1>count: {count}</h1>
<h1>selected item: {selecteditem?.id}</h1>
<button onclick={() => setcount(count + 1)}>increment</button>
</div>
);
}
export default page;
上面的代码是一个名为page的react组件，它使用usememo来优化selecteditem计算。
解释如下：
- 组件使用 usestate 挂钩维护状态变量计数。
- 项目状态是使用 usestate 钩子和generateitems函数的结果来初始化的。
- selecteditem是使用usememo计算的，它会记住items.find操作的结果。仅当计数或项目发生变化时才会重新计算。
- generateitems 函数根据给定的计数生成项目数组。
- 该组件呈现当前 count 值、selecteditem id 以及用于增加计数的按钮。
使用 usememo 通过记住 items.find 操作的结果来优化性能。它确保仅在依赖项（计数或项目）发生变化时才执行 selecteditem 的计算，从而防止后续渲染时不必要的重新计算。
应有选择地对计算密集型操作采用记忆化，因为它会给渲染过程带来额外的开销。
使用react的usecallback
react 中的 usecallback 钩子允许记忆函数，防止在每个组件渲染期间重新创建它们。通过利用 usecallback。只要其依赖项保持不变，部件仅创建一次并在后续渲染中重复使用。
考虑以下示例：
import react, { usestate, usecallback, memo } from 'react';
const allcolors = ['red', 'green', 'blue', 'yellow', 'orange'];
const shuffle = (array) => {
const shuffledarray = [...array];
for (let i = shuffledarray.length - 1; i > 0; i--) {
const j = math.floor(math.random() * (i + 1));
[shuffledarray[i], shuffledarray[j]] = [shuffledarray[j], shuffledarray[i]];
}
return shuffledarray;
};
const filter = memo(({ onchange }) => {
console.log('filter rendered!');
return (
<input
type='text'
placeholder='filter colors...'
onchange={(e) => onchange(e.target.value)}
/>
);
});
function page() {
const [colors, setcolors] = usestate(allcolors);
console.log(colors[0])
const handlefilter = usecallback((text) => {
const filteredcolors = allcolors.filter((color) =>
color.includes(text.tolowercase())
);
setcolors(filteredcolors);
}, [colors]);
return (
<div classname='tutorial'>
<div classname='align-center mb-2 flex'>
<button onclick={() => setcolors(shuffle(allcolors))}>
shuffle
</button>
<filter onchange={handlefilter} />
</div>
<ul>
{colors.map((color) => (
<li key={color}>{color}</li>
))}
</ul>
</div>
);
}
export default page;
上面的代码演示了 react 组件中的简单颜色过滤和洗牌功能。让我们一步一步来：
- 初始颜色数组定义为 allcolors。
- shuffle 函数接受一个数组并随机打乱其元素。它使用fisher-yates算法来实现洗牌。
- filter 组件是一个渲染输入元素的记忆化功能组件。它接收 onchange 属性并在输入值发生变化时触发回调函数。
- page 组件是渲染颜色过滤和洗牌功能的主要组件。
- 状态变量颜色使用 usestate 钩子进行初始化，初始值设置为 allcolors。它代表过滤后的颜色列表。
- handlefilter 函数是使用 usecallback 挂钩创建的。它采用文本参数并根据提供的文本过滤 allcolors 数组。然后使用 usestate 挂钩中的 setcolors 函数设置过滤后的颜色。依赖数组 [colors] 确保仅在颜色状态发生变化时重新创建 handlefilter 函数，通过防止不必要的重新渲染来优化性能。
- 页面组件内部有一个用于调整颜色的按钮。单击按钮时，它会使用经过排序的 allcolors 数组调用 setcolors 函数。
- filter 组件是通过将 onchange 属性设置为handlefilter 函数来渲染的。
- 最后，颜色数组被映射以将颜色项列表渲染为
- 元素。
usecallback 钩子用于记忆handlefilter 函数，这意味着该函数仅创建一次，并且如果依赖项（在本例中为颜色状态）保持不变，则在后续渲染中重用。
此优化可以防止接收 handlefilter 函数作为 prop 的子组件不必要的重新渲染，例如 filter 组件。
它确保在颜色状态没有改变的情况下 filter 组件不会重新渲染，从而提高性能。
使用 react 的 useref
增强 react 应用程序性能并避免不必要的重新渲染的另一种方法是使用 useref 钩子。使用 useref，我们可以存储一个在渲染过程中持续存在的可变值，有效防止不必要的重新渲染。
这种技术允许我们维护对某个值的引用，而不会在该值发生变化时触发组件更新。通过利用引用的可变性，我们可以优化特定场景下的性能。
考虑以下示例：
import React, { useRef, useState } from 'react';
function App() {
const [name, setName] = useState('');
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus();
}
return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
ref={inputRef}
/>
<button onClick={handleClick}>Focus</button>
</div>
);
}
上面的示例有一个简单的输入字段和一个按钮。 useref 钩子创建一个名为 inputref 的引用。一旦单击按钮，就会调用handleclick 函数，该函数通过访问inputref ref 对象的当前属性来关注输入元素。因此，它可以防止输入值更改时组件不必要的重新渲染。
为了确保 useref 的最佳使用，请仅将其保留用于不影响组件渲染的可变值。如果可变值影响组件的渲染，则应将其存储在其状态中。
结论
在本教程中，我们探索了 react 重新渲染的概念及其对应用程序性能的潜在影响。我们深入研究了有助于减少不必要的重新渲染的优化技术。 react 提供了各种钩子，使我们能够增强应用程序的性能。通过利用这些钩子，我们可以在渲染之间有效地存储值和函数，从而显着提高 react 应用程序性能。
