最后
资料过多,篇幅有限
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
组件从创建到被销毁的过程就是组件的生命周期,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)
最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-04H9Pzaa-1715501697798)]
[外链图片转存中…(img-EsDl6ang-1715501697799)]
[外链图片转存中…(img-qgfaOeva-1715501697799)]
[外链图片转存中…(img-uAMdpPFq-1715501697800)]