react如何进行性能优化
使用 React.memo 和 useMemo 进行组件优化
React.memo 是一个高阶组件，用于对函数组件进行浅比较，避免不必要的重新渲染。useMemo 用于缓存计算结果，避免重复计算。
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);合理使用 useCallback 避免函数重建
useCallback 可以缓存函数引用，防止每次渲染都创建新的函数实例，特别适用于将函数作为 props 传递给子组件的情况。
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);虚拟化长列表渲染
对于大型列表数据，使用 react-window 或 react-virtualized 等库实现虚拟滚动，只渲染可视区域内的元素。
import { FixedSizeList as List } from 'react-window';
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{({ index, style }) => (
<div style={style}>Row {index}</div>
)}
</List>代码分割和懒加载
利用 React.lazy 和 Suspense 实现组件级代码分割，减少初始加载体积。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}优化状态管理
避免将不必要的数据放入全局状态，合理划分组件状态和全局状态。使用 Redux 时考虑 reselect 创建记忆化的 selector。
const selectTodos = state => state.todos;
const selectActiveFilter = state => state.visibilityFilter;
const selectVisibleTodos = createSelector(
[selectTodos, selectActiveFilter],
(todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed);
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed);
default:
throw new Error(`Unknown filter: ${filter}`);
}
}
)使用生产环境构建
确保生产环境使用优化过的 React 构建版本，禁用开发工具和警告，通常通过设置 NODE_ENV=production 实现。
性能分析工具
使用 React Profiler 组件或 Chrome DevTools 的 Performance 面板识别性能瓶颈，重点关注不必要的重新渲染和耗时操作。
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>避免内联函数和对象
在渲染方法中避免创建新的函数或对象，这会导致子组件不必要的重新渲染。
// 避免这样写
<MyComponent onClick={() => doSomething()} style={{ color: 'red' }} />
// 改为这样
const handleClick = useCallback(() => doSomething(), []);
const style = useMemo(() => ({ color: 'red' }), []);
<MyComponent onClick={handleClick} style={style} />优化 Context 使用
当 Context 值变化时，所有消费该 Context 的组件都会重新渲染。可以通过拆分 Context 或将不变的与可变的值分离来优化。
const ThemeContext = React.createContext('light');
const UserContext = React.createContext();
// 提供多个 context
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={user}>
<Content />
</UserContext.Provider>
</ThemeContext.Provider>使用不可变数据
在处理状态更新时使用不可变数据，可以更容易检测变化，避免深比较，并防止意外副作用。
// 使用扩展运算符
setState(prevState => ({
...prevState,
items: [...prevState.items, newItem]
}));
// 或使用不可变库如 Immer
import produce from 'immer';
const nextState = produce(currentState, draftState => {
draftState.pages.push(newPage);
});
