概念
性能优化是指通过减少不必要的渲染或计算来提高应用的性能。React 提供了 React.memo、useCallback、useMemo 等工具来优化性能。
用法
React.memo：缓存函数组件，避免在 Props 没有变化时重新渲染。useCallback：缓存回调函数，避免在每次渲染时重新创建。useMemo：缓存计算结果，避免在依赖项没有变化时重新计算。
使用场景
React.memo：当父组件重新渲染时，子组件不需要重新渲染。useCallback：当回调函数作为 Props 传递给子组件时。useMemo：当计算结果依赖复杂逻辑或大量数据时。
代码示例
// 1. 使用 React.memo 缓存组件
const ExpensiveComponent = React.memo(function({ value }) {console.log('ExpensiveComponent rendered');return <div>Value: {value}</div>;
});function ParentComponent() {const [count, setCount] = React.useState(0);const [value, setValue] = React.useState(10);// 2. 使用 useCallback 缓存回调函数const increment = React.useCallback(() => {setCount(prev => prev + 1);}, []);// 3. 使用 useMemo 缓存计算结果const doubledValue = React.useMemo(() => {console.log('Calculating doubled value');return value * 2;}, [value]);return (<div><button onClick={increment}>Increment Count: {count}</button><button onClick={() => setValue(prev => prev + 5)}>Change Value: {value}</button><div>Doubled Value: {doubledValue}</div><ExpensiveComponent value={doubledValue} /></div>);
}
代码解析：
React.memo：ExpensiveComponent只会在value变化时重新渲染。useCallback：increment函数在组件渲染时不会重新创建。useMemo：doubledValue只会在value变化时重新计算。
