公司企业简介图片_免费视频网站大全_体验营销策划方案_小程序推广的十种方式

概念

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