react如何优化性能
使用 React.memo 和 useMemo
React.memo 用于优化函数组件的渲染性能，避免不必要的重新渲染。它会对组件的 props 进行浅比较，仅在 props 变化时重新渲染。useMemo 用于缓存计算结果，避免在每次渲染时重复计算。
const MemoizedComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});
const expensiveCalculation = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);使用 useCallback 缓存函数
useCallback 用于缓存函数引用，避免在每次渲染时创建新的函数实例。这对于传递给子组件的回调函数特别有用，可以防止不必要的子组件重新渲染。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);虚拟化长列表
对于渲染长列表的场景，使用虚拟化技术（如 react-window 或 react-virtualized）可以显著提高性能。这些库只会渲染可见区域内的列表项，减少 DOM 节点数量。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const Example = () => (
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);避免内联函数和对象
在渲染方法中避免创建内联函数和对象，因为它们会在每次渲染时重新创建，导致子组件不必要的重新渲染。将这些值移到组件外部或使用 useMemo/useCallback 进行缓存。
// 避免这样写
<div onClick={() => handleClick(id)} />
// 改为这样写
const handleClick = useCallback((id) => {
// 处理点击
}, []);
<div onClick={handleClick} />使用生产版本构建
确保在生产环境中使用 React 的生产版本，它经过了优化并移除了开发模式的警告和检查。使用 Webpack、Rollup 或其他打包工具时，启用生产模式。
# 使用 Create React App 时
npm run build代码分割和懒加载
利用 React.lazy 和 Suspense 实现代码分割，按需加载组件。这可以减少初始加载时间，提高页面响应速度。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}优化 Context 使用
避免在 Context 中放置频繁变化的值，这会导致所有消费该 Context 的组件重新渲染。可以将不常变化的值和频繁变化的值分离到不同的 Context 中。
const ThemeContext = React.createContext('light');
const UserContext = React.createContext({ name: 'Guest' });
function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value={{ name: 'John' }}>
<Content />
</UserContext.Provider>
</ThemeContext.Provider>
);
}使用性能分析工具
利用 React DevTools 和 Chrome 的性能分析工具识别性能瓶颈。React Profiler 可以测量组件渲染时间，帮助定位需要优化的部分。
import { unstable_trace as trace } from 'scheduler/tracing';
function handleClick() {
trace('click event', performance.now(), () => {
setState(prevState => ({
...prevState,
count: prevState.count + 1
}));
});
}避免不必要的状态更新
确保 setState 只在实际状态变化时调用。对于复杂状态对象，使用浅比较或深比较来避免不必要的更新。
// 避免不必要的更新
setState({ ...state, count: state.count });
// 只在值变化时更新
if (newValue !== state.value) {
setState({ ...state, value: newValue });
}优化 Redux 使用
如果使用 Redux，确保选择器是记忆化的（使用 reselect 库），避免不必要的重新计算。只订阅组件实际需要的 store 部分。
import { createSelector } from 'reselect';
const selectTodos = state => state.todos;
const selectVisibleTodos = createSelector(
[selectTodos, selectFilter],
(todos, filter) => {
return todos.filter(todo => todo.includes(filter));
}
);
