react类组件生命周期基础总结

组件的生命周期是指组件从被创建到挂载到页面中运行起来,再到组件不用时卸载的过程,只有类组件才有生命周期(类组件 实例化  函数组件 不需要实例化)react类组件生命周期基础总结_第1张图片

 生命周期新版本和旧版本的对比图如下:

react类组件生命周期基础总结_第2张图片

 生命周期(constructor())

类组件继承了react Component这个基类,也就继承这个react的基类,才能有render(),生命周期等方法可以使用,这也说明为什么函数组件不能使用这些方法的原因。

react类组件生命周期基础总结_第3张图片

 constructor():它的入参是props(由父作用域传递过来的自定义属性和children[组件内部嵌套的视图结构]) 第一行代码必须是super(props),调用父类的构造器函数

  • 组件自有的state只能在这里定义(先定义后使用),state就是所谓的声明式变量
  • 在这里不能修改props,在这里也不能用props来做运算(因为constructor在声明周期中只发生一次)。
  • 在这里不要把props和state进行交叉赋值,在React代码逻辑中,永远要保持props和state的独立性。
  • 在这里不要使用this.setState来修改state。刚赋完值就进行render,而在constructor中,render生命周期都还没有生成。
  • 一般情况下,不要在这里写业务逻辑。有时候我们需要改变this指向时候唯一允许这么做,比如DOM、BOM操作等不要在这里做。
  • 一般继承父类、定义状态、改变this指向。

生命周期(挂载阶段)

react类组件生命周期基础总结_第4张图片

钩子 函数

触发时机

作用

constructor

创建组件时,最先执行,初始化的时候只执行一次

1. 初始化state  

2. 创建 Ref 

3. 使用 bind 解决 this 指向问题等

render

每次组件渲染都会触发

渲染UI(注意: 不能在里面调用setState() )

componentDidMount

组件挂载(完成DOM渲染)后执行,初始化的时候执行一次,在浏览器更新视图之前调用

1. 发送网络请求   

2.DOM操作

componentWillMount():react 16.3之前

        在组件挂载到DOM前调用,且只会被调用一次,在这边调用this.setState不会引起组件重新渲染,也可以把写在这边的内容提前到constructor()中,所以项目中很少用。

componentDidMount():react 17之后

  • 相当于Vue中的mounted(),表示挂载阶段已完成,这个声明周期只执行一次。
  • 各种业务逻辑(DOM、ref、掉接口、开定时器等等都可以在这里做)
  • 在这里可以使用多次this.setState(),默认是异步的。
  • 这个声明周期是在更新阶段的,发生在render之后

react类组件生命周期基础总结_第5张图片

 生命周期(更新阶段)

react 16.3之前

  • componentWillReceiveProps(nextProps,nextState)
    • 这个生命周期主要为我们提供对props发生改变的监听,如果你需要在props发生改变后,相应改变组件的一些state,在这个方法中改变state不会二次渲染,而是直接合并state。
  • shouldComponentUpdate(nextProps,nextState)
    • 会返回一个布尔值,判断是否需要更新渲染组件,返回false,不会再向下执行生命周期,是优化react应用的主要手段之一,在这个方法中不能调用setState(),会导致循环调用
  • componentWillUpdate
    • 这个生命周期用来处理Dom发生更新之前的事情,在这个阶段不可以调用setState,会导致循环调用
  • render
  • componentDidUpdate(preProps,preState)
    • 此时已经完成渲染,Dom和state都已经发生变化,参数都是上一个状态的值

react 17之后

  • getDerivedStateFromProps(nextProps,preState)
    • 可以返回一个对象用来更新state。
  • shouldComponentUpdate render getSnapshotBeforeUpdate(preProps,preState)
    • 在这个阶段可以拿到上一个状态Dom元素的坐标、大小等相关信息。用于替代旧的生命周期中的componentWillUpdate
  • componentDidUpdate的第三个参数出现。
    • 在最近一次渲染提交到DOM树之前执行,可以用来获取更新前的DOM信息。
  • componentDidUpdate(preProps,preState,snapshot)
    • 首次渲染不会调用,组件更新后立即调用,在这个生命周期中使用this.setState时必须将其包裹在条件语句中,否则会导致死循环。

更新阶段会在三种情况下触发:

1、父组件更改props:一个组件并不能主动更改它拥有的props属性,它的props属性是由它的父组件传递给它的。强制对props进行重新赋值会导致程序报错。

  • 直接使用,每当父组件重新render导致的重传props,子组件将直接跟着重新渲染,无论props是否有变化。可通过shouldComponentUpdate方法优化。
  • 在componentWillReceiveProps方法中,将props转换成自己的state

react类组件生命周期基础总结_第6张图片

 2、更改state:state的更改是通过setState接口实现的。组件的更新原因很大一部分是因为调用setState接口更新state所致,我们常常以同步的方式调用setState,但实际上setState方法是异步的。

  • 组件本身调用setState,无论state有没有变化。可通过shouldComponentUpdate方法优化。

react类组件生命周期基础总结_第7张图片

 3、调用forceUpdate方法:强制组件进行更新。

 生命周期(卸载阶段)

钩子 函数

触发时机

作用

componentWillUnmount

组件卸载(从页面中消失)

执行清理工作(比如:清理定时器等)

在新版本中,某些生命周期废弃原因: componentWillMount、componentWillReceiveProps、componentWillUpdate这三个生命周期钩子都是在render阶段执行的

(1)在fiber架构被应用之前,render阶段是不能被打断的,页面复杂以后,就有可能阻塞页面的渲染;

(2)于是react推出fiber架构,使原本同步的渲染过程变成异步的,将一个大的更新任务拆解成许多小任务,低优先级任务的render阶段可以被高优先级任务打断;

(3)这就导致在render阶段执行的生命周期函数会被多次调用,如果在这些函数中执行一些带有副作用的操作,比如发送网络请求,就会导致一个同样的网络请求被调用多次,因此需要一个新的生命周期去解决这个问题;

(4)用静态函数getDerivedStateFromProps来取代被废弃的几个生命周期函数,开发者就无法通过this获取到组件实例,也不能发送网络请求或调用this.setState,通过强制开发者在render之前只做无副作用的操作来避免对生命周期的滥用。

你可能感兴趣的:(react.js,前端,javascript)