了解 react native 如何渲染组件对于构建高效且高性能的应用程序至关重要。当组件的状态或属性发生变化时，react 会自动更新用户界面（ui）以反映这些变化。结果，react 再次调用组件的 render 方法来生成更新的 ui 表示。
在本文中，我们将探讨三个 react hook 以及它们如何防止 react 中不必要的渲染
这些工具使我们能够通过避免不必要的重新渲染、提高性能和有效存储值来优化代码。
在本文结束时，我们将更好地了解如何使用这些方便的 react hook 使我们的 react 应用程序更快、响应更快。
在 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
<h1>count: {count}</h1>
<h1>selected item: {selecteditem?.id}</h1>
<button onclick="{()"> setcount(count + 1)}>increment</button>
);
}
export default page;
上面的代码是一个名为page的react组件，它使用usememo来优化selecteditem计算。
解释如下：
使用 usememo 通过记住 items.find 操作的结果来优化性能。它确保仅在依赖项（计数或项目）发生变化时才执行 selecteditem 的计算，从而防止后续渲染时不必要的重新计算。
应有选择地对计算密集型操作采用记忆化，因为它会给渲染过程带来额外的开销。
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}"></filter>
</div>
<ul>
{colors.map((color) => (
<li key="{color}">{color}</li>
))}
</ul>
</div>
);
}
export default page;
上面的代码演示了 react 组件中的简单颜色过滤和洗牌功能。让我们一步一步来：
usecallback 钩子用于记忆handlefilter 函数，这意味着该函数仅创建一次，并且如果依赖项（在本例中为颜色状态）保持不变，则在后续渲染中重用。
此优化可以防止接收 handlefilter 函数作为 prop 的子组件不必要的重新渲染，例如 filter 组件。
它确保在颜色状态没有改变的情况下 filter 组件不会重新渲染，从而提高性能。
增强 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 应用程序性能。