• React生命周期


    v16之前生命周期:

    (1)initialization组件初始化阶段

      

    constructor(){
        super(props);
        this.state={}  
    }

      super(props) 调用基类的构造方法,也将父组件的props注入给子组件,供子组件读取props,只读;state初始化 ,可修改

    (2)Mounting组件挂载阶段

      componentWillMount:在组件挂载到DOM前调用,且只会调用一次

      render:根据props和state,return一个React元素

      componentDidMount:组件挂载到DOM后调用,且只会调用一次

       componentWillMount =》render =》 componentDidMount

    (3)update组件更新阶段

      componentWillReceiveProps(nextProps) :只调用于props引起的组件更新过程中,参数nextProps是父组件传给当前组件的新的props;

      shouldComponentUpdate(nextProps,nextState):此方法通过比较nextProps、nextState及当前组件的this.props、this.state,返回true时当前组件将继续执行更新过程,返回false则当前组件更新停止,以此可减少组件的不必要渲染,优化组件性能;

      componentWillUpdate(nextProps,nextState):该方法在调用render方法前执行,可执行一些组件更新发生前的工作

      componentDidUpdate(prevProps,prevState):在组件更新后调用,可以操作组件更新的DOM,组件更新前的参数

      a. 父组件重新render的情况,导致props重传引起的子组件渲染

        componentWillReceiveProps(nextProps) =》shouldComponentUpdate(nextProps,nextState) =》 componentWillUpdate(nextProps,nextState) =》 render =》 componentDidUpdate(prevProps,prevState)

      b. 组件自身调用setState

        shouldComponentUpdate =》 componentWillUpdate =》 componentDidUpdate

    (4)unmounting组件卸载阶段

      componentWillUnmount

    v16.4生命周期:

      getDerivedStateFromProps(props,state) :在组件创建时和更新时的render方法之前调用,它应该返回一个对象来更新状态,或者返回null不更新任何内容

      getSnapshotBeforeUpdate():被调用于render之后,可以读取但无法使用DOM的时候。使得组件在可能更改之前从DOM捕获一些信息,如滚动位置。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()

    (1)创建时

      constructor =》getDerivedStateFromProps(props,state) =》 render =》 componentDidMount

    (2)更新时

      getDerivedStateFromProps =》 shouldComponentUpdate =》 render =》 getSnapshotBeforeUpdate =》 componentDidUpdate

    (3)卸载时

      componentWillUnmount

  • 相关阅读:
    java爬虫(jsoup)
    python之模块分类(六)
    Python之模块分类(五)
    python之模块分类(四)
    python之模块分类(三)
    Linux系统引导过程
    python之模块分类(二)
    linux 进程管理
    python之模块分类(一)
    python基础之模块导入
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/14019821.html
Copyright © 2020-2023  润新知