React的 useMemo 的作用

React 的 useMemo 主要用于优化 React 组件的性能。

当一个组件需要计算一个比较昂贵的值时，每次组件更新都重新计算该值可能会导致性能问题。这时可以使用 useMemo 来缓存计算结果，只有在依赖项发生变化时才重新计算值。

useMemo 的语法如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

其中，第一个参数是一个函数，用于计算需要缓存的值；第二个参数是一个数组，用于指定依赖项，只有依赖项发生变化时，才会重新计算值。

使用 useMemo 可以有效减少组件的重复计算，提升组件的渲染性能。

相关问题

react useMemo 作用

`useMemo`是React中的一个高效优化工具，它允许你在组件内部定义一个昂贵（如计算密集型）的操作，并仅在依赖项发生改变时才重新执行这个操作。其主要作用有两点：

1. **性能提升**[^1]：当你有一个计算量大的表达式，比如循环或递归，如果这个表达式的结果在整个组件生命周期内都不会变化，但频繁地被访问，`useMemo`可以帮助缓存计算结果，避免不必要的重复计算，提高性能。

2. **减少DOM更新**：`useMemo`返回的是一个值，这个值会被视为React组件的一部分并插入到DOM中。如果`useMemo`内的计算结果不变，即使组件其他部分重新渲染，浏览器也不必重新渲染包含`useMemo`结果的部分，从而减少了DOM树的变更，进一步优化了渲染效率。

下面是一个简单的`useMemo`示例，展示了如何在一个函数组件中利用它来优化性能：

import React, { useMemo } from 'react';

const HeavyComputation = () => {
  const expensiveResult = useMemo(() => {
    // 假设这是个非常耗时的计算
    const calculate = () => {
      let sum = 0;
      for (let i = 0; i < 10000; i++) {
        sum += i;
      }
      return sum;
    };
    return calculate();
  }, []);

  return (
    <div>
      <p>Calculated Value: {expensiveResult}</p>
    </div>
  );
};

在这个例子中，`expensiveResult`只会在组件首次渲染时计算，后续的渲染除非`[]`依赖数组改变，否则不会再次计算`calculate()`的结果。

react useMemo

React的useMemo是一种优化代码的手段，可以帮助我们使用缓存的值或函数来减少重复计算或渲染，从而优化性能。它在React.memo中特别有用，因为当props中的引用值失效时，可以帮助我们使用缓存值（同一个引用），从而在浅比较时不会重新渲染。\[1\]

在使用上，useMemo接受两个参数。第一个参数是一个函数，第二个参数是依赖项数组。只有当依赖项的值发生改变时，才会多次执行函数。否则，函数只会执行一次。如果依赖项数组为空(\[\])，则函数只会执行一次。\[2\]

举个例子，假设我们有一个函数式组件UseMemoTest，其中包含一个输入框和一个列表。我们可以使用useMemo来缓存根据输入框的值过滤后的列表数据。只有当输入框的值发生改变时，才会重新计算过滤后的列表数据。这样可以避免不必要的重复计算和渲染。\[2\]

另外，React.memo是一个高阶组件，当它作用于函数式组件并作为子组件时，每次父组件更新后，会浅对比传入的props是否发生变化。如果props没有变化，子组件就不会更新。这个时候，可以使用useMemo来返回一个函数，以确保子组件不会重新渲染。\[3\]

总结来说，React的useMemo可以帮助我们优化代码性能，通过使用缓存的值或函数来减少重复计算或渲染。它在React.memo中特别有用，可以帮助我们避免不必要的重新渲染。
#### 引用[.reference_title]
- *1* *3* [六分钟带你学会 react 中的 useMemo](https://blog.csdn.net/longxiaobao123/article/details/128547472)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [React中useMemo的简单使用](https://blog.csdn.net/u010234868/article/details/126956021)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]