React条件渲染组件useState状态重渲染时重置问题求助

我之前也踩过这个坑，你的问题核心其实是组件定义位置不当导致的。

问题根源 #

你在Main组件的渲染逻辑里（和switch分支相关的代码中）嵌套定义了comp1、comp2、comp3这些子组件。每次Main组件因为状态变化重渲染时，这些嵌套的组件函数都会被重新创建——对React来说，这相当于每次都是一个全新的组件类型。

React判断组件是否需要保留内部状态，是依据组件的引用（或函数/类标识）是否一致来判定的。当组件类型“变了”，React会直接卸载旧的组件实例，重新挂载新的实例，这就导致子组件里的useState状态被彻底重置了。而你直接把组件放到return里时，组件的定义是稳定的（不会每次渲染都重新创建），所以状态就能正常保留。

修复方案 #

最简单的解决办法就是把这些子组件的定义移到Main组件的外部，确保组件的引用始终稳定：

// 把子组件移到Main外部，避免每次渲染重新创建
const Comp1 = () => {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>comp1 count: {count}</button>;
};

const Comp2 = () => {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>comp2 count: {count}</button>;
};

const Comp3 = () => {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>comp3 count: {count}</button>;
};

function Main() {
  const [value, setValue] = React.useState(0);

  switch (value) {
    case 0:
      return <Comp1 />;
    case 1:
      return <Comp2 />;
    case 2:
      return <Comp3 />;
    default:
      return <Comp1 />;
  }
}

如果子组件需要依赖Main组件的状态或props，直接通过props传递即可，不要把组件定义嵌套在父组件内部。这样既保证了组件引用的稳定性，也符合React的组件设计规范。

内容的提问来源于stack exchange，提问作者Ills