如何使用usememo和usecallback进行性能优化，什么时候使用usecallback,什么时候使用usememo

React useMemo 和 useCallback 性能优化总结以及使用场景

基本概念

useMemo

用于缓存计算结果，避免在每次渲染时重复进行昂贵的计算。

useCallback

用于缓存函数引用，避免在每次渲染时创建新的函数引用。

使用时机对比

useMemo 适用场景

1. 复杂计算

function DataGrid({ items, filter }) {// 适用：复杂的数据处理const filteredItems = useMemo(() => {return items.filter(item => {return complexFilterLogic(item, filter);});}, [items, filter]);return <div>{filteredItems.map(item => <Item key={item.id} {...item} />)}</div>;
}

2. 避免重复创建大对象

function ChartComponent({ data }) {// 适用：大数据结构转换const chartConfig = useMemo(() => ({data: transformData(data),options: {// 复杂的配置对象animations: { ... },scales: { ... },plugins: { ... }}}), [data]);return <Chart config={chartConfig} />;
}

3. 引用相等性重要的场景

function ParentComponent() {// 适用：作为 props 传递的对象const memoizedValue = useMemo(() => ({id: 'unique',data: expensiveComputation()}), []);return <ChildComponent config={memoizedValue} />;
}

useCallback 适用场景

1. 传递给子组件的回调函数

function ParentComponent() {const [items, setItems] = useState([]);// 适用：传递给子组件的事件处理函数const handleDelete = useCallback((id: string) => {setItems(prev => prev.filter(item => item.id !== id));}, []); // 依赖为空因为不依赖任何外部变量return <ItemList items={items} onDelete={handleDelete} />;
}

2. 自定义 Hook 中返回的函数

function useSearch(initialQuery: string) {const [query, setQuery] = useState(initialQuery);// 适用：Hook 返回的函数const search = useCallback(async () => {const results = await api.search(query);return results;}, [query]);return { search, query, setQuery };
}

3. 依赖于 props 或状态的事件处理

function UserActions({ userId, onSuccess }) {// 适用：依赖外部变量的回调const handleUpdate = useCallback(async (data) => {await api.updateUser(userId, data);onSuccess();}, [userId, onSuccess]);return <UserForm onSubmit={handleUpdate} />;
}

不需要使用的场景

不需要 useMemo

1. 简单的计算

// ❌ 过度优化
const fullName = useMemo(() => firstName + ' ' + lastName, [firstName, lastName]
);// ✅ 直接计算
const fullName = firstName + ' ' + lastName;

2. 基本类型值

// ❌ 不必要
const count = useMemo(() => items.length, [items]);// ✅ 直接使用
const count = items.length;

不需要 useCallback

1. 组件内部使用的函数

// ❌ 不必要
const handleClick = useCallback(() => {console.log('clicked');
}, []);// ✅ 直接定义
const handleClick = () => {console.log('clicked');
};

2. 不会作为 props 传递的函数

// ❌ 过度优化
const formatDate = useCallback((date) => {return new Date(date).toLocaleDateString();
}, []);// ✅ 直接定义或移到组件外
const formatDate = (date) => {return new Date(date).toLocaleDateString();
};

最佳实践

1. 合理使用依赖数组

function SearchComponent({ onSearch }) {const [query, setQuery] = useState('');const handleSearch = useCallback(() => {onSearch(query);}, [query, onSearch]); // 包含所有依赖项
}

2. 配合 React.memo 使用

const MemoizedChild = React.memo(function Child({ onAction }) {return <button onClick={onAction}>Click me</button>;
});function Parent() {const handleAction = useCallback(() => {// 处理逻辑}, []); // 空依赖数组确保函数引用稳定return <MemoizedChild onAction={handleAction} />;
}

3. 避免过度优化

function App() {// 只在真正需要的地方使用const expensiveValue = useMemo(() => veryExpensiveOperation(), [/* 相关依赖 */]);const criticalCallback = useCallback(() => importantOperation(), [/* 相关依赖 */]);
}

性能考虑

1. 监控性能影响

• 使用 React DevTools Profiler
• 测量实际性能提升
• 只在有明显收益时使用

2. 权衡成本

• 考虑内存使用
• 评估缓存开销
• 注意依赖数组的大小

3. 优化策略

• 优先考虑架构优化
• 合理拆分组件
• 使用适当的数据结构