• react 组件的生命周期 超简版


      组件从被创建到被销毁的过程称为组件的 生命周期;

      通常,组件的生命周期可以被分为三个阶段:挂载阶段、更新阶段、卸载阶段;

      一、挂载阶段

      这个阶段组件被创建,执行初始化,并被挂载到DOM中,完成组件的第一次渲染。

      依次调用的生命周期方法有:

      •   constructor
      •   componentWillMount
      •   render
      •   componentDidMount

      1、constructor    

      这是ES 6 class的构造方法,组件被创建时,会首先调用组件的构造方法。这个构造方法接收一个props参数,props是从父组件中传入的属性对象,如果父组件中没有传入属性而组件自身定义了默认属性,那么这个props指向的就是组件的默认属性。你必须在这个方法中首先调用super(props)才能保证props被传入组件中。constructor通常用于初始化组件的state以及绑定事件处理方法等工作。

      2、componentWillMount

      这个方法在组件被挂载到DOM前调用,且只会被调用一次。这个方法在实际项目中很少会用到,因为可以在该方法中执行的工作都可以提前到constructor中。在这个方法中调用this.setState不会引起组件的重新渲染。

      3、render

      这是定义组件时唯一必要的方法(组件的其他生命周期方法都可以省略)。在这个方法中,根据组件的props和state返回一个React元素, 用于描述组件的UI,通常React元素使用JSX语法定义。需要注意的是,render并不负责组件的实际渲染工作,它只是返回一个UI的描述,真正的渲染出页面DOM的工作由React自身负责。render是一个纯函数,在这个方法中不能执行任何有副作用的操作,所以不能在render中调用this.setState,这会改变组件的状态。

      4、componentDidMount

      问问在组件被挂载到DOM后调用,且只会被调用一次。这时候已经可以获取到DOM结构,因此依赖DOM节点的操作可以放到这个方法中。这个方法通常还会用于向服务器端请求数据。在这个方法中调用this.setState会引起组件的重新渲染。

      

      二、更新阶段

      组件被挂载到DOM后,组件的props或state可以引起组件更新。
      props引起的组件更新,本质上是由渲染该组件的父组件引起的,也就是当父组件的render方法被调用时,组件会发生更新过程,这个时候, 组件props的值可能发生改变,也可能没有改变,因为父组件可以使用相同的对象或值为组件的props赋值。但是,无论props是否改变,父组件render方法每一次调用,都会导致组件更新。State引起的组件更新, 是通过调用this.setState修改组件state来触发的。组件更新阶段。

      依次调用的生命周期方法有:

      •       componentWillReceiveProps
      •   shouldComponentUpdate
      •   componentWillUpdate
      •     render
      •       componentDidUpdate

       1、componentWillReceiveProps(nextProps)    

      这个方法只在props引起的组件更新过程中,才会被调用。State引起的组件更新并不会触发该方法的执行。方法的参数nextProps是父组件传递给当前组件的新的props。但如上文所述,父组件render方法的调用并不能保证传递给子组件的props发生变化,也就是说nextProps的值可能和子组件当前props的值相等,因此往往需要比较nextProps和this.props 来决定是否执行props发生变化后的逻辑,比如根据新的props调用this.setState触发组件的重新渲染。

      2、shouldComponentUpdate(nextProps, nextState)   

      这个方法决定组件是否继续执行更新过程。当方法返回true时(true也是这个方法的默认返回值),组件会继续更新过程;当方法返回false 时,组件的更新过程停止,后续的componentWillUpdate、render、componentDidUpdate也不会再被调用。一般通过比较nextProps、nextState和组件当前的props、state决定这个方法的返回结果。这个方法可以用来减少组件不必要的渲染,从而优化组件的性能。

      3、componentWillUpdate(nextProps, nextState)   

      这个方法在组件render调用前执行,可以作为组件更新发生前执行某些工作的地方,一般也很少用到。

      4、componentDidUpdate(prevProps, prevState)   

      组件更新后被调用,可以作为操作更新后的DOM的地方。这个方法的两个参数prevProps、prevState代表组件更新前的props和state。

      二、卸载阶段

      组件从DOM中被卸载的过程;

      依次调用的生命周期方法有:

      •       componentWillUnmount

       1、componentWillUnmount    

      这个方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清除组件中使用的定时器,清除componentDidMount中手动创建的DOM元素等,以避免引起内存泄漏;

     

      敲黑板时间

        关于组件的周期,看下来其实并没有很复杂,react团队已经做的很好了;

      参考文本:

        React+进阶之路;(PS: 此书很棒,感谢巨人;)

  • 相关阅读:
    JavaScript对象的几种创建方式?
    TCP 三次握手,四次挥手
    常用的状态码
    前后端分离的接口规范
    京东架构师:日均 5 亿查询量的ElasticSearch架构如何设计?
    [转] 谈谈Spring中都用到了那些设计模式?
    [转]Post和Get的区别
    [转]17个常用的JVM参数
    从入门到熟悉HTTPS的9个问题
    布式事务和解决方案理论
  • 原文地址:https://www.cnblogs.com/webcabana/p/11233202.html
Copyright © 2020-2023  润新知