Question

请参阅代码箱。 https://codesandbox.io/s/component-issue-snj24?file=/src/App.js:0-1254

每当Main重新渲染时，通过开关将重置其状态const [value, setValue] = React.useState(0)的有条件呈现的当前组件。

如果我采用了任何组件（comp1，comp2，comp3）并将其插入主返回（替换）中，则不会发生。

-更新正如Dennis所注意到的，由于函数是嵌套的。另类 https://codesandbox.io/s/component-issue-forked-uejy1

Answer 1

该组件不会“重新渲染” 它已卸载，因为您在函数主体中声明了RenderActivePage，因此在每个分配的渲染上都重新声明了该元素，这意味着它在每个渲染上都重新安装了

export default function App() {
  // remounts on every render
  const RenderActivePage = () => {
    switch (activePage) {
      case 0:
        return <Comp1 />;
      case 1:
        return <Comp2 />;
      default:
        return <div></div>;
    }
  };

  return (
    <div className="App">
      <RenderActivePage />
    </div>
  );
}

使用开关时，反应状态（挂钩）在重新渲染时重置

1 个答案: