概念
性能优化是指通过减少不必要的渲染或计算来提高应用的性能。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
变化时重新计算。