1. 前言

1. 哈哈,这其实是一篇根据 chatGPT的回答 加上我的润色出来的文章

2. 是什么 what

1. useMemo 是 React 提供的一个用于优化组件性能的工具。
2. 如果说类组件的性能优化的方法是shouldComponentUpdate 和 PureComponent
3. 那么给函数组件做性能优化的就是这个useMemo。

4. 在 React 应用中，当一个组件被渲染时，会调用组件内部的各种函数和方法。这些函数和方法可能会执行一些昂贵的计算，比如处理大量数据，进行复杂的计算等等。
   如果这些函数和方法每次渲染组件时都被重新计算，会导致组件的渲染变慢。
5. 这时就需要用到 useMemo。useMemo 是一个 React 钩子函数，用于在组件渲染期间缓存函数的计算结果，以减少不必要的计算。

3. 应用场景

1. 处理大量数据，进行复杂的计算
2. 进行 HTTP 请求或者其他 IO 操作
3. 对一个函数的返回值进行缓存，以减少不必要的计算
4. 需要注意的是，使用 useMemo 可能会带来额外的开销，因为需要将计算结果缓存起来。因此，在需要进行性能优化时，需要仔细考虑是否需要使用 useMemo。

4. 如何使用 useMemo？

1. 使用 useMemo 的方法很简单，只需要在组件中引入 useMemo，然后将需要缓存计算结果的函数作为第一个参数传入 useMemo，就可以实现对函数计算结果的缓存
2. 相关代码

import React, { useState, useMemo, useEffect } from "react";
function App() {
  const [number, setNumber] = useState(0);
  const [text, setText] = useState("");
  const showNum = () => {
    console.log(" render -渲染");
    return "my name is " + number;
  };
  const expensiveComputation = useMemo(() => {
    // 假设这里有一个昂贵的计算
    console.log("进行昂贵的计算...");
    let result = 0;
    for (let i = 0; i < number * 1000000; i++) {
      result += i;
    }
    return result;
  }, [number]);
//  useEffect(()=>{
//   let result = 0;
//     for (let i = 0; i < number * 1000000; i++) {
//       result += i;
//     }
//     setNumber(result)
//  },[number])
  return (
    <div>
      <h1>useMemo 示例</h1>
      <p>计算结果:{number} ---{expensiveComputation} </p>
      <p>{showNum()}</p>
      <button onClick={() => setNumber(number + 1)}>增加数字</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}
export default App;

3.上面的代码中，expensiveComputation 是需要缓存的计算结果，

4. 第一个参数传入的是计算函数，
5. 第二个参数是一个数组，用于告诉 React 在哪些变量发生变化时需要重新计算计算结果。
6. 这个数组的作用在于，当其中的变量发生变化时，React 会重新计算计算结果，并将新的计算结果保存到缓存中，当变量未发生变化时，React 会从缓存中读取计算结果，避免了不必要的计算。

5. 总结

1. 使用 useMemo 是一种简单而有效的性能优化方法，可以帮助我们减少不必要的计算，提高组件的渲染速度，提高 React 应用的整体性能。但是，在使用 useMemo 时，需要仔细考虑是否真的需要对计算结果进行缓存

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉