在渲染新的组件实例之前，React 是否会清理已经渲染的组件实例？答案

【问题标题】：Does React run effect clean up for already rendered component instances before rendering new component instances?在渲染新的组件实例之前，React 是否会清理已经渲染的组件实例？
【发布时间】：2021-10-27 06:51:26
【问题描述】：

const MyComp = someValue => (
    useEffect(() => {
         console.log('[1]run effect for instance with value', someValue);

         return () => console.log('[2]do effect clean up for instance with value', someValue);
    }, []);

    return <div />;
);

const MyList = () => {
    const [ showFirstInstance, setValue ] = useState(false);

    return (<div>
      <div onClick={ () => setValue(true) }>Click me</div>
      { showFirstInstance && <MyComp someValue='1' /> } {/* FIRST INSTANCE */ }
      { !showFirstInstance && <MyComp someValue='2' /> } {/* SECOND INSTANCE */ }
    </div>);
};

render(MyList, document.getElementById('root'));

我确实根据经验测试了一段类似的代码（尽管使用上下文/调度而不是状态），并且在我使用同一组件的 N 个实例测试的有限情况下，以下问题的答案将是“是”，其中只有一个同时处于活动状态。

一般会在一般情况下首先为活动实例 (<MyComp someValue='2' />) 运行效果清理 [2]，然后然后为新激活的实例（<MyComp someValue='1' />）运行初始化效果[1]，无论渲染树中组件的顺序如何？

order of the components in the rendering tree 我的意思是：无论<MyComp someValue='1' /> 和<MyComp someValue='2' /> 在函数中是否交换，或者showFirstInstance 的初始值是true 或false。所以基本上，这些实例的任何渲染顺序。

【问题讨论】：

标签： reactjs effect

【解决方案1】：

是的，React 确实首先运行清理组件的效果。原因很简单，这个过程与代码中的哪个是first无关，它与之前渲染的是哪个组件有关，所以首先需要清理pre state，然后新的state开始渲染。

offical react document中也有说明，

React 究竟何时清理效果？ React 在组件卸载时执行清理。然而，正如我们之前所了解的，效果会为每次渲染运行，而不仅仅是一次。 这就是为什么 React 还会在下次运行效果之前清理上一次渲染中的效果。

【讨论】：

React 团队有任何官方参考/声明/github 问题吗？
我添加了来自 react doc 的引用。