2024年前端最新React 基础篇（五）—— State与生命周期，前端性能优化和内存优化面试

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

组件从创建到被销毁的过程就是组件的生命周期，React 为组件在不同的生命周期阶段提供不同的生命周期方法。生命周期大致可以分为三个阶段：挂载阶段、更新阶段、卸载阶段。

挂载阶段

在这个阶段组件被创建，执行初始化，并挂载到 DOM 中，完成组件的第一次渲染，依次调用的生命周期方法如下：

1. constroctor

2. static getDerivedStateFromProps

3. render

4. 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 发生变化时，组件就会更新。组件更新的生命周期方法调用顺序如下：

1. static getDerivedStateFromProps

2. shouldComponentUpdate

3. render

4. getSnapshotBeforeUpdate

5. componentDidUpdate

shouldComponentUpdate(nextProps, nextState)

该方法用于决定是否让组件更新。该方法在 render 之前调用（首次渲染和 forceUpdate 不会调用该方法），默认情况下它返回布尔值 true 表示允许组件更新。该方法主要用于性能优化，而不要通过该方法来拒绝更新。

getSnapshotBeforeUpdate(prevProps, prevState)

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

`

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-LavqcmqH-1715585093742)]