React 如何优化性能？

Question

React 如何优化性能？

仓乃文 · Accepted Answer

React 性能优化主要从避免不必要的渲染、减少计算、懒加载三个方面入手。核心是减少组件的无效重渲染。避免不必要的渲染： ```javascript // React.memo 缓存组件 const ExpensiveChild = React.memo(function ExpensiveChild({ data }) { return

{/* 复杂渲染 */}

; }); // useMemo 缓存计算结果 function Component({ list, filter }) { const filteredList = useMemo(() => { return list.filter(item => item.name.includes(filter)); }, [list, filter]); return filteredList.map(item =>

{item.name}

); } // useCallback 缓存回调函数 const handleClick = useCallback(() => { console.log("clicked"); }, []); ``` 虚拟列表（长列表优化）： ```javascript import { FixedSizeList } from "react-window"; function VirtualList({ items }) { return ( {({ index, style }) => (

{items[index].name}

)} ); } ``` 补充说明： - React.memo 默认浅比较 props，深比较需要自定义第二个参数 - useMemo 用于缓存计算结果，依赖变化才重新计算 - useCallback 是 useMemo 的特化版本，专门缓存函数 - 虚拟列表只渲染可见区域，适合上万条数据的列表