react如何防止重复
防止组件重复渲染
使用 React.memo 对函数组件进行记忆化处理，避免在 props 未变化时重新渲染。适用于纯展示型组件。
const MyComponent = React.memo(function MyComponent(props) {
/* 使用 props 渲染 */
});使用 useCallback 缓存函数
当将函数作为 props 传递给子组件时，使用 useCallback 避免因父组件重渲染导致函数引用变化。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);使用 useMemo 缓存计算结果
对于昂贵的计算操作，使用 useMemo 进行缓存，仅在依赖项变化时重新计算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);避免内联对象和函数
在渲染方法中避免直接创建新对象或函数，这会导致子组件不必要的重渲染。
// 避免这样写
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />
// 改为预先定义
const childStyle = { color: 'red' };
const handleClick = useCallback(() => {}, []);
<ChildComponent style={childStyle} onClick={handleClick} />合理使用 shouldComponentUpdate
对于类组件，可以通过实现 shouldComponentUpdate 生命周期方法来控制更新。
shouldComponentUpdate(nextProps, nextState) {
// 只有特定 props 或 state 变化时才更新
return this.props.someProp !== nextProps.someProp;
}使用不可变数据
使用不可变数据更新状态，可以更容易比较前后状态差异。推荐使用 Immer 等库简化不可变更新。
import produce from 'immer';
const [state, setState] = useState({});
setState(produce(draft => {
draft.someField = 'new value';
}));拆分大型组件
将大型组件拆分为多个小组件，React 可以更精确地控制每个部分的更新。状态变化时只有相关子树会重新渲染。
虚拟化长列表
对于长列表渲染，使用 react-window 或 react-virtualized 等库实现虚拟滚动，只渲染可视区域内的元素。
import { FixedSizeList as List } from 'react-window';
<List
height={150}
itemCount={1000}
itemSize={35}
>
{({ index, style }) => (
<div style={style}>Row {index}</div>
)}
</List>
