如何防止不必要的 React 组件重新渲染

php中文网 2024-10-15 11:47:22

了解 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(() =&gt; items.find((item) =&gt; 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)}&gt;increment</button>
        
      );
    }

    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) =&gt; {
      const shuffledarray = [...array];
      for (let i = shuffledarray.length - 1; i &gt; 0; i--) {
        const j = math.floor(math.random() * (i + 1));
        [shuffledarray[i], shuffledarray[j]] = [shuffledarray[j], shuffledarray[i]];
      }
      return shuffledarray;
    };

    const filter = memo(({ onchange }) =&gt; {
      console.log('filter rendered!');

      return (
        <input type="text" placeholder="filter colors..." onchange="{(e)"> onchange(e.target.value)}
        /&gt;
      );
    });

    function page() {
      const [colors, setcolors] = usestate(allcolors);
      console.log(colors[0])

      const handlefilter = usecallback((text) =&gt; {
        const filteredcolors = allcolors.filter((color) =&gt;
          color.includes(text.tolowercase())
        );
        setcolors(filteredcolors);
      }, [colors]);


      return (
        <div classname="tutorial">
        <div classname="align-center mb-2 flex">
          <button onclick="{()"> setcolors(shuffle(allcolors))}&gt;
            shuffle
          </button>
          <filter onchange="{handlefilter}"></filter>
</div>
        <ul>
          {colors.map((color) =&gt; (
            <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}
      /&gt;
      <button onclick="{handleClick}">Focus</button>
    </div>
  );
}

上面的示例有一个简单的输入字段和一个按钮。 useref 钩子创建一个名为 inputref 的引用。一旦单击按钮，就会调用handleclick 函数，该函数通过访问inputref ref 对象的当前属性来关注输入元素。因此，它可以防止输入值更改时组件不必要的重新渲染。

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

结论

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

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

本文地址： http://www.ipsmc.com/web/9716.html