• 详解React的生命周期


    React生命周期

    之前自己在学习React的时候,只是简单的理解了生命周期有这么一些,但是不知道大概的一个流程是怎么样的。那天在面试的时候,问到了。自己也有点懵,也没提前看,不过还是答上来了一些,这里来总结一下。

    一、理论

    组件本质上是状态即,输入确定,输出一定确定
    生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类:

    二、初始化阶段

    getDefaultProps:获取实例的默认属性(即使没有生成实例,组件的第一个实例被初始化createClass的时候调用,只调用一次)
    getInitialState:获取每个实例的初始化状态(每个实例自己维护)
    componentWillMount:组件即将被装载、渲染到页面上,即组件挂载之前调用一次,如果在这个函数中调用setState,本次的render函数可以看到更新后的state,并且只渲染一次
    render:组件在这里生成虚拟的DOM节点(只能访问this.props和this.state,只有一个顶层组件,render返回值只能是一个组件,不允许修改状态和DOM输出)
    componentDidMount:在组件挂载之后调用一次,这个时候子组件也都挂载好了,可以在这里使用refs。组件真正在被装载之后可以修改DOM

    三、运行中状态

    componentWillReceiveProps(nextProps):当组件props改变的时候,组件将要接收到新的属性的时候调用。props是父组件传递给子组件的,父组件发生render的时候子组件就会调用这个方法,不管props有没有更新,也不管父子组件之间有没有数据交换。
    shouldComponentUpdate(nextProps,nextState):当组件数据(props)或者状态(state)改变的时候调用,组件挂载之后,每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render。在比较复杂的应用里,有一些数据的改变并不影响界面显示,可以在这里做判断,优化渲染效率。
    componentWillUpdate(nextProps,nextState):这个是shouldComponentUpdate方法返回true的时候或者调用forceUpdate之后调用。这时候不能修改属性和状态
    render:只能访问this.props和this.state,只有一个顶层组件,render返回值只能是一个组件,不允许修改状态和DOM输出
    componentDidUpdate:除了首次render之后调用componentDidMount,其他render结束之后都是调用componentDidUpdate

    四、销毁阶段

    componentWillUnmount:开发者需要来销毁(组件真正删除之前调用,比如销毁计时器和事件监听器)

    React中,触发render有四条路径(更新方式)

    以下假设shouldComponentUpdate都是按照默认返回true的方式
    1.首次渲染(Initial render)
    2.调用this.setState(并不是一次setState会触发一次render,React可能会合并操作,然后一次性进行render)
    3.父组件发生更新(一般就是props发生改变,但是就算props没有改变或者父子组件之间没有数据交换也会触发render)
    4.调用this.forceUpdate

    注意:如果在shouldComponentUpdate里面返回false可以提前退出更新路径。

  • 相关阅读:
    吴裕雄天生自然SPRINGBOOT开发实战SpringBoot H2数据库
    吴裕雄天生自然SPRINGBOOT开发实战SpringBoot H2增删改查
    吴裕雄天生自然SPRINGBOOT开发实战处理 Error: Port should be >= 0 and < 65536. Received
    吴裕雄天生自然SPRINGBOOT开发实战处理Cannot load driver class: com.mysql.cj.jdbc.Driver
    吴裕雄天生自然SPRINGBOOT开发实战处理The import javax.persistence cannot be resolved
    吴裕雄天生自然SPRINGBOOT开发实战连接MYSQL数据库
    吴裕雄天生自然SPRINGBOOT开发实战处理annotation.GetMapping cannot be resolved
    算法笔记_day1_循环设计
    C++笔记 day004基础知识回顾
    算法笔记_day1_自顶向下(循环)
  • 原文地址:https://www.cnblogs.com/sminocence/p/8353027.html
Copyright © 2020-2023  润新知