zoukankan      html  css  js  c++  java
  • 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: 此书很棒,感谢巨人;)

  • 相关阅读:
    js截取字符串区分汉字字母代码
    List 去处自定义重复对象方法
    63. Unique Paths II
    62. Unique Paths
    388. Longest Absolute File Path
    41. First Missing Positive
    140. Word Break II
    139. Word Break
    239. Sliding Window Maximum
    5. Longest Palindromic Substring
  • 原文地址:https://www.cnblogs.com/webcabana/p/11233202.html
Copyright © 2011-2022 走看看