React useMemo使用

React的useMemo是一个用于性能优化的Hook，它可以在组件重新渲染时避免不必要的计算。它的基本语法是：

const memoizedValue = useMemo(() => {
  // 需要缓存的计算逻辑
  return someValue;
}, [dep1, dep2, ...]);

第一个参数是一个函数，返回值是需要缓存的值。第二个参数是一个依赖数组，当依赖数组中的任意一项发生变化时，才会重新计算memoizedValue。

举个例子，假设有一个组件需要根据props中的数据进行复杂的计算，但是这个计算过程很耗时，我们可以使用useMemo来缓存计算结果，避免无意义的重复计算：

function MyComponent(props) {
  const { data } = props;

  const result = useMemo(() => {
    // 这里进行复杂的计算
    let sum = 0;
    for (let i = 0; i < data.length; i++) {
      sum += data[i];
    }
    return sum;
  }, [data]);

  return <div>{result}</div>;
}

在上面的例子中，只有当data发生变化时，才会重新计算result，否则会直接使用之前缓存的值。这样可以有效地减少不必要的计算，提高组件的性能。

相关问题

react usememo的使用场景

React 的 useMemo hook 主要用于性能优化。在组件中有一些计算量比较大的操作，如果每次组件渲染时都需要重新计算一次，可能会影响页面的性能和用户体验。

使用 useMemo 可以缓存某个操作的计算结果，只有当依赖的参数发生变化时，才会重新计算。这样可以避免无谓的计算，提高组件的渲染性能。

常见的使用场景包括：

1. 计算组件 props：当组件的 props 需要根据一些数据进行计算时，可以使用 useMemo 缓存计算结果，避免在每次组件渲染时都重新计算。

2. 过滤、排序数据：当需要对数据进行复杂的排序或过滤时，可以使用 useMemo 缓存结果，避免在每次组件渲染时都重新计算。

3. 避免重复渲染子组件：当父组件的某个 props 发生变化时，可能会导致子组件重新渲染，但有些情况下子组件的渲染并不需要重新计算。可以使用 useMemo 缓存子组件的渲染结果，避免不必要的渲染。

4. 缓存函数：当需要在多个组件中使用同一个函数时，可以使用 useMemo 缓存函数，避免在每次组件渲染时都重新定义函数。

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 ]