react如何禁止复用

阻止 React 组件复用

在 React 中，组件复用是默认行为，但某些场景下需要强制组件重新渲染而非复用。以下是几种常见方法：

使用 key 属性强制重新挂载

通过动态改变 key 值，React 会视为不同组件实例，触发重新渲染而非复用：

<Component key={uniqueId} />

每次 uniqueId 变化时，组件会完全销毁并重新创建。

条件渲染组件

通过逻辑控制渲染不同的组件分支：

{shouldRemount ? <Component /> : <AnotherComponent />}

切换条件时旧组件会被卸载。

使用 useEffect 依赖项

在函数组件中，通过 useEffect 的依赖项数组控制副作用重新执行：

useEffect(() => {
  // 副作用逻辑
}, [dependency]); // dependency变化时重新执行

类组件中覆盖 shouldComponentUpdate

在类组件中手动控制更新逻辑：

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.forceUpdate || this.state !== nextState;
}

使用 React.memo 自定义比较

通过自定义比较函数控制 props 是否触发更新：

const Memoized = React.memo(Component, (prevProps, nextProps) => {
  return nextProps.preventReuse ? false : shallowEqual(prevProps, nextProps);
});

销毁并重建父组件

通过高阶组件或状态提升强制父组件重建：

const Parent = () => {
  const [version, setVersion] = useState(0);
  return <Child key={version} />;
};

选择方法时应权衡性能影响，非必要不建议破坏 React 的复用机制。