React Hook 组件切换时unmount函数要比新组件晚执行

当页面上的A组件被替换为B组件时，是A组件的unmount先执行呢？还是B组件先执行呢？

我之前一直认为是A组件的unmount先执行，才会执行B组件，因为这样更符合直觉。

然而今天试了下，出乎我的意料~！

const Com1 = React.memo(() => {
  console.log(1);
  useEffect(() => {
    return () => {
      console.log(1, "unmount");
    };
  }, []);
  return <div>1212</div>;
});

const Com2 = React.memo(() => {
  console.log(2);
  useEffect(() => {
    return () => {
      console.log(2, "unmount");
    };
  }, []);
  return <div>2222</div>;
});

export default function App() {
  const [isSwitch, setIsSwitch] = useState(false);

  return (
    <div className="App">
      <button
        onClick={() => {
          setIsSwitch(true);
        }}
      >
        切换组件
      </button>
      {isSwitch ? <Com1 /> : <Com2 />}
    </div>
  );
}

点击“切换组件”后，会先打印1,然后才打印2 unmount。

想了下原因，个人认为应该是react需要先执行新组件，才能和老组件进行对比，判断出是更新老组件还是卸载老组件等等操作。

如果你用了状态管理库（例如：redux），那么这个问题就需要注意下。如果有两个页面用了同一个redux上的数据，你原计划想在页面unmount时清理掉redux上的老数据，然后在新页面渲染新数据。那么你实际得到的结果是，新页面会先用老数据执行一次，老数据才会被清理。