了解 react native 如何渲染组件对于构建高效且高性能的应用程序至关重要。当组件的状态或属性发生变化时，react 会自动更新用户界面（ui）以反映这些变化。结果，react 再次调用组件的 render 方法来生成更新的 ui 表示。
在本文中，我们将探讨三个 react hook 以及它们如何防止 react 中不必要的渲染
使用备忘录usecallbackuseref
这些工具使我们能够通过避免不必要的重新渲染、提高性能和有效存储值来优化代码。
在本文结束时，我们将更好地了解如何使用这些方便的 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 ( count: {count}
selected item: {selecteditem?.id}
); } 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 ( 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 ( {colors.map((color) => ( - {color}
))}
); } 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 ( setName(e.target.value)} ref={inputRef} /> );}
上面的示例有一个简单的输入字段和一个按钮。 useref 钩子创建一个名为 inputref 的引用。一旦单击按钮，就会调用handleclick 函数，该函数通过访问inputref ref 对象的当前属性来关注输入元素。因此，它可以防止输入值更改时组件不必要的重新渲染。
为了确保 useref 的最佳使用，请仅将其保留用于不影响组件渲染的可变值。如果可变值影响组件的渲染，则应将其存储在其状态中。
结论
在本教程中，我们探索了 react 重新渲染的概念及其对应用程序性能的潜在影响。我们深入研究了有助于减少不必要的重新渲染的优化技术。 react 提供了各种钩子，使我们能够增强应用程序的性能。通过利用这些钩子，我们可以在渲染之间有效地存储值和函数，从而显着提高 react 应用程序性能。
以上就是如何防止不必要的 React 组件重新渲染的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491237.html
微信扫一扫 
支付宝扫一扫 
