每一个React组件都有自己独特的生命周期,组件也被称为一系列的方法,它们在组件存在的不同阶段被调用。React组件在其生命周期中会经历以下四个不同阶段。
- 初始化
- 安装
- 更新
- 解除挂载
初始化阶段
React文档称其为反模式,在初始化阶段,组件是用给定的道具和状态构建的,这在组件类的构造器中进行。
主要有三块数据是JSX依赖的。
- "错误"。这是标准的信息,当系统中出现错误,或者渲染中出现错误时,会显示出来。
- "加载"。载入是指应用程序在获取API数据的时候。
- "用户"。从API中获取的数据也很关键。
安装阶段
然后在安装阶段,渲染方法本身返回的JJSX。在这个阶段有3个主要方法。
- getDerivedStateFromProps();
- render()。
- componentDidMount()
getDerivedStateFromProps()。 这是一个静态方法,在生命周期中很少被使用。这个方法只在组件的状态依赖于动态变化的时候使用。
**render()。**渲染是在这个状态下将组件安装到浏览器上。它是一个经典的方法,每次提供相同的输入都会有相同的输出。这是一个标准函数,在ReactJS的编码框架中被广泛使用。
componentDidMount()。 这是ReactJS的最后一个钩子方法,在组件和它的子组件在DOM中被渲染后执行。你可以使用这个组件有效地访问DOM。你也可以使用其他几个库进行初始化,这些库可以被纳入最终的输出中。你也可以在这个方法下进行正确的API调用,这样你就可以以正确的方式检索数据了。
更新阶段
更新阶段是更新组件的状态和重新绘制应用程序的阶段。在这个阶段有5个方法被调用
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
**shouldComponentUpdate()。**该方法告诉程序更新时渲染的状态。如果有新的道具或规则被更新,那么就可以进行渲染或跳过渲染。这对正确编码很重要,因为程序中也有不断变化的状态。将该方法更新为true/false是正确的做法。这里的默认值是true,可以根据代码来改变。
**getSnapshotBeforeUpdate()。**当先前的方法返回的答案是true时,这个就会被执行。然后它被用来为即将到来的渲染做准备,在返回响应前需要进行一些先前的计算的情况下。对于更复杂的程序,也可以使用这个方法。
**componentDidUpdate()。**当更新的组件在DOM中也被更新时,这个方法就会被执行。然后你也可以启动新的库来重新加载,这样你就可以在整个过程中保持一个更新的程序。
卸载阶段
在最后的Unmounting阶段。顾名思义,Unmounting是组件生命周期的最后一步,组件从页面上被移除,通过卸载产生结果。在这个阶段只有一个方法被调用,那就是 componentWillUnmount。
**componentWillUnmount()。**这是生命周期中的最后一个方法,因为它涉及到核心卸载和从DOM中移除。组件的清理工作也在这里进行。当用户想从他们的浏览器中清除程序时,这也被用于注销。
参考资料
ReactJS组件的生命周期最初发表于Nerd For Techon Medium,在那里人们通过强调和回应这个故事来继续对话。