Javascript 是什么决定了这些组件的顺序''；安装'；函数执行？

在我的代码中，

app

是最高的（功能）组件。它呈现的是

piggybank

（这是一个类组件），它呈现的是

piggychild

（这是一个功能组件）

每个组件“console.logs”自身的名称（在类组件的

render

方法中；对于功能组件，仅在函数中），并具有“mount”函数（对于类组件，这意味着一个

componentDidMount

方法；对于函数组件，这意味着一个

useffect

hook，其回调的第二个参数是空数组），它将

'mount'

记录到控制台

---

如图所示，

PiggyBank

的挂载首先启动，然后是

PiggyChild

，然后是

App

React中是否有规则管理组件“装载”函数的发生顺序

---

或者仅仅知道挂载函数发生在呈现所有组件之后就足够了吗？

useEffect与componentDidMount的时间不同。最接近CDM的钩子实际上是useLayoutEffect

这里有一点来自：

他们在不同的时间跑步 首先，让我们讨论每个.componentDidMount运行的时间 组件挂载后。如文档所述，如果您设置状态 立即（同步）然后React知道如何触发额外的 渲染并使用第二个渲染的响应作为初始UI，以便 用户看不到闪烁。假设您需要读取一个屏幕的宽度 具有componentDidMount的DOM元素，并希望更新状态以反映 宽度。想象一下这一系列事件：

组件第一次渲染

render（）的返回值用于装载新DOM

componentDidMount立即激发并设置状态（不是异步方式 （回拨）

状态更改意味着再次调用render（）并返回新的JSX 它将替换上一个渲染

浏览器仅显示第二个渲染以避免闪烁

当我们需要它的时候，它就是这样工作的，这很好。但是大多数 时间，我们不需要这种预先优化的方法，因为我们正在 异步网络调用，然后将绘制后的状态设置为 屏幕

componentDidMount和useEffect在装载后运行。但是useEffect 在将油漆提交到屏幕后运行，而不是 之前。这意味着如果你需要阅读，你会得到一个闪烁 DOM，然后同步设置状态以创建新UI

当我们需要旧的行为时，如何恢复它

useLayoutEffect的设计时间与 所以useLayoutEffect（fn，[]）是一个更接近的匹配 到componentDidMount（）而不是useEffect（fn，[]）——至少从 时间的观点

这是否意味着我们应该改用useLayoutEffect

可能不会

如果您确实希望通过同步设置状态来避免闪烁， 然后使用useLayoutEffect。但由于这些都是罕见的情况，您需要 大部分时间使用useEffect

在您描述的场景中，我添加了一个既有布局效果又有普通效果的示例：

运行此操作的结果如下。需要注意的主要问题是，布局效果在componentDidMount生命周期挂钩中以合理的顺序发生，而效果发生的时间较晚

应用程序

养猪罐

小猪

小猪布局效应

背负式支架

应用程序布局效果

小猪效应

应用效果

const{useffect，useLayoutEffect}=React；
函数App（）{
console.log（'App'）；
使用LayoutEffect（（）=>console.log（'App LayoutEffect'），[]）；
useffect（（）=>console.log（'appeffect'），[]）；
返回；
}
类PiggyBank扩展React.Component{
componentDidMount（）{
console.log（'PiggyBank Mount'）；
}
render（）{
console.log（“PiggyBank”）；
返回
}
}
函数PiggyChild（）{
console.log（'PiggyChild'）；
使用LayoutEffect（（）=>console.log（'PiggyChild LayoutEffect'），[]）；
useffect（（）=>console.log（'PiggyChild Effect'），[]）；
返回；
}
ReactDOM.render（，document.getElementById（'root'））

---

实际上它是绝对有意义的，层次结构中的使用效果顺序与componentDidMount中的相同。 问题是，当所有子事件都挂载时（因此您将看到第一个子事件，然后只有父事件），componentDidMount将激发，其顺序与您看到的顺序相同

---

有关componentDidMount顺序的更多详细信息，您可以在这里看到-

是的，我对此也很好奇。但可能useEffect返回函数在顺序方面与componentDidMount函数的工作方式不完全相同。因此，可能只使用一种类型的组件测试会更准确。添加太多组件会使事情变得复杂

useLayoutEffect

。如果您的示例只包括

componentDidMount

和

useEffect

的

App

，

PiggyBank

和

PiggyChild

。然后解释了为什么，useLayoutEffect与componentDidMount运行在同一时间。总之，我添加了您要求的内容。您需要吗我可能误读了我得到的结果。当谈到“装载”时，我得到了中间；底部；顶部。你链接的文章只讨论类组件，而我的示例的特点是类和函数组件的混合