react useMemo 原理

React 的 useMemo 和 useCallback 都是为了优化 React 中的性能而设计的。

useMemo 的原理是利用 memoization（记忆化）技术将函数的结果缓存起来。在依赖项没有发生变化的情况下， useMemo 会直接返回缓存的结果，避免了重复计算的问题。当依赖项发生变化时， useMemo 会重新执行函数，并缓存新的结果。

useMemo 接收两个参数：第一个参数是一个回调函数（要被缓存的函数），第二个参数是一个数组，表示函数所依赖的变量。如果没有依赖项，则可以将其省略，useMemo 将不会重复计算。

例如，下面的代码演示了如何使用 useMemo 缓存一个计算结果：

const memoizedValue = useMemo(() => {
  // 计算结果
  return someExpensiveComputation(a, b);
}, [a, b]);

上面的代码中，仅当 a 或 b 发生变更时，useMemo 才会重新执行回调函数，否则会直接返回缓存的结果 memoizedValue。

总的来说，useMemo 可以有效地优化 React 应用程序的性能，在遇到性能问题时可以考虑使用。

相关问题

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 ]

react usememo usecallback

react useMemo 和 useCallback 是 React 中的两个 hooks，可以用于优化组件的性能。

useMemo 可以用来缓存计算结果，避免不必要的重复计算。使用 useMemo 包裹的函数只有在其依赖项发生改变时才会重新计算，否则会直接返回上一次的计算结果。

useCallback 也能起到类似的作用，它会返回一个 memoized（记忆化）的函数，避免重复创建函数实例。一般情况下，useCallback 用于将回调函数作为 props 传递给子组件时，可以避免子组件不必要的重新渲染。

总的来说，这两个 hooks 都可以用来提高组件的性能。