React生命周期方法中装载、更新和卸载的顺序是什么



React Lifecycle

有人能解释一下这些操作在react生命周期中的顺序吗?图片显示了垂直和水平发生的事件,但我不明白这些事件的顺序。例如;首先是安装阶段,首先调用构造函数,然后调用render等;。换句话说,一个人怎么能理解这个图表。是不是,对于每个水平阶段,即装载、更新和卸载,我们评估每个垂直操作,即constructor()、render()。。。componentDidMount()?

我相信你的想法是正确的——对于每个垂直阶段,你都会向下评估它。当组件挂载时,它会被创建(通过constructor调用),然后渲染,然后调用componentDidMount。这里的技巧是,在安装期间(在构造之后)和更新期间(在新道具setStateforceUpdate之后)调用相同的render方法。这就是为什么render是一个水平条的原因——它实际上是两个垂直流中调用的相同函数,因此将其表示为每个垂直段中的不相交过程可能会产生误导。这有道理吗?

简单来说,尽管我更像是函数式开发人员/钩子式开发人员,而不是类语法(这只是我自己制定的语法),但我的答案可能不会给你最好的或全部的结果。直截了当地说,下面是反应生命周期的顺序(组件或UI的整个生命周期精子)。

render=>componentWillMount=>componentDidMount=>componentWillUpdate=>componentDidUpdate=>组件Will卸载

  1. render:for类组件是第一个生命周期方法,它在首次创建UI时将UI结构运送到虚拟DOM(注意:当Ui第一次创建时,它会被执行,当其他生命周期被执行时,它们也依赖于这个生命周期,因为没有它,类组件中的Ui就不会显示。这使得这个生命周期成为从第一次渲染到卸载为止唯一存在的方法)。

  2. componentWillMount:嗯,这个生命周期在两年前就被弃用了,但为了长话短说,你可以在这里做一些同步事件,这样同步操作将在组件挂载时执行(我称之为alongSideLifeCycle)。请注意,同步操作是否不必在执行操作之前依赖于要设置的DOM?否则,会有一些性能问题。

  3. componentDidMount:嗯,这个生命周期是在组件成功安装后执行的(但请注意,它的工作方式与HTML脚本标记中的defer属性相同,即它将操作/生命周期加载到组件后台,这使得执行速度极快,如果你不使用一些跟踪开发工具,大多数时候都不会被注意到)。这个生命周期是执行组件侧效果操作(也称为效果)的最佳场所(效果是可以说出应用程序的当前状态、视图或结构的东西,例如:异步操作、DOM节点更新、DOM-API操作,如超时、事件侦听器)。

  4. componentWillUpdate:每当组件想要更新/更改任何内容时(无论是否在视觉上影响UI),都会首先执行此生命周期。

  5. componentDidUpdate:这是进行一些必要清理的最佳场所,以避免内存泄漏,也就是直接或间接的不必要递归或重复发生。例如,最好的做法是:removeEventLister、clearTimeout/clearInterval、任何形式的取消订阅。

  6. 最后一个是componentWillUnMount:基本上,这是一个完美的地方来销毁该组件的状态到initialState,因为从字面上看,组件结构(又名DOM_NODES)在技术上已经被销毁了,所以为什么要保持其自身的存在取决于销毁的组件文件的存在的无值状态呢,这是由react生态系统自动完成的,没有必要以声明的方式进行!

加分:在react中,有一种算法叫做"困难;在componentDidUpdate期间,react UI不会再次(从不)将未更改的结构发送到实际的DOM树,但它执行";困难;该算法试图检查当前的虚拟DOM结构,并根据发生的变化创建一个新的虚拟DOM架构,然后进行我们所称的"反应";再社会化";这是用真实的浏览器DOM来解决虚拟DOM变化的过程,以知道将什么放入真实的DOM中。

这个艰难、和解和虚拟DOM的过程让React成为了老板‍ ‍ ‍UI库,因为它减少了冗余渲染,从而使UI安装过程超级快速✈️ ✈️ ✈️

所以希望你澄清

最新更新