React作为前端主流框架，在应用复杂度提升后，易出现渲染卡顿、性能下降问题。本文从核心理论出发，结合简单实例，讲解常用的React性能优化方法，新手也能快速上手应用。
一、核心理论基础（必懂）
1. 虚拟DOM与Diff算法
React不直接操作真实DOM，而是通过虚拟DOM（内存中的JavaScript对象）描述页面结构。当状态变化时，React通过Diff算法对比新旧虚拟DOM，只更新变化的部分（最小化DOM操作），这是React性能的基础，但不合理的使用仍会导致冗余渲染。
2. 关键优化核心
性能优化的核心是减少不必要的渲染——避免组件在props、state未变化时重新渲染，减少DOM操作频次。
二、常用性能优化方法（附实例）
1. React.memo（函数组件优化）
React.memo是高阶组件，用于缓存函数组件的渲染结果，当组件接收的props未发生浅变化时，直接复用之前的渲染结果，避免重复渲染。
// 未优化：每次父组件渲染，子组件都会重新渲染
function Child({ name }) {
console.log("子组件渲染");
return <div>{name}</div>;
}
// 优化后：props未变则不重新渲染
const MemoChild = React.memo(Child);
// 父组件
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>计数{count}</button>
<MemoChild name="React" />
</div>
);
}说明：React.memo默认做浅比较，若props是引用类型（对象、数组），需配合useMemo使用。
2. useMemo（缓存计算结果）
当组件中有复杂计算时，useMemo可缓存计算结果，避免每次渲染都重复执行计算，仅当依赖项变化时重新计算。
function App() {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
// 优化前：每次渲染都执行复杂计算
// const sum = calculateSum(a, b);
// 优化后：仅当a或b变化时，重新计算
const sum = useMemo(() => calculateSum(a, b), [a, b]);
return (
<div>
<p>总和：{sum}</p>
<button onClick={() => setA(a + 1)}>修改a</button>
</div>
);
}3. useCallback（缓存函数）
函数组件每次渲染时，内部定义的函数都会重新创建，导致传递给子组件的props（函数）发生变化，触发子组件重新渲染。useCallback可缓存函数，避免函数重复创建。
function Parent() {
const [count, setCount] = useState(0);
// 优化前：每次渲染都重新创建handleClick
// const handleClick = () => { console.log(count); };
// 优化后：仅当count变化时，重新创建函数
const handleClick = useCallback(() => {
console.log(count);
}, [count]);
return <MemoChild onClick={handleClick} />;
}4. shouldComponentUpdate（类组件优化）
类组件中，通过重写shouldComponentUpdate方法，判断props和state是否变化，返回false则阻止组件重新渲染（函数组件无需关注，用React.memo替代）。
class Child extends React.Component {
// 优化：仅当name变化时，才重新渲染
shouldComponentUpdate(nextProps) {
return nextProps.name !== this.props.name;
}
render() {
return <div>{this.props.name}</div>;
}
}三、基础优化小技巧
避免在渲染时创建引用类型（如在render中定义数组、对象），防止React.memo、useMemo失效；
合理拆分组件，将频繁变化的部分与稳定部分分离，减少渲染范围；
使用React.lazy和Suspense实现组件懒加载，减少首屏加载时间。
四、总结
React性能优化的核心是“减少冗余渲染、减少复杂计算、减少DOM操作”。上述方法是日常开发中最常用、最易落地的优化手段，结合实例练习，可快速提升React应用的流畅度，适配中大型项目开发需求。
