如何优化React组件性能？

React本身很快，但如果你不小心，组件不必要的重复渲染会把性能拖慢。优化React性能，核心思路就是一句话：避免做不必要的工作。这主要围绕组件的重新渲染展开。

用React.memo包裹函数组件

默认情况下，只要父组件重新渲染，它的所有子组件都会跟着重渲染，哪怕子组件的props没变。React.memo是个高阶组件，它会对函数组件的props进行浅比较，只有props真的变了，它才会让组件重新渲染。

const MyComponent = React.memo(function MyComponent(props) {
  /* 只有当 props 变化时才会渲染 */
});

这招对那种接收固定props、渲染结果稳定的“纯”组件特别管用。但记住，它只进行浅比较，如果props里有复杂对象或函数，可能就不灵了，得配合其他手段。

用useMemo和useCallback缓存

在函数组件里，每次渲染都会创建新的函数和对象。如果它们被当作props传给子组件，即使内容没变，引用变了，也会导致子组件重新渲染。
useMemo用来缓存计算结果，useCallback用来缓存函数本身。它们都依赖一个数组，只有当数组里的值变了，才会重新计算或创建。

const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

把memoizedCallback传给用React.memo包裹的子组件，就能避免子组件因为函数引用变化而无辜重渲染。

避免在渲染函数里做高开销计算

如果你在组件函数体里（或者useMemo的依赖数组里）直接做复杂的计算、循环或者数据转换，每次渲染都会跑一遍。尽量用useMemo把这类计算包起来，或者提到组件外面去。

小心Context引起的渲染

当你用useContext消费一个Context时，只要Context的值更新了，所有消费这个Context的组件都会强制重新渲染，哪怕它们只用到了值的一部分。如果遇到性能问题，可以考虑把Context拆分成更细粒度的多个，或者使用状态管理库（如Zustand、Jotai）这类能进行选择式订阅的方案。

用useEffect管理副作用，别阻塞渲染

副作用（比如数据获取）应该放在useEffect里，别直接放在渲染逻辑中。确保useEffect的依赖数组设置正确，避免副作用过于频繁地执行。对于动画等高频更新，可以考虑用requestAnimationFrame或者专门的动画库。

虚拟列表处理长列表

如果要渲染成百上千行的列表，别一股脑全塞进DOM。用虚拟列表库（如react-window、react-virtualized），它们只渲染可视区域内的那几行，DOM节点数恒定，性能提升立竿见影。

总之，优化要先测量。用React DevTools的Profiler工具找到真正的性能瓶颈，再对症下药。别一开始就过度优化，清晰的代码结构永远是第一位的。