如何防止不必要的 React 组件重新渲染-青狐资源网

了解 react native 如何渲染组件对于构建高效且高性能的应用程序至关重要。当组件的状态或属性发生变化时，react 会自动更新用户界面（ui）以反映这些变化。结果，react 再次调用组件的 render 方法来生成更新的 ui 表示。

在本文中，我们将探讨三个 react hook 以及它们如何防止 react 中不必要的渲染

使用备忘录 usecallback useref

这些工具使我们能够通过避免不必要的重新渲染、提高性能和有效存储值来优化代码。

在本文结束时，我们将更好地了解如何使用这些方便的 react hook 使我们的 react 应用程序更快软件开发定制mhkj33、响应更快。

使用 react 的 usememo

在 react 中，usememo 可以防止不必要的重新渲染并优化性能。

让我们探索一下 usememo 钩子如何防止 react 组件中不必要的重新渲染。

通过记住函数的结果并跟踪其依赖关系，usememo 确保仅在必要时重新计算该过程。

考虑以下示例：

import { usememo, usestate } from react;

function page() {

const [count, setcount] = usestate(0);

const [items] = usest软件开发定制mhkj33ate(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)}>i软件开发定制mhkj33ncrement</button>

);

}

export default page;

登录后复制

上面的代码是一个名为page的react组件，它使用usememo来优化selecteditem计算。

解释如下：

组件使用 usestate 挂钩维护状态变量计数。项目状态是使用 usestate 钩子和generateitems函数的结果来初始化的。 selecteditem是使用usememo计算的，它会记住items.find操作的结果。仅当计数或项目发生变化时才会重新计算。 generateitems 函数根据给定的计数生成项目数组。软件开发定制mhkj33 该组件呈现当前count 值、selecteditem id 以及用于增加计数的按钮。

使用 usememo 通过记住 items.find 操作的结果来优化性能。它确保仅在依赖项（计数或项目）发生变化时才执行 selecteditem 的计算，从而防止后续渲染时不必要的重新计算。

应有选择地对计算密集型操作采用记忆化，因为它会给渲染过程带来额外的开销。

使用react的usecallback

react 中的 usecallback 钩子允许记忆函数，防止在每个组件渲染期间重新创建它们。通过利用 usecallback。只要其依赖项保持不变，部件仅创建一次并在后续渲染中重复使用。

考虑以下示例：

3软件开发定制mhkj33

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 软件开发定制mhkj33– 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…” onc软件开发定制mhkj33hange=”{(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);

},软件开发定制mhkj33 [colors]);

return (

<button onclick=”{()”> setcolors(shuffle(allcolors))}>

shuffle

</button>

</div>

<ul>

{colors.map((color) => (

<li key=”{color}”>{color}</li>

))}

</ul>

</div>

);

}

export default 软件开发定制mhkj33page;

登录后复制

上面的代码演示了 react 组件中的简单颜色过滤和洗牌功能。让我们一步一步来：

初始颜色数组定义为 allcolors。 shuffle 函数接受一个数组并随机打乱其元素。它使用fisher-yates算法来实现洗牌。 filter 组件是一个渲染输入元素的记忆化功能组件。它接收 onchange 属性并在输入值发生变化时触发回调函数。 page 组件是渲染颜色过滤和洗牌功能的主要组件。状态变量颜色使用 usestate 钩子进行初始化，初始值设置为 allcolors。它代表过滤后的颜色列表。软件开发定制mhkj33 handlefilter 函数是使用 usecallback 挂钩创建的。它采用文本参数并根据提供的文本过滤 allcolors 数组。然后使用 usestate 挂钩中的 setcolors 函数设置过滤后的颜色。依赖数组 [colors] 确保仅在颜色状态发生变化时重新创建 handlefilter 函数，通过防止不必要的重新渲染来优化性能。页面组件内部有一个用于调整颜色的按钮。单击按钮时，它会使用经过排序的 allcolors 数组调用 setcolors 函数。 filter 组件是通过将 onchange 属性设置为handlefilter 函数软件开发定制mhkj33来渲染的。最后，颜色数组被映射以将颜色项列表渲染为元素。

usecallback 钩子用于记忆handlefilter 函数，这意味着该函数仅创建一次，并且如果依赖项（在本例中为颜色状态）保持不变，则在后续渲染中重用。

此优化可以防止接收 handlefilter 函数作为 prop 的子组件不必要的重新渲染，例如 filter 组件。

它确保在颜色状态没有改变的情况下 filter 组件不会重新渲染，从而提高性能。

使用 react 的 useref

增强 react 应用程序性能并避免不必要的重新渲染的另一种方法是使用 useref 钩子。使用 useref，我们软件开发定制mhkj33可以存储一个在渲染过程中持续存在的可变值，有效防止不必要的重新渲染。

这种技术允许我们维护对某个值的引用，而不会在该值发生变化时触发组件更新。通过利用引用的可变性，我们可以优化特定场景下的性能。

考虑以下示例：

import React, { useRef, useState } from react;

function App() {

const [name, setName] = useState();

const inputRef = useRef(null);

function handleClick() {

inputRef.current.软件开发定制mhkj33focus();

}

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 对象的当前属性来关注输入元素。因此，它可以防止输入值更软件开发定制mhkj33改时组件不必要的重新渲染。

为了确保 useref 的最佳使用，请仅将其保留用于不影响组件渲染的可变值。如果可变值影响组件的渲染，则应将其存储在其状态中。

结论

在本教程中，我们探索了 react 重新渲染的概念及其对应用程序性能的潜在影响。我们深入研究了有助于减少不必要的重新渲染的优化技术。 react 提供了各种钩子，使我们能够增强应用程序的性能。通过利用这些钩子，我们可以在渲染之间有效地存储值和函数，从而显着提高 react 应用程序性能。

以上就是如何防止不必要的 React 组件重新渲染的详细内容，更多请关注青狐资源网其它相关文章！

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END