React 生命周期函数详解

最新推荐文章于 2024-05-25 17:32:33 发布
最新推荐文章于 2024-05-25 17:32:33 发布
阅读量1.9k 收藏 5
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45605541/article/details/127022886
版权

文章目录

1. 介绍

生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法。、

注意：函数组件无生命周期，生命周期只有类组件才拥有。

2. 图解

完整的生命周期主要为三个部分，分别为挂载时、更新时和卸载时，如下图所示：

在这里插入图片描述

3. 生命周期函数

3.1 constructor构造函数

描述：

React 组件的构造函数在挂载之前被调用。在实现 React.Component 构造函数时，需要先在添加其它内容前，调用 super(props)，用来将父组件传来的 props 绑定到继承类中。

构造函数它只执行1次，可以进行数据初始化操作，因为它是所有的生命周期中第1个被执行的方法，但是不太建议在此方法中进行网络请求。

父组件的构造方法先执行，子组件的构造方法后执行。

语法：

constructor(props) {
    // 如果你在定义组件中有定义构造函数，则一定要调用super方法来调用父类的构造函数
    super(props)
    // todo …
}

3.2 static getDerivedStateFromProps(nextProps, prevState)方法

描述：

此方法在构造函数方法之后，Render 方法之前被调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

此方法适用于罕见的用例，即当前组件的 state 的值在任何时候都取决于 props 传入。

语法：

state = {
    num: 0
};

render() {
    return <div>当前的num是{this.state.num}</div>;
}
// 从props中获取数据，绑定到当前的这个组件中的state
// nextProps 父组件传递过来的整个props对象，即当前最新的props数据
// prevState 当前组件中的状态对象state，即当前最新的state数据,但暂时不包含返回值中要对state修改的值
static getDerivedStateFromProps(nextProps, prevState) { 
     // 不需要更新当前state
     return null 
}

注意：

  1. 此方法会执行 n 次
  2. 此方法它是一个静态方法，静态方法中不能使用 this
  3. 使用此方法一定要先定义好 state，否则报错
  4. 此方法必须要有返回值，{}|null，如果返回为对象，则会对 state 中数据进行操作，返回的对象属性如果在 state 中没有则添加，有则修改；如果返回为 null，则不会对 state 进行任何操作

getDerivedStateFromProps 在父子组件中执行的先后顺序，及 nextProps, prevState 的使用：

import React, { Component } from 'react'

class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { num: 100 }
    console.log('child --- constructor')
  }

  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('child --- getDerivedStateFromProps')
    // nextState: 当前最新的state数据,暂时不包含你返回值中要对state修改的值
    console.log(nextProps, nextState)
    return { name: '张三' }
  }

  render() {
    return (
      <div>
        <h3>Child组件</h3>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
    // 父组件先执行后子组件执行此方法  app -> child
    console.log('App --- constructor')
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('App --- getDerivedStateFromProps')
    return null
  }

  render() {
    return (
      <div>
        <Child name='李四' />
      </div>
    )
  }
}

export default App

在这里插入图片描述

注意：由于这个方法会执行 n 次，所以不建议在这个方法中发送网络请求，容易造成死循环。如果想要在这个方法中发送网络请求，则一定要确保不要触发这个方法再次执行（即父组件不发送新的 props 或修改 props ，不修改 state ，不强制更新视图）

小案例：

描述：

子组件将 state 中的数据修改为 nextProps 中的值，并且点击增加按钮能够触发后续对值的修改。

实现：

import React, { Component } from 'react'

class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { name: '张三' }
  }

  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('child --- getDerivedStateFromProps')
    // 如果你想用此方法,把props中的属性数据,追加到state中,后续能修改,则这样的操作,你要确保只执行1次
    // 这种方式只能接收到父组件第一次值过来的值（10），点击按钮子组件age并不会增加
    // 这是因为每次点击增加按钮都会触发当前函数，将state中的age修改为nextProps
    // return nextProps // 这种方式不会触发点击按钮增加age值
    if (nextState.flag != 1) {
      return { ...nextProps, flag: 1 }
    }
    return null
  }

  render() {
    let { age } = this.state
    return (
      <div>
        <h3>Child组件 -- {age}</h3>
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++age++
        </button>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
  }

  render() {
    return (
      <div>
        <Child age={10} />
      </div>
    )
  }
}

export default App

在这里插入图片描述

3.3 挂载时和更新时的生命周期函数执行顺序

挂载时生命周期函数介绍：

  1. constructor(props)

    React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其它内容前，调用super(props)，用来将父组件传来的props绑定到继承类中。只调用一次。

  2. static getDerivedStateFromProps(nextProps, prevState)

    此方法是react16.3之后新增，会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

    此方法适用于罕见的用例，即当前组件的 state 的值在任何时候都取决于 props传入。

  3. render()

    render()方法是必需的，它主要负责组件的渲染，会被重复调用若干次

  4. componentDidMount

    它会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

  5. shouldComponentUpdate(nextProps, nextState)

    此函数将放在下文单独讲解。

  6. getSnapshotBeforeUpdate(prevProps, prevState)

    在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息，此生命周期的任何返回值将作为参数传递给 componentDidUpdate()

  7. componentDidUpdate(prevProps, prevState, snapshot)

    会在数据更新后被立即调用。首次渲染不会执行此方法。

import React, { Component } from 'react'

class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { name: '张三' }
    console.log('child --- constructor')
  }

  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('child --- getDerivedStateFromProps')
    if (nextState.flag != 1) {
      return { ...nextProps, flag: 1 }
    }
    return null
  }
  // 它只执行1次
  // 虚拟dom挂载到真实的页面点中完成,在此进行dom操作
  // 在此可以进行网络请求
  componentDidMount() {
    console.log('child -- componentDidMount')
  }

  // ------------- 更新时
  // prevProps 修改之前的props数据
  // prevState 修改之前的state数据
  // 此方法要有一个返回值,且如果有此方法,则必须要有componentDidUpdate
  // 此方法的返回值,会在componentDidUpdate参数3中接受
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('child --- getSnapshotBeforeUpdate')
    return 100
  }

  // 数据更新完毕后执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('child --- componentDidUpdate', snapshot)
  }

  render() {
    console.log('child -- render')
    let { age } = this.state
    return (
      <div>
        <h3>Child组件 -- {age}</h3>
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ Child -- age ++
        </button>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
    console.log('App --- constructor')
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    console.log('App --- getDerivedStateFromProps')
    return null
  }

  componentDidMount() {
    console.log('App -- componentDidMount')
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('App --- getSnapshotBeforeUpdate')
    return 200
  }

  // 数据更新完毕后执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('App --- componentDidUpdate', snapshot)
  }

  render() {
    let { age } = this.state
    console.log('App -- render')
    return (
      <div>
        <h3>App组件 -- {age}</h3>
        <Child age={age} />
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ App -- age ++
        </button>
      </div>
    )
  }
}

export default App

挂载时：

在这里插入图片描述

更新时：

在这里插入图片描述

3.4 componentWillUnmount函数的使用

描述：

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作。

使用：

import React, { Component } from 'react'

class Child extends Component {
  constructor(props) {
    super(props)
    this.state = { name: '张三' }
  }

  // 快捷输入 gdsfp
  static getDerivedStateFromProps(nextProps, nextState) {
    if (nextState.flag != 1) {
      return { ...nextProps, flag: 1 }
    }
    return null
  }

  // 销毁组件时执行
  componentWillUnmount() {
    console.log('child --- componentWillUnmount')
  }

  render() {
    let { age } = this.state
    return (
      <div>
        <h3>Child组件 -- {age}</h3>
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ Child -- age ++
        </button>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { age: 1 }
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('App --- getSnapshotBeforeUpdate')
    return 200
  }

  // 数据更新完毕后执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('App --- componentDidUpdate', snapshot)
  }

  render() {
    let { age } = this.state
    return (
      <div>
        <h3>App组件 -- {age}</h3>
        {/* age大于1时销毁子组件 */}
        {age > 1 ? null : <Child age={age} />}
        <button
          onClick={() => {
            this.setState(state => ({ age: state.age + 1 }))
          }}
        >
          ++ App -- age ++
        </button>
      </div>
    )
  }
}

export default App

在这里插入图片描述

3.5 shouldComponentUpdate优化渲染方案

描述：

React 的更新机制导致，即使子组件未发生更新，只要父组件中的 state 改变，当前父组件及其所有子组件都会重新渲染，这样做虽然很高效，但会造成不少性能损耗，那么该如何避免呢？

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true 则组件继续渲染，为 false 则当前组件不会渲染。首次渲染或使用 forceUpdate() 时不会调用该方法。此方法仅作为性能优化的方式而存在。你也可以考虑使用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()。

PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。 PureComponent 它可以对于组件无效渲染起到一定的优化，但是它只能针对于props中值为基本类型。

所以我们还可以使用生命周期中提供的优化方案，使用 shouldComponentUpdate 减少无效渲染次数。

语法：

shouldComponentUpdate(nextProps, nextState) {
    // 判断是否需要被渲染，如果需要则返回true，否则返回false 
    if (nextProps.b === this.props.b) {
        return false;
    } else {
        return true;
    }
}

// 简化方法：只需要将类组件的继承关系改成继承`PureComponent`即可，这样一来，框架会自动判断值是否有变化进一步决定组件是否需要被渲染。
import React, { PureComponent } from "react";
class Cmp extends PureComponent {
    render() {
        console.log("Cmp被渲染了");
        return <div>父亲传递过来的值b为：{this.props.b}</div>;
    }
}
export default Cmp

使用：

import React, { Component, PureComponent } from 'react'

// PureComponent 它可以对于组件无效渲染起到一定的优化,但是它只能针对于props中值为基本类型
// 可以使用生命周期中提供的优化方案,提升无效渲染次数
// class Child extends PureComponent {
class Child extends Component {
  // 此方法,用于组件重复渲染的优化方法,它不是必须要用的
  // 此方法必须要有一个boolean返回值
  // 此方法只有在更新时才会触发
  // true 则继续向下渲染  render
  // false 表示当前不会继续渲染,从而减少无用渲染,提升性能
  // nextProps 最新的props数据   this.props 之前的props数据
  // nextState 最新的state数据   this.state 之前的state数据
  shouldComponentUpdate(nextProps, nextState) {
    // 针对于要比较的字段进行判断
    if (this.props.num.data === nextProps.num.data) {
      return false
    }
    return true
  }

  render() {
    console.log('child -- render')
    return (
      <div>
        <h3>{this.props.num.data}</h3>
      </div>
    )
  }
}

class App extends Component {
  state = {
    num: { data: 1 },
    name: '张三'
  }
  render() {
    console.log('app -- render')
    return (
      <div>
        <h3>{this.state.num.data}</h3>
        <Child num={this.state.num} />
		{/* 这时子组件会更新 */}
        {/* <button onClick={() => this.setState({ num: { data: Date.now() } })}>++num++</button> */}
        <button onClick={() => this.setState({ num: { data: 1 } })}>++num++</button>
      </div>
    )
  }
}

export default App

在这里插入图片描述

扩展：使用lodash库减小无效渲染

import React, { Component, PureComponent } from 'react'
import _ from 'lodash'

class Child extends Component {
  // 此方法,用于组件重复渲染的优化方法,它不是必须要用的
  // 此方法必须要有一个boolean返回值
  // 此方法只有在更新时才会触发
  // true 则继续向下渲染  render
  // false 表示当前不会继续渲染,从而减少无用渲染,提升性能
  shouldComponentUpdate(nextProps, nextState) {
    // 深层比对,它比对的是对象中属性的值,如果全局的值一样则为true,否则为false
    return !_.isEqual(this.props, nextProps)
  }

  render() {
    console.log('child -- render')
    return (
      <div>
        <h3>{this.props.num.data}</h3>
      </div>
    )
  }
}

class App extends Component {
  state = {
    num: { data: 1 },
    name: '张三'
  }
  render() {
    console.log('app -- render')
    return (
      <div>
        <h3>{this.state.num.data}</h3>
        <Child num={this.state.num} />
        {/* 这时子组件会更新 */}
        {/* <button onClick={() => this.setState({ num: { data: Date.now() } })}>++num++</button> */}
        <button onClick={() => this.setState({ num: { data: 1 } })}>++num++</button>
      </div>
    )
  }
}

export default App

在这里插入图片描述

月光晒了很凉快
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React生命周期详解
小陈的博客
01-11 1万+
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析
React 之组件的生命周期
weixin_50828895的博客
02-24 1165
组件的生命周期一、生命周期概述二、生命周期的三个阶段1、创建阶段2、更新阶段3、卸载阶段 一、生命周期概述 生命周期： 组件从创建到加载运行再到不用卸载的整个过程就是生命周期 （创建 --> 加载运行 --> 卸载） 掌握组件生命周期有助于我们理解组件的运行方式，完成更复杂的功能，分析组件错位u原因以及解决错误 生命周期的每个阶段中都有一些方法调用，这些方法就是生命周期的钩子函数，钩子函数能够实现更多的功能 只有类组件才有生命周期 二、生命周期的三个阶段 1、创建阶段 执行时机：只要页面一经
React组件的生命周期
weixin_43512997的博客
05-11 5231
1. 组件生命周期概述 什么是组件的生命周期？ 组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程，这个过程就叫做组件的生命周期。react在组件的生命周期中提供了一系统的钩子函数，可以让开发者在函数中注入代码，这些代码会在适当的时候运行。为开发人员在不同阶段操作组件提供了时机。 注意：只有类组件才有生命周期。函数组件每次都是重新运行函数，旧的组件即刻被销毁 组件的生命周期主要包括哪几个阶段？ 组件的生命周期可以被分为3个阶段：挂载阶段、更新阶段、卸载阶段 以react旧的生命
React函数式组件的生命周期
最新发布
hawk2014bj的博客
05-25 336
React 函数式组件通过 useEffect 实现了生命周期的功能，设计非常巧妙通过一个副作用函数解决了生命周期的问题。副作用函数的调用时机是由 Fiber 机制来控制，Fiber就是React的核心引擎。
react组件的生命周期
twinkle的博客
02-21 940
Mon 06Mon 13已完成 进行中 计划中 现有任务Adding GANTT diagram functionality to mermaid
react中组件的生命周期函数
大口喝脉动的博客
07-27 1599
react中组件的生命周期函数主要分为三个阶段，分别为： 1.初始化阶段:由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount()=====>常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅...
React中组件的生命周期(详细)
MaNqo的博客
07-27 1335
组件的生命周期 今天学习了组件的生命周期~ 理解 生命周期的回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子 组件从创建到死亡经历的一些特定的阶段 React组件中包含一系列钩子函数(生命周期回调函数)，会在特定的时刻调用 我们在定义组件的时候，会在特定的生命周期回调函数中做特定的工作。 1 .组件的挂载和卸载 首先讲一下出生与死亡——挂载与卸载。 （1）当 Clock 组件第一次被渲染到 DOM 中的时候，就为其设置一个计时器。
React组件生命周期详解
12-03
React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下： 实例化 存在期 销毁期 实例化 首次调用组件时，有以下方法会被调用（注意顺序，从上到下先后执行）： getDefaultProps ...
详解React中setState回调函数
08-27
首先，setState函数的语法是：`setState(updater[, callback])`，其中`updater`是要改变的state对象，`callback`是state导致的页面重新渲染的回调函数，相当于`componentDidUpdate`生命周期函数。这个回调函数可以在...
详解使用React.memo()来优化函数组件的性能
12-07
shouldComponentUpdate(…){…}生命周期函数 本文还会介绍React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法: React.memo。 无用的渲染 组件是构成React视图的一个基本单元。有些组件...
React的生命周期
zdggzdgg的博客
08-25 223
只有类组件才有生命周期，函数组件是没有生命周期的，在任何情况下都会重新渲染函数组件可以使用React.memo优化，跳过渲染过程，复用最后一次的结果按照以下的顺序分析：挂载->更新->卸载。......
React的生命周期函数详解
2401_84009065的博客
03-29 1048
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
生命周期函数、组件
weixin_49555741的博客
02-17 369
vm. $template 是替换掉根节点总结：1. 常用的生命周期函数：2. 关于销毁 vue 实例 组件本质是一个VueComponent 的构造函数，是Vue.extend 生成的 只需要写, vue 解析时会帮我们创建组件的实例化对象，即执行： new VueComponent（options） 每次调用Vue.extend ,返回的是一个全新的vueComponent this 指向： （1）组件配置中：data函数、method函数、watch函数、com
为什么函数式组件没有生命周期？
weixin_30797199的博客
06-02 1383
因为函数式组件没有继承React.Component，由于生命周期函数是React.Component类的方法实现的，所以没继承这个类，自然就没法使用生命周期函数了 转载于:https://www.cnblogs.com/ww01/p/10962002.html...
React学习笔记（五） --- 组件生命周期和组件复用
weixin_45092437的博客
01-26 1482
一、组件生命周期 1、概念 ​ 组件的生命周期是指组件从被创建到挂载到页面中，再到组件卸载的过程。在React中，只有类组件才有生命周期，函数组件是不存在生命周期的。组件生命周期大体分为三个阶段：创建阶段、更新阶段、卸载阶段。在组件生命周期的每一个阶段，React 都给我们提供了一些方法，让我们可以在对应阶段执行某些任务，这些方法就是生命周期的钩子函数。 2、创建阶段 ​ 生命周期的创建阶段常用的钩子函数有三个，执行顺序为：constructor() --> render() --> co
React中的生命周期函数
qq_72760247的博客
11-17 288
React中的生命周期函数
React中的组件的渲染函数(Render Function)是什么？什么是React中的函数组件和类组件？如何在React中进行状态管理？
fengyege的博客
08-10 901
React中的组件可以分为两类：函数组件和类组件。函数组件是一种纯函数，它接受一个props对象作为参数，并返回一个React元素。函数组件没有状态和生命周期方法，因此它们更加轻量级，可以更快速地渲染。类组件是一种继承自React.Component的类，它具有状态和生命周期方法，可以用于更复杂的UI渲染。类组件可以访问this.props和this.state，因此它们可以更方便地访问应用程序的数据和状态。
九、【React基础】组件的生命周期
天行健，君子以自强不息
11-25 612
九、【React基础】组件的生命周期
react生命周期详解
03-04
React生命周期是指组件在被创建、更新和销毁时所经历的一系列过程。React生命周期包括挂载阶段、更新阶段和卸载阶段。在挂载阶段，组件被创建并插入到DOM中，包括constructor、getDerivedStateFromProps、render和componentDidMount等生命周期函数。在更新阶段，组件的props或state发生变化时，会触发更新，包括getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate和componentDidUpdate等生命周期函数。在卸载阶段，组件被从DOM中移除，包括componentWillUnmount生命周期函数。这些生命周期函数可以用来控制组件的行为，实现一些特定的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值