React Class组件生命周期及执行顺序

一、react组件的两种定义方式

1、函数组件,简单的函数组件像下面这样,接收Props,渲染DOM,而不关注其他逻辑

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

函数组件无法使用State,也无法使用组件的生命周期方法,没有this,纯展示型组件。

建议:在写组件时,先思考组件应不应该写成展示型组件,能写成展示型组件的尽量写成展示型。

2、class组件,需要继承React.Component,有State,有生命周期,有this

3、共同点

a、无论是使用函数或是类来声明一个组件,它决不能修改它自己的 props

b、所有 React 组件都必须是纯函数,并禁止修改其自身 props

c、React是单项数据流,父组件改变了属性,那么子组件视图会更新

d、属性 props 是外界传递过来的,状态 state 是组件本身的,状态可以在组件中任意修改

e、组件的属性和状态改变都会更新视图

4、组件定义的注意事项

a、组件名称必须是大写字母开头

b、组件的返回值只能有一个根元素

二、class组件不同阶段生命周期函数执行顺序

1、class组件执行顺序如下图

新增:getDerivedStateFromProps,getSnapshotBeforeUpdate

UNSAFE:UNSAFE_componentWillMount,UNSAFE_componentWillUpdate,UNSAFE_componentWillReceiveProps这三个方法17以后的版本会去掉

挂载(Mounting)指组件被实例化并插入到dom中,顺序如下:

constructor -> getDerivedStateFromProps -> render -> componentDidMount

更新(Updating)指当state变化或者props变化会引起更新,顺序如下:

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

卸载指的是组件被从dom移除,只会执行一个生命周期:componentWillUnmount

2、constructor(),在 React 组件挂载时,会首先调用它的构造函数。

作用:通常,在 React 中,在构造函数中只做两件事:

a、通过给 this.state 赋值对象来初始化内部 state。

b、为事件处理函数绑定实例

注意:

a、在为 React.Component 子类实现构造函数时,应在其他语句之前前调用 super(props)。

否则 this.props 在构造函数中可能会出现未定义的

b、不要在里边调用setState

3、componentWillMount(),在 React 组件挂载时render之前。

作用:可以调用setState方法,修改state。同步方法会阻塞,不会引起二次渲染,异步方法不会阻塞,会

引起二次渲染。

注意:该方法已被标记为不安全,尽量不使用。

4、getDerivedStateFromProps((props, state), 静态方法,为了让 props 能更新到组件内部state 中,挂

载和更新时都会调用。

作用:

a、无条件的根据 prop 来更新内部 state,也就是只要有传入 prop 值, 就更新 state

b、只有 prop 值和 state 值不同时才更新 state 值

注意:

a、不能在方法内使用this

b、如果props传入的内容不需要影响到你的state,那么就需要返回一个null,这个返回值是必

须的,所以尽量将其写到函数的末尾

异步处理:

以前,我们可以在props发生改变的时候,在componentWillReceiveProps中进行异步操作,将

props的改变驱动到state的改变。

react setState操作是会通过transaction进行合并的,由此导致的更新过程是batch的,而react

中大部分的更新过程的触发源都是setState,所以render触发的频率并不会非常频繁

现在,为了响应props的变化,我们应该再componentDidUpdate中进行异步操作,响应变化

5、shouldComponentUpdate(nextProps, nextState),更新时也就是state或props发生变化时,会在

render执行之前被调用

作用:

a、性能优化的生命周期方法,修改后的props和state在该方法都可以拿到,与原props和state对

比判断是否需要渲染

注意:

a、此方法的返回值必须是true或者false,返回false将不执行render

6、render(), class 组件中唯一必须实现的方法,纯函数

作用:

a、组件和dom节点都写在这里,返回一个jsx,经过编辑之后是React.createElement的表达式

注意:

a、组件名称首字母要大写

b、只能有一个根节点

c、可以使用<></>作为根节点,这个节点不会渲染,React.Fragment的简写

7、getSnapshotBeforeUpdate(prevProps, prevState),在最近一次渲染输出(提交到 DOM 节点)

之前调用,未伸入测试,了解仅限与此

作用:

a、它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何

返回值将作为参数传递给 componentDidUpdate()

8、componentDidMount(), 会在组件挂载后(插入 DOM 树中)立即调用

作用:

a、setState

b、操作dom

c、发送请求获取初始数据

9、 componentDidUpdate(prevProps, prevState) ,会在更新(dom已经更新)后会被立即调用

作用:

a、setState

b、操作dom

c、发送请求获取数据

注意:

a、setState必须被包裹在一个条件语句里,否则会导致死循环

10、componentWillUnmount(),会在组件卸载及销毁之前直接调用

作用:在这里可以释放资源, 比如清除定时器, removeEventListener

注意:这里边setState是无效的, 不应该调用

11、getDerivedStateFromError 还未详细了解

12、componentDidCatch 还未详细了解

三、参考

官方生命周期API https://react.docschina.org/docs/react-component.html

到此这篇关于React Class组件生命周期的文章就介绍到这了,更多相关React Class组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 实例讲解React 组件生命周期

    在本章节中我们将讨论 React 组件的生命周期. 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMount 在渲染前调用,在客户端也在服务端. componentDidMount : 在第一次渲染后调用,只在客户端.之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问. 如果你想和其他JavaScript框架一起使

  • 浅谈React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

  • 老生常谈js-react组件生命周期

    组件的生命周期可分成三个状态: •Mounting:已插入真实 DOM •Updating:正在被重新渲染 •Unmounting:已移出真实 DOM 生命周期的方法有: •componentWillMount 在渲染前调用,在客户端也在服务端. •componentDidMount : 在第一次渲染后调用,只在客户端.之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问. 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeou

  • React组件生命周期详解

    调用流程可以参看上图. React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下: 实例化 存在期 销毁期 实例化 首次调用组件时,有以下方法会被调用(注意顺序,从上到下先后执行): getDefaultProps 这个方法是用来设置组件默认的props,组件生命周期只会调用一次.但是只适合react.createClass直接创建的组件,使用ES6/ES7创建的这个方法不可使用,ES6/ES7可以使用下面方式: //es7 class Component { stat

  • React Class组件生命周期及执行顺序

    一.react组件的两种定义方式 1.函数组件,简单的函数组件像下面这样,接收Props,渲染DOM,而不关注其他逻辑 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 函数组件无法使用State,也无法使用组件的生命周期方法,没有this,纯展示型组件. 建议:在写组件时,先思考组件应不应该写成展示型组件,能写成展示型组件的尽量写成展示型. 2.class组件,需要继承React.Component,

  • 浅谈Unity脚本生命周期与执行顺序

    一.脚本生命周期 Unity脚本中的常见必然事件如下表所示 名称 触发时机 用途 Awake 脚本实例被创建时调用 用于游戏对象的初始化,注意Awake的执行早于所有脚本的Start函数 OnEnable 当对象变为可用或激活状态时被调用 用途 Start Update函数第一次运行之前调用 用于游戏对象的初始化 Update 每帧调用一次 用于更新游戏场景和状态 FixedUpdate 每个固定物理时间间隔调用一次 用于物理状态的更新 LateUpdate 每帧调用一次(在update之后调用

  • 微信小程序组件生命周期的踩坑记录

    组件生命周期,通常是我们业务逻辑开始的地方. 如果业务场景比较复杂,组件生命周期有不符合预期的表现时, 可能会导致一些诡异的业务bug,它们极难复现和修复. 组件 attached 生命周期执行次数 按照通常的理解,除moved/show/hide等生命周期可能多次执行外, 严格意义上与组件加载相关的生命周期,如:created.attached.ready等,每个组件实例应该只执行一次.但是事实真的如此吗? 背景 这个问题的发现,源于我们在小程序的报错日志中, 收到大量类似Cannot red

  • 深入理解Vue父子组件生命周期执行顺序及钩子函数

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例

  • React中的生命周期和子组件

    目录 组件生命周期 创建创建期 获取虚拟DOM 子组件 组件生命周期 为了说明组件的创建,存在,销毁的过程,react提供了组件的生命周期,共分三大周期: 创建期:说明组件的创建的过程,相当于人的少年 存在期:说明组件的存在的过程,相当于人的中年 销毁期:说明组件的销毁的过程,相当于人的老年 创建创建期 创建期共分五个阶段: ES5开发中,对应五个方法:getDefaultProps,getInitialsate, ​​componentWillMount​​, ​​render​​, ​​co

  • React State与生命周期详细介绍

    目录 一.State 1.1 类组件中的State 1.2 函数组件中的State 二.React生命周期 2.1 挂载 2.2 更新 2.3 卸载 2.4 函数式组件useEffect 三.总结 一.State 在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.这和vue中组件的data中的数据是相似的. 1.1 类组件中的State <!DOCTYPE html> <html lang="en"&

  • 详解Angular组件生命周期(一)

    概述 组件声明周期以及angular的变化发现机制 红色方法只执行一次. 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法. 总共9个方法. 每个钩子都是@angular/core库里定义的接口. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-life', templateUrl: './life.component.html', styleUrls: ['./life

  • 使用useEffect模拟组件生命周期

    目录 useEffect模拟组件生命周期 让函数组件模拟生命周期 初始化 更新阶段 卸载阶段 useEffect实现componentWillUnmount生命周期函数 阐述 useEffect 解绑副作用 useEffect的第二个参数 useEffect模拟组件生命周期 让函数组件模拟生命周期 默认函数组件没有生命周期 函数组件是一个纯函数,执行完即销毁,自己无法实现生命周期 通过Effect hook把生命周期“钩”到纯函数中     // 模拟 class 组件的 DidMount 和

随机推荐