对react生命周期的理解_react生命周期理解 - CSDN
  • react生命周期理解: 组件对象从创建到死亡它会经历特定的生命周期阶段 React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调 我们在定义组件时, 可以重写特定的生命周期回调函数, 做...

    react生命周期的理解:

    1. 组件对象从创建到死亡它会经历特定的生命周期阶段
    2. React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
    3. 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

    生命周期流程图:

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051117211240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Zlc2ZzZWZncw==,size_16,color_FFFFFF,t_70

    生命周期详述:

    1) 组件的三个生命周期状态:

        Mount:插入真实 DOM
        Update:被重新渲染
        Unmount:被移出真实 DOM
    

    2) React 为每个状态都提供了勾子(hook)函数

        componentWillMount()     组件将要被挂载在dom上
        componentDidMount()		组件已经被挂载在dom上
        componentWillUpdate()    组件将要被更新
        componentDidUpdate()     组件已经被更新
        componentWillUnmount()	 组件将要被卸载
    

    生命周期的流程:

    第一次初始化渲染显示的流程:

     第一次初始化渲染显示: ReactDOM.render() 调用
       constructor(): 创建对象初始化state
       componentWillMount() : 将要插入回调
       render() : 用于插入虚拟DOM回调
       componentDidMount() : 已经插入回调
    

    每次更新state的流程

       每次更新state: this.setSate() 调用
       componentWillUpdate() : 将要更新回调
       render() : 更新(重新渲染)
       componentDidUpdate() : 已经更新回调
          
    

    移除组件的流程:

      移除组件: ReactDOM.unmountComponentAtNode(containerDom)
      componentWillUnmount() : 组件将要被移除回调
    

    重要的勾子:

    1. render(): 初始化渲染或更新渲染调用
    2. componentDidMount(): 开启监听, 发送ajax请求
    3. componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
    4. componentWillReceiveProps(): 监视接收到新的props

    详细可参考官方文档:

    http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

    展开全文
  • 生命周期的重要性,对于学习框架的重要性,就不多说了,下面主要讲一下react生命周期中的这些钩子函数的基本用法。 话不多说,先上图: react组件的构造 import React,{ Component } from 'react';//因为...

    生命周期的重要性,对于学习框架的重要性,就不多说了,下面主要讲一下react的生命周期中的这些钩子函数的基本用法。

    话不多说,先上图:

    react组件的构造

    import React,{ Component } from 'react';//因为编译时要用到React,所以必须要引入
    
        class Demo extends Component {
          constructor(props,context) {
          super(props,context)//有constructor必须要supper,防止this报错
          this.state = {
              //定义组件的状态state
          }
        }
        componentWillMount () {
        }
        componentDidMount () {
        }
        componentWillReceiveProps (nextProps) {
        }
        shouldComponentUpdate (nextProps,nextState) {//必须要有返回值
        }
        componentWillUpdate (nextProps,nextState) {
        }
        componentDidUpdate (prevProps,prevState) {
        }
        render () {
        return (//最好加上()防止编译时遇到;自动插入的bug
            <div></div>
        )
        }
        componentWillUnmount () {
        }
    }
    export default Demo;

    初始化(挂载)阶段

    1.constructor(props,context)

    接受父组件传过来的属性,并且可以初始化自己的state,构造器写了就要supper,防止this指向错误。

    拓展:(在ES6的类中,每一个类都有一个contructor(构造器),当子类去继承父类的时候,父类的constructor需要执行一下,为子类去继承constructor中的一些东西,如果子类自己没有写constructor,默认的会生成一个constructor并且在其中就会执行弗雷的constructor,执行的方法就是super(),因为子类中的super就是父类的constructor

    如果子类自己编写了constructor,那么就需要子类自己去super一次, 否则,子类的this将不被初始化,此时,子类的constructor就可以接收到外界传入的props,但是this上访问不到props,如果在constructor中需要使用到this.props,那么就必须在super中传入props,父类构造器就会为子类的this上挂载props)

    2.componentWillMount() 

    组件将要挂载

    1. 组件刚刚经过了constructor,数据的初始化完成
    2. 组件没有render,dom还没有渲染,不推荐写ajax请求

    拓展:(虽然有些情况下并不会出错,但是如果ajax请求过来的数据是空,那么会影响页面的渲染,可能看到的就是空白。不利于服务端渲染,在同构的情况下,生命周期会到componentwillmount,这样使用ajax就会出错)

    3.render()

    插入jxs构成的dom结构(React会生成虚拟dom,然后利用diff算法进行对比,然后将改变的dom进行渲染吗,提高性能),render 函数并不做实际的渲染动作,它只是返回一个JSX描述的结构,最终由React来操作渲染过程,React会渲染render函数return的东西,如果return false  或者 null,就等于告诉React,不渲染任何东西。

    4.componentDidMount()

    组件已经渲染完成,dom节点生成,组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI,至此,初始化阶段完成

    更新(运行中)阶段

    1.componentWillReceiveProps(nextprops)

    当前组件接受父组件的改变,重新经渲染组件时,接收一个nextprops(对比this.props和nextprops,然后setState当前组件的state,然后进行组件的重新渲染)参数。(nextprops为最新的props)

    2.shouldComponentUpdate(nextprops,nextstate)

    当组件state改变和componentWillReceiveProps(nextprops)后执行,react唯一用于组件重新渲染的生命周期(react中,当父组件的重新渲染会引起子组件的重新渲染,可以在该生命周期中进行判断,如return false  以阻止组件的更新,提高性能)。该生命周期一旦写在代码中,必须返回布尔值,return true或者false,代码才会继续执行,否则会报warning

    3.componentWillUpdate(nextprops,nextstate)

    组件将要重新渲染,不可以改数据(死循环)

    4.render()

    (上文已将讲过)

    5.componentDidUpdate(prevprops,prevstate)

    组件更新完成后进入该生命周期,类似于初始化阶段的componentDidMount(componentDidMount只会在第一次初始化完成后进入),参数中prevprops和prevsstate为组件更新前的props和state。

    销毁(卸载)阶段

    componentWillUnmount()

    解除组件中的事件绑定(如onscroll),和一些定时器函数(如setTimeout和setInterval),和vue的销毁阶段类似。

    小结:学习过react后,你会感受到react的灵活性,可以和vue对比学习,关于vue的生命周期,可参考我的另一篇博客

    https://blog.csdn.net/qq_38045106/article/details/83717141

    展开全文
  • 在最初学习react的过程中,我对react生命周期没有足够的重视,使得我在开发过程中遇到了很多问题。弄懂react的声明周期,可以让你的代码更加高效,更加优美。 什么是生命周期函数? 生命周期函数(钩子函数)...

    前言:
      在最初学习react的过程中,我对react的生命周期没有足够的重视,使得我在开发过程中遇到了很多问题。弄懂react的声明周期,可以让你的代码更加高效,更加优美。

    什么是生命周期函数?

      生命周期函数(钩子函数)通俗的说就是在某一时刻会被自动调用执行的函数。

    react的生命周期可以分成四个部分:

    props,state,render()函数:

     1. render()函数会在props,state改变时触发。

     2.子组件的render()函数会在父组件render()执行的时候被执行(这会导致一些性能问题,我们可以在子组件的componentshouldupdate函数中进行判断,优化性能)

       在render(),创建虚拟dom,进行diff算法,更新dom树。

    注意:不要在render中修改state,会导致死循环。

     1.初始化

      在这里可以初始化props,state

    2.挂载

      ①:componentWillMount():  注意:改生命周期在未来17版本中将被弃用(在这里请求异步数据,render可能不会渲染到,因为componentWillMount执行后,render立马执行)

          组件被挂载到页面之前调用,整个生命周期中只会调用一次(组件更新时不会再调用)。

          注意:在这里可修改state

      ②:componentDidMount():

          组件被挂载到页面之后调用,整个生命周期只调用一次(组件更新不会调用)。

         建议:在这里可以异步请求数据。在这里设置状态会触发重新渲染。但是不推荐在这里使用setState函数,它会触发一次额外的渲染,而且是在浏览器刷新屏幕之前执行,用户看不到这个状态。在这里使用setState函数会导致性能问题。

    3.更新

       new: getDerivedStateFromProps(nextProps,prevState)

    新的静态getDerivedStateFromProps生命周期在组件实例化以及接收新props(只要父组件重新渲染,那么这个props不论值是否一样都是一个新的props)后调用。它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。

    new:getSnapshotBeforeUpdate()

    新的getSnapshotBeforeUpdate生命周期在更新之前被调用(例如,在DOM被更新之前)。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 (这个生命周期不是经常需要的,但可以用于在恢复期间手动保存滚动位置的情况。)

      ①: componentWillReceiveProps(nextprops):  注意:改生命周期在未来17版本中将被弃用

          组件从父组件中接受了新的props(只要父组件重新渲染,那么这个props不论值是否一样都是一个新的props),并且组件已经存在时调用。(组件初始化时候不调用)。

          注意:可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用

      ②: shouldComponentUpdate(nextprops,nextstate):

          组件更新之前调用(组件接受新的props或者state)。函数会返回一个布尔值,true才会更新组件。

          注意:最好判断一下新旧两个props/state是否相同,相同则返回false不要触发更新。这样就不用生成新的dom树和旧的进行diff算法对比,从而优化性能。(因为父组件render()调用会使得子组件render()也被执行,引起性能问题)

     ③:componentWillUpdate(nextprops,nextstate):    注意:改生命周期在未来17版本中将被弃用

          组件更新之前(componentshouldupdate返回true)时调用,组件初始化时不调用

         注意:在这里可以更改state,nextstate.xxx = xxx,但是在这里不能调用setState函数,这会导致函数调用componentshouldupdate从而进入死循环。

    ④:componentDidUpdate():

          组件更新完成之后调用,组件初始化时候不调用。

          注意:可以在这里获取dom

    4.卸载

      ①:componentWillUnmount():

          组件即将被卸载时执行

         注意:在这里清除一些不需要的监听和计时器

    原文

    展开全文
  • React生命周期理解

    2020-02-23 15:00:25
    在最初学习react的过程中,我对react生命周期没有足够的重视,使得我在开发过程中遇到了很多问题。弄懂react的声明周期,可以让你的代码更加高效,更加优美。 什么是生命周期函数? 生命周期函数(钩子函数)通俗...

    前言:

    在最初学习react的过程中,我对react的生命周期没有足够的重视,使得我在开发过程中遇到了很多问题。弄懂react的声明周期,可以让你的代码更加高效,更加优美。

    什么是生命周期函数?

    生命周期函数(钩子函数)通俗的说就是在某一时刻会被自动调用执行的函数。

    生命周期可以分为四个部分
    在这里插入图片描述
    1.初始化

    1)render()函数

    • 子组件的render()函数会在父组件render()执行的时候被执行(这会导致一些性能问题,我们可以在子组件的componentshouldupdate函数中进行判断,优化性能)
    • render()函数会在props,state改变时触发。

    -注意:不要在render中修改state,会导致死循环。

    2.挂载

    1.componentWillMount():

    注意:改生命周期在未来17版本中将被弃用(在这里请求异步数据,render可能不会渲染到,因为componentWillMount执行后,render立马执行)

    组件被挂载到页面之前调用,整个生命周期中只会调用一次(组件更新时不会再调用)。

      注意:在这里可修改state
    
      componentDidMount()

    组件被挂载到页面之后调用,整个生命周期只调用一次(组件更新不会调用)。

    建议:在这里可以异步请求数据。在这里设置状态会触发重新渲染。但是不推荐在这里使用setState函数,它会触发一次额外的渲染,而且是在浏览器刷新屏幕之前执行,用户看不到这个状态。在这里使用setState函数会导致性能问题

    3.更新

    new: getDerivedStateFromProps(nextProps,prevState)

    新的静态getDerivedStateFromProps生命周期在组件实例化以及接收新props(只要父组件重新渲染,那么这个props不论值是否一样都是一个新的props)后调用。它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。

    new:getSnapshotBeforeUpdate()

    新的getSnapshotBeforeUpdate生命周期在更新之前被调用(例如,在DOM被更新之前)。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 (这个生命周期不是经常需要的,但可以用于在恢复期间手动保存滚动位置的情况。

    ①: componentWillReceiveProps(nextprops): 注意:此生命周期在未来17版本中将被弃用

    组件从父组件中接受了新的props(只要父组件重新渲染,那么这个props不论值是否一样都是一个新的props),并且组件已经存在时调用。(组件初始化时候不调用)

    注意:可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用

    ②: shouldComponentUpdate(nextprops,nextstate):

    组件更新之前调用(组件接受新的props或者state)。函数会返回一个布尔值,true才会更新组件。

    注意:最好判断一下新旧两个props/state是否相同,相同则返回false不要触发更新。这样就不用生成新的dom树和旧的进行diff算法对比,从而优化性能。(因为父组件render()调用会使得子组件render()也被执行,引起性能问题)

    在这里插入图片描述
    ③:componentWillUpdate(nextprops,nextstate): 注意:此生命周期在未来17版本中将被弃用

    组件更新之前(componentshouldupdate返回true)时调用,组件初始化时不调用

    注意:在这里可以更改state,nextstate.xxx = xxx,但是在这里不能调用setState函数,这会导致函数调用componentshouldupdate从而进入死循环。

    ④:componentDidUpdate():

    组件更新完成之后调用,组件初始化时候不调用。

    注意:可以在这里获取dom

    4.卸载

    ①:componentWillUnmount():

    组件即将被卸载时执行

    注意:在这里清除一些不需要的监听和计时器

    展开全文
  • react生命周期理解

    2019-07-17 17:26:30
    react组件通过生命周期给予的钩子函数进行管理。 钩子函数: 指的是系统某些状态和参数发生改变的时候,系统立马去通知对应处理的函数,叫做钩子函数。通俗讲:一方面又变动。另一方面立马去处理 。 react...
  • react生命周期理解 渲染的过程 react 生命周期在不同状态下的执行顺序 当首次装载组件时,按顺序执行 getDefaultProps、getInitialState、componentWillMount、render 和 componentDidMount; 当...
  • 如果将React生命周期比喻成一只蚂蚁爬过一根吊绳,那么这只蚂蚁从绳头爬到绳尾,就会依次触动不同的卡片挂钩。在React每一个生命周期中,也有类似卡片挂钩的存在,我们把它称之为‘钩子函数’。那么在React生命...
  • React 生命周期 学习

    2018-08-13 13:58:59
    React特点是组件化开发,每一个组件的定义是一个类(也可以函数式定义无状态组件,但是没有生命周期,不讨论), 在实例化这个类的过程中 (组件挂载) 或存在过程中的某些事件触发 (组件更新) 或销毁这个...
  • 1 React生命周期流程调用流程可以参看上图。分为实例化,存在期和销毁三个不同阶段。介绍生命周期流程的文章很多,相信大部分同学也有所了解,我们就不详细分析了。很多同学肯定有疑问,这些方法在React内部是在哪些...
  • 这篇文章是之前的一片文章react生命周期整理提到的生命周期的解析,本文会从源码的角度,react的各个生命周期的实现原理进行不太详细的分析 getDefaultProps与getInitialState 首先我们来看一下以下两个代码...
  • 近日实习过程中的过程中,我在React生命周期这个地方踩了比较多的坑,主要原因还是自己这部分知识的理解不够深。刚好最近自己花了点时间这个知识点进行了理解巩固,在这里总结一下: 一、 组件初次挂载的生命...
  • react 生命周期可分为四个阶段 挂载(mount)——组件在这个阶段被创建然后被插入到 DOM 中; 更新(update)——React 组件“成长”; 卸载(unmount)——最后阶段; 错误处理(error handle)——有时候代码...
  • 想必刚接触 React 的童靴们一定对生命周期理解的云里雾里的,只看 api 是万万不能够的,在这里本人分享一下关于生命周期的一些理解。 首先先抛出个概念,React 组件的生命周期分为三个阶段:挂载阶段,更新阶段,...
  • React 16.3之前 1、getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性. 2、getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。...
  • 一、组件的详细说明和生命周期ComponentSpecs and Lifecycle) 组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且...
  • React生命周期

    2017-06-19 11:11:02
    脉冲云的前端用的是react技术,下面简单介绍下在开发过程中自己对于react生命周期理解,以及一些运用。 constructor(props) 构造函数,在创建组件的时候调用一次,可以在这里初始化state或者其他值  ...
  • 关于 React 生命周期方法的详解:备注:以下代码只是解释, 不能运行, 参考 组件的生命周期 ,和阮一峰老师的 demo 。然后个人总结的. /** * 组件的声明周期 方法,详解,依次调用顺序如下: * @type {*|...
  • React生命周期讲解

    2019-05-11 00:12:35
    React生命周期图解 先上图 其实总结就是 进入当前页面,,然后渲染页面,加载数据,渲染demo,数据更新,组件卸载 constructor /* * constructor 其实是Es6 里面带的一个属性,代表初始化,但是组件未挂载 ...
  • React生命周期图解 先上图(引用官网图片) 其实总结就是 进入当前页面,,然后渲染页面,加载数据,渲染demo,数据更新,组件卸载 constructor /* * constructor 其实是Es6 里面带的一个属性,代表初始化,...
  • 先总体看下React16的生命周期React16废弃的三个生命周期函数 componentWillMount componentWillReceiveProps componentWillUpdate 注:目前在16版本中componentWillMount,componentWillReceiveProps,...
1 2 3 4 5 ... 20
收藏数 9,561
精华内容 3,824
关键字:

对react生命周期的理解