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

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

• useMemo
• useCallback
• useRef

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

在本文结束时，我们将更好地了解如何使用这些方便的 React hooks 使我们的 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: {count}
          
Selected Item: {selectedItem?.id}
           setCount(count   1)}>Increment
        
      );
    }

    export default Page;

上面的代码是一个名为Page的React组件，它使用useMemo来优化selectedItem计算。

解释如下：

• 组件使用 useState 挂钩维护状态变量计数。
• 项目状态是使用 useState 钩子和generateItems函数的结果来初始化的。
• selectedItem是使用useMemo计算的，它会记住items.find操作的结果。它仅在计数或项目发生变化时重新计算。
• generateItems 函数根据给定的计数生成项目数组。
• 该组件呈现当前的计数值、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 (
        

        

           setColors(shuffle(allColors))}>
            Shuffle
          
          
        
        

          {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 组件。
它确保如果颜色状态没有改变，过滤器组件不会重新渲染，从而提高性能。

使用 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}
      />
      Focus
    
  );
}

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

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

结论

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