组件从创建到被销毁的过程就是组件的生命周期,React
为组件在不同的生命周期阶段提供不同的生命周期方法。生命周期大致可以分为三个阶段:挂载阶段、更新阶段、卸载阶段。
挂载阶段
在这个阶段组件被创建,执行初始化,并挂载到 DOM
中,完成组件的第一次渲染,依次调用的生命周期方法如下:
-
constroctor
-
static getDerivedStateFromProps
-
render
-
componentDidMount
constroctor(props)
这个是 ES6
中一个类的构造方法,组件被创建时,首先会调用组件的构造方法。这个构造方法接收一个 props
参数,它是从父组件中传入的属性对象,如果父组件中没有传入属性而组件自身定义了默认属性,那么这个 props
指向的就是组件的默认属性。在构造方法中,必须显式的调用 super(props)
才能保证被传入组件中。
除此以外,还通常在这个方法中初始化组件的 state
。
constructor(props) {
//在其他代码之前调用super(props)
super(props);
// 初始化状态
this.state = { counter: 0 };
}
需要注意的是,该方法只适用于状态的初始化,而不是改变状态!!所以,不能在构造方法中调用 this.setState()
。
static getDerivedStateFromProps(props,state)
getDerivedStateFromProps
会在调用 render
方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state
,如果返回 null
则不更新任何内容。
该方法的适用场景是 state
的值在任何时候都取决于 props
,然而这些 state
也被称为派生 state
。
派生状态会使代码冗余,并难以维护,通常情况下更应该使用替代方案来替代派生状态(具体示例参考后面的文章)。
render
该方法是所有生命周期方法中必须实现的方法。该方法的作用就如它的名字一样 —— 渲染。
当该方法被调用时,它会检查 this.props
和 this.state
的变化并返回以下类型之一:
-
React
元素,通常由JSX
创建。 -
数组或者
fragments
,使得可以返回多个元素。 -
Portals
,可以渲染子节点到不同的子DOM
树中。 -
字符串或数值,被渲染为文本节点。
-
布尔类型或
null
,什么都不渲染。
需要注意的是,不能在该方法中改变状态,因为改变状态会引起 render
方法的调用,然而这就会造成一个死循环了。
通常只是返回一个 React
元素,对于其他的方式在后面的文章再详细介绍。
componentDidMount
该方法会在组件被挂载到 DOM
后调用,且只会被调用一次。依赖于 DOM
节点的初始化行为都应该放在该方法中,比如网络请求。
在这个方法中调用 setState
改变状态会引起额外渲染,这个渲染会发生在浏览器更新屏幕之前,也就是说,render
被执行了两次,但是用户也不会看到中间的状态!!!
更新阶段
当组件的 props
或 state
发生变化时,组件就会更新。组件更新的生命周期方法调用顺序如下:
-
static getDerivedStateFromProps
-
shouldComponentUpdate
-
render
-
getSnapshotBeforeUpdate
-
componentDidUpdate
shouldComponentUpdate(nextProps, nextState)
该方法用于决定是否让组件更新。该方法在 render
之前调用(首次渲染和 forceUpdate
不会调用该方法),默认情况下它返回布尔值 true
表示允许组件更新。该方法主要用于性能优化,而不要通过该方法来拒绝更新。
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate
在最近一次渲染输出(提交到 DOM
节点)之前调用。它使得组件能在发生更改之前从 DOM
中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate
。
componentDidUpdate(prevProps, prevState, snapshot)
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
资料过多,篇幅有限,需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版!
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
CEF-1713552349854)]
[外链图片转存中…(img-nRz2El8T-1713552349854)]
资料过多,篇幅有限,需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版!
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。