React 之 useMemo Hook （九）

useMemo 是 React 的一个Hook，它允许你"记住"一些计算值，只有在依赖项之一发生变化时才会重新计算这些值。这有助于避免不必要的重新计算和渲染，从而提高应用程序的性能。

代码栗子（计算一个斐波那契数列的值）：

javascript 复制代码

import React, { useMemo } from 'react';  
  
function Fibonacci({ count }) {  
  // 使用 useMemo 来缓存斐波那契数列的计算结果  
  const fibonacciNumber = useMemo(() => {  
    if (count <= 1) return count;  
    return Fibonacci.calculateFibonacci(count - 1) + Fibonacci.calculateFibonacci(count - 2);  
  }, [count]); // 依赖项数组：当 count 发生变化时，重新计算  
  
  // 辅助函数（注意：这只是一个示例，实际中可能会使用更高效的算法）  
  Fibonacci.calculateFibonacci = function(n) {  
    if (n <= 1) return n;  
    return Fibonacci.calculateFibonacci(n - 1) + Fibonacci.calculateFibonacci(n - 2);  
  };  
  
  return <div>Fibonacci number {count} is {fibonacciNumber}</div>;  
}  
  
export default Fibonacci;

什么时候用useMemo

React中的useMemo钩子函数主要用于优化性能，特别是在处理复杂的函数或计算密集型操作时。

以下是使用useMemo的一些常见场景：

计算密集型操作：当有一个操作需要较多的计算资源，并且结果会因某些特定的依赖项改变而改变时，可以使用useMemo。例如，你可能有一个复杂的计算，其输出依赖于某些props或state的值。当这些值改变时，你可能需要重新运行计算。但是，如果它们没有改变，使用useMemo可以缓存结果，从而避免不必要的计算。
避免不必要的渲染：当组件的一部分在特定状态或道具更改时不应该重新渲染时，可以使用useMemo来避免这部分的重新渲染。通过缓存计算结果，你可以防止React重新渲染那些其props没有发生变化的子组件。

useMemo的工作机制是接受一个函数和一个依赖数组，只有当依赖项发生改变时，才会重新计算函数并更新缓存值。在初始渲染时，传入的函数会被执行一次，之后的渲染中，只有当依赖数组中的某个依赖项发生变化时，该函数才会被重新执行。这意味着，如果你可以确定你的函数不依赖于任何props或state，或者你的函数总是返回相同的结果，那么你可能不需要使用useMemo。

请注意

虽然useMemo可以提高性能，但如果不正确使用，它也可能导致问题。特别是，它可能会隐藏你的组件中的性能瓶颈，或者导致你的代码更难理解和维护。因此，在使用useMemo时，应始终权衡其带来的好处和潜在的问题。