使用 useMemo 提高 React 组件性能
2023-04-23 本文已影响0人
云高风轻
1. 前言
- 哈哈,这其实是一篇根据
chatGPT的回答 加上我的润色出来的文章
2. 是什么 what
useMemo是 React 提供的一个用于优化组件性能的工具。
- 如果说类组件的性能优化的方法是
shouldComponentUpdate和PureComponent- 那么给函数组件做性能优化的就是这个
useMemo。
- 在 React 应用中，当一个组件被渲染时，会调用组件内部的各种函数和方法。这些函数和方法可能会执行一些昂贵的计算，比如处理
大量数据，进行复杂的计算等等。
如果这些函数和方法每次渲染组件时都被重新计算，会导致组件的渲染变慢。
- 这时就需要用到 useMemo。useMemo 是一个 React 钩子函数，用于在组件渲染期间缓存函数的计算结果，以
减少不必要的计算。
3. 应用场景
- 处理大量数据，进行复杂的计算
- 进行 HTTP 请求或者其他 IO 操作
- 对一个函数的返回值进行缓存，以减少不必要的计算
- 需要注意的是，使用 useMemo 可能会带来额外的开销，因为需要将计算结果缓存起来。因此，在需要进行性能优化时，需要仔细考虑是否需要使用 useMemo。
4. 如何使用 useMemo？
- 使用 useMemo 的方法很简单，只需要在组件中引入 useMemo，然后将需要缓存计算结果的函数作为第一个参数传入 useMemo，就可以实现对函数计算结果的缓存
- 相关代码
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 是需要缓存的计算结果，
- 第一个参数传入的是计算函数，
- 第二个参数是一个数组，用于告诉 React 在哪些变量发生变化时需要重新计算计算结果。
- 这个数组的作用在于，当其中的变量发生变化时，React 会重新计算计算结果，并将新的计算结果保存到缓存中，当变量未发生变化时，React 会从缓存中读取计算结果，避免了不必要的计算。
5. 总结
- 使用 useMemo 是一种简单而有效的性能优化方法，可以帮助我们减少不必要的计算，提高组件的渲染速度，提高 React 应用的整体性能。但是，在使用 useMemo 时，需要仔细考虑是否真的需要对计算结果进行缓存
