咱们写 React 项目时，是不是常常遇到页面没改啥，组件却疯狂重渲染，CPU 占用率飙升，页面卡到怀疑人生？别以为这是小问题，它可能让你的项目性能直降 “腰斩”！今天就分享一个超硬核的实战技巧，只需 3 行代码，就能让组件渲染效率翻倍！

组件无意义重渲染拖垮性能

在实际开发中，我们经常会遇到这样的情况：某个父组件更新了一个无关紧要的状态，结果导致一堆子组件跟着重新渲染。比如一个展示列表的子组件，明明列表数据没变化，却因为父组件的其他状态更新而反复渲染，白白消耗性能。这种无意义的重渲染，就像电脑后台偷偷运行了一堆无用程序，让整个项目变得越来越慢。

React.memo与useMemo的 “记忆魔法”

React.memo和useMemo就像是 React 给开发者的 “记忆神器”。React.memo用于包裹函数式组件，它会自动对比组件的props，如果props没有变化，就直接复用上次的渲染结果，跳过重新渲染的过程。而useMemo则更灵活，它可以缓存函数的计算结果，只有当依赖项发生变化时，才会重新计算。简单来说，它们能帮我们记住哪些数据和组件状态没有变化，避免做无用功。

3 行代码实现性能优化

// 引入React库
import React from'react';
// 使用React.memo包裹子组件，开启“记忆模式”
const MemoizedComponent = React.memo((props) => {
// 组件内部逻辑，这里简单展示props数据
return <div>{props.data}</div>;
});
const ParentComponent = () => {
// 定义一个与子组件无关的状态，用于模拟父组件更新
const [count, setCount] = React.useState(0);
// 定义子组件需要的数据
const data = "固定展示数据";
return (
<div>
<button onClick={() => setCount(count + 1)}>点击增加计数</button>
{/* 使用优化后的子组件，传递数据 */}
<MemoizedComponent data={data} />
</div>
);
};

如果想缓存某个计算结果，还可以使用useMemo：

const App = () => {
const [number1, setNumber1] = React.useState(1);
const [number2, setNumber2] = React.useState(2);
// 使用useMemo缓存计算结果，只有number1或number2变化时才重新计算
const result = React.useMemo(() => {
return number1 + number2;
}, [number1, number2]);
return (
<div>
<p>结果: {result}</p>
<button onClick={() => setNumber1(number1 + 1)}>增加number1</button>
<button onClick={() => setNumber2(number2 + 1)}>增加number2</button>
</div>
);
};

性能提升肉眼可见

优化前，每次父组件状态更新，子组件都会重新渲染，页面的性能监控工具会显示大量的渲染开销。而使用React.memo或useMemo优化后，当父组件进行无关更新时，子组件会直接复用上次的渲染结果，性能监控工具中的渲染次数大幅减少，页面响应速度明显提升，用户操作也更加流畅。

何时使用才最有效？

虽然React.memo和useMemo很好用，但也不是万能的。在一些场景下，过度使用可能会导致代码逻辑变得复杂，反而增加维护成本。比如，当组件本身逻辑简单，渲染开销不大时，使用它们可能收益不高；而在大型项目、复杂组件或频繁更新的场景中，它们就能发挥巨大作用。

那么，在实际项目中，你更倾向优先使用React.memo还是useMemo？有人觉得React.memo更简单直接，适合快速优化组件；也有人认为useMemo更灵活，能处理复杂的计算逻辑。快来评论区分享你的看法，一起探讨最佳实践！