react如何不触发子组件更新
使用 React.memo 优化子组件
React.memo 是一个高阶组件，用于对函数组件进行浅比较的优化。当父组件更新时，如果子组件的 props 没有变化，React.memo 会阻止子组件重新渲染。
const ChildComponent = React.memo(function ChildComponent(props) {
return <div>{props.value}</div>;
});利用 useMemo 缓存 props
在父组件中，使用 useMemo 缓存传递给子组件的 props。只有当依赖项变化时，才会重新计算 props，从而避免不必要的子组件更新。
function ParentComponent() {
const memoizedProps = useMemo(() => ({ value: someValue }), [someValue]);
return <ChildComponent {...memoizedProps} />;
}使用 useCallback 缓存事件处理函数
当父组件传递回调函数给子组件时，使用 useCallback 可以确保回调函数的引用不变，除非依赖项发生变化。
function ParentComponent() {
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);
return <ChildComponent onClick={handleClick} />;
}避免直接传递内联对象或函数
内联对象或函数会在每次渲染时创建新的引用，导致子组件认为 props 发生了变化。应该将对象或函数提取到组件外部或使用 useMemo/useCallback 进行缓存。
// 不推荐
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />
// 推荐
const style = { color: 'red' };
const handleClick = () => {};
<ChildComponent style={style} onClick={handleClick} />使用 shouldComponentUpdate 生命周期方法
对于类组件，可以通过实现 shouldComponentUpdate 方法来手动控制组件是否更新。通过比较当前 props 和 nextProps，可以决定是否跳过更新。
class ChildComponent extends React.Component {
shouldComponentUpdate(nextProps) {
return nextProps.value !== this.props.value;
}
render() {
return <div>{this.props.value}</div>;
}
}使用 PureComponent
PureComponent 是 React 提供的一个内置类组件，它自动实现了 shouldComponentUpdate 方法，对 props 和 state 进行浅比较。
class ChildComponent extends React.PureComponent {
render() {
return <div>{this.props.value}</div>;
}
}分离频繁变化的 props
如果子组件只有部分 props 会频繁变化，可以将这些 props 分离到单独的组件中，让其他部分保持稳定。
function ParentComponent() {
return (
<div>
<StableChildComponent stableProp={stableValue} />
<DynamicComponent dynamicProp={dynamicValue} />
</div>
);
}使用 Context API 谨慎
当使用 Context API 时，子组件可能会因为 context 值的变化而更新。可以通过将 context 消费者组件分离，或使用 memo 来优化。
const ContextConsumer = React.memo(function ContextConsumer() {
const value = useContext(MyContext);
return <div>{value}</div>;
});
