react如何减少渲染
减少 React 渲染的方法
使用 React.memo 进行组件记忆
React.memo 可以对函数组件进行浅比较，避免不必要的重新渲染。适用于 props 变化较少的组件。
const MyComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});合理使用 useMemo 和 useCallback
useMemo 缓存计算结果，useCallback 缓存函数引用，避免因引用变化导致的子组件重渲染。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);避免在渲染函数中进行复杂计算
将复杂计算移至 useEffect 或 useMemo 中，减少每次渲染时的计算开销。
// 不推荐
function Component({ items }) {
const filteredItems = items.filter(item => item.isActive);
return <List items={filteredItems} />;
}
// 推荐
function Component({ items }) {
const filteredItems = useMemo(() => items.filter(item => item.isActive), [items]);
return <List items={filteredItems} />;
}优化状态更新
合并多个状态更新，减少渲染次数。使用函数式更新确保依赖最新状态。
const [state, setState] = useState({ count: 0, name: 'John' });
// 不推荐
setState({ ...state, count: state.count + 1 });
setState({ ...state, name: 'Doe' });
// 推荐
setState(prev => ({ ...prev, count: prev.count + 1 }));
setState(prev => ({ ...prev, name: 'Doe' }));使用 shouldComponentUpdate（类组件）
在类组件中通过 shouldComponentUpdate 手动控制渲染逻辑。
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.value !== this.props.value;
}
render() {
return <div>{this.props.value}</div>;
}
}避免内联函数和对象
内联函数和对象会导致每次渲染时生成新的引用，触发子组件重渲染。
// 不推荐
<Child onClick={() => handleClick()} />
// 推荐
const handleClick = useCallback(() => { /* 逻辑 */ }, []);
<Child onClick={handleClick} />使用 React.lazy 和 Suspense 进行代码分割
通过懒加载减少初始渲染的组件数量，提升性能。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}使用虚拟化长列表
对于长列表，使用 react-window 或 react-virtualized 仅渲染可见部分。
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>
);避免不必要的 Context 更新
将 Context 拆分为多个独立 Context，减少因单一 Context 变化导致的全局重渲染。
const ThemeContext = React.createContext('light');
const UserContext = React.createContext();
function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value={{ name: 'John' }}>
<Content />
</UserContext.Provider>
</ThemeContext.Provider>
);
}使用生产环境构建
生产环境的 React 构建版本会自动启用性能优化（如压缩、删除警告等）。确保部署时使用生产模式。
