当前位置: 代码迷 >> 综合 >> react useEffect的父子组件执行顺序
  详细解决方案

react useEffect的父子组件执行顺序

热度:8   发布时间:2024-02-10 23:12:40.0

Component写法下父子组件的生命周期执行顺序

初次挂载

父constructor
父componentWillMount
父render
子constructor
子componentWillMount
子render
子componentDidMount
父componentDidMount

 

useEffect

可以简单看作是componentDidMount、componentDidUpdate和componentWillUnmount的组合

react保证了每次运行effect的同时,DOM都已经更新完毕

故而在hooks写法的react父子组件中,useEffect的执行顺序是

子effect
父effect

 

 

该疑惑来源:

进行全埋点sdk使用的时候,需要执行一个init,而后执行一个set方法进行一些额外数据的赋值,但在Layout组件的useEffect中进行initConfig,在子组件的useEffect中进行set的时候,发现每个被采集到的数据中均无此数据,经过console调试之后发现set先于init执行故而set方法未成功使用。

临时解决方法:

由于是个ssr工程,若在Layout中useEffect之外使用initConfig无window属性会报错,然后用了个useLayoutEffect,具体啥原理待进一步深究,好像useLayoutEffect会在render之前执行(待确认),按照上面说的初次挂载的时候那么也就是initConfig会在子组件的constructor前执行,即在子组件的useEffect之前执行,而子组件无论在哪个阶段进行set,必然是在init之后了。

  相关解决方案