[Excel中的ref]excel实战实战：ref组件的简化

今天在工作站上写了普通的业务代码，把它简化后大致如下。

代码结构非常简单，一个父组件包含两个子组件。 的组件2包装并向外暴露方法，以便在父组件中调用内部方法。 组件1是通过props传递两个父组件的方法：用于间接访问组件2，以及可能导致父组件重新呈现。 当然，这种结构安排显然不合理，但由于项目的历史负担，我们不会考虑这个问题。

当我高兴地检查Click组件时，看到了一个红色的Error :

在几个重要位置添加打印：

结果

如果您拥有此前提知识，请添加断点。 只有此内部机制尚不清楚，因为其他常见的hook和class组件的生命周期熟悉在React更新渲染中执行的时间。 现在，我们来看一下进入断点时代码的执行堆栈。

方法主体首先确定从父组件传递的ref的类型。 对于函数，执行回调函数后的对象将传递并执行。 否则，将对象分配给。 但是，在这两种情况下，它都会返回清理副作用的函数。 这个清理函数的任务是——让我给的东西为空！

既然我们抓住了这个最重要的线索，我们马上在这个清理函数上打一个断点，然后再次尝试触发更新。

到目前为止，导致错误的整个链接都已明确。

触发更新后，在commit阶段首先执行的清理函数将置于后续阶段。

然后，这个部分将被执行，并进行这些方法的回调。

根据React使用深度优先遍历方法生成光纤树并在生成的同时收集副作用的规则，在子组件1中的回调将在的回调之前执行，但此时仍然如此。