React useMemo 和 useCallback 性能优化总结以及使用场景
基本概念
useMemo
用于缓存计算结果，避免在每次渲染时重复进行昂贵的计算。
useCallback
用于缓存函数引用，避免在每次渲染时创建新的函数引用。
使用时机对比
useMemo 适用场景
- 复杂计算
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>;
}
- 避免重复创建大对象
function ChartComponent({ data }) {// 适用：大数据结构转换const chartConfig = useMemo(() => ({data: transformData(data),options: {// 复杂的配置对象animations: { ... },scales: { ... },plugins: { ... }}}), [data]);return <Chart config={chartConfig} />;
}
- 引用相等性重要的场景
function ParentComponent() {// 适用：作为 props 传递的对象const memoizedValue = useMemo(() => ({id: 'unique',data: expensiveComputation()}), []);return <ChildComponent config={memoizedValue} />;
}
useCallback 适用场景
- 传递给子组件的回调函数
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} />;
}
- 自定义 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 };
}
- 依赖于 props 或状态的事件处理
function UserActions({ userId, onSuccess }) {// 适用：依赖外部变量的回调const handleUpdate = useCallback(async (data) => {await api.updateUser(userId, data);onSuccess();}, [userId, onSuccess]);return <UserForm onSubmit={handleUpdate} />;
}
不需要使用的场景
不需要 useMemo
- 简单的计算
// ❌ 过度优化
const fullName = useMemo(() => firstName + ' ' + lastName, [firstName, lastName]
);// ✅ 直接计算
const fullName = firstName + ' ' + lastName;
- 基本类型值
// ❌ 不必要
const count = useMemo(() => items.length, [items]);// ✅ 直接使用
const count = items.length;
不需要 useCallback
- 组件内部使用的函数
// ❌ 不必要
const handleClick = useCallback(() => {console.log('clicked');
}, []);// ✅ 直接定义
const handleClick = () => {console.log('clicked');
};
- 不会作为 props 传递的函数
// ❌ 过度优化
const formatDate = useCallback((date) => {return new Date(date).toLocaleDateString();
}, []);// ✅ 直接定义或移到组件外
const formatDate = (date) => {return new Date(date).toLocaleDateString();
};
最佳实践
- 合理使用依赖数组
function SearchComponent({ onSearch }) {const [query, setQuery] = useState('');const handleSearch = useCallback(() => {onSearch(query);}, [query, onSearch]); // 包含所有依赖项
}
- 配合 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} />;
}
- 避免过度优化
function App() {// 只在真正需要的地方使用const expensiveValue = useMemo(() => veryExpensiveOperation(), [/* 相关依赖 */]);const criticalCallback = useCallback(() => importantOperation(), [/* 相关依赖 */]);
}
性能考虑
- 监控性能影响
- 使用 React DevTools Profiler
- 测量实际性能提升
- 只在有明显收益时使用
- 权衡成本
- 考虑内存使用
- 评估缓存开销
- 注意依赖数组的大小
- 优化策略
- 优先考虑架构优化
- 合理拆分组件
- 使用适当的数据结构
