• react 生命周期


    constructor:(1次)
                当前生命周期用来做组件的初始化,当输写当前生命周期时必须要写super函数,否则this的指向会发生错误。
                当前生命周期可以用this.state来定义当前组件所需要的一些状态
                当前生命周期特殊情况下是接收不到props的数据,如果想要接收到props的数据的话,需要在super和constructor中传递props这个参数
     
    componentWillMount:挂载前 (1次)  (17.0废除掉了)
                当前生命周期可以接收到props传递过来的数据,可以将外部数据转换为内部数据.
                在当前生命周期中尽量不要使用this.setState。因为当前生命周期执行完毕以后,下一个生命周期就是render函数
                在当前生命周期中我们可以对this.state中的数据做初始化的最后一次修改
     
    render: 渲染 (多次)
         当前生命周期的作用是将数据与虚拟DOM进行相结合,进行数据的渲染。render在第一次执行完毕以后会将渲染的结果在内存中保留一份
         当render函数第二次执行的时候,会与内存中的虚拟DOM进行对比,这种对比方式叫做diff算法(diff算法:新旧两个虚拟DOM的对比就是diff算法)
     
    componentDidMount:挂载后(1次)
         当前生命周期可以获取到真实的DOM结构,一般情况下我们可以在当前生命周期中进行ajax的数据请求 || 进行方法的实例化
    如何获取到真实的DOM结构?
                    1、this.refs.属性
                    2、
                        <元素 ref={(形参)=>this.属性 = 形参}></元素>
                        这里面的形参代表的是当前的DOM元素
                        使用:  this.属性
     
    componentWillUnmount:卸载 (1次)
        当前生命周期的作用用来做事件的解绑  /  事件的移除  等操作
     
    componentWillReceiveProps:(多次)  (17.0废除掉了)
                当props的数据发生改变的时候当前生命周期就会执行,当前生命周期中有一个参数就是新的props,在当前生命周期中可以用来检测外部数据的更新
     
    shouldComponentUpdate:(多次)
         1、当state||props中的数据发生改变的时候会执行当前生命周期,当前生命周期必须要返回一个布尔值,当返回true的时候会执行下面的生命周期,如果返回false则下面的生命周期不会执行(render函数不会执行),
         2、当前生命周期中会有2(3)个参数 一个是新的props  一个是新的state。我们可以通过新的props || state 与 旧的props和state进行对比,来进行性能优化
         3、当前生命周期决定的是render函数是否渲染,而不是数据是否更新,哪怕返回值是false  数据其实也会进行更新的
         4、千万不要在这里面执行this.setState否则会造成死循环
     
    componentWillUpdate:(多次)   (17.0废除掉了)
           当前生命周期可以用来做更新数据的最后一次修改
           当前生命周期中有2个参数一个是新的props 一个是新的state  我们可以通过新的props || 新的state来做数据最后的一次更改
     
    componentDidUpdate:(多次)
         当期生命周期可以获取到数据更新后最新的DOM结构
         当前生命周期数据与模板已经进行相结合,生成最新的DOM结构了
         注意:如果我们在当前生命周期中做一些实例化的时候 一定要加判断
    当前生命周期也有2个参数  一个是旧的props  一个是旧的state
  • 相关阅读:
    在keil中使用svn源代码管理工具
    用VS2010写一个SL4的双工通讯的Demo
    Jenkins+Gitlab手动构建一个小项目
    快速建立ssh互信(一主两从)
    Ansible剧本(rsync+inotify+sersync)
    41设计模式学习资料
    Bad Request Invalid Hostname HTTP Error 400. The request hostname is invalid.
    cf交互题怎么写||算法学习方法论||codeforces700ABC总结 cf||引用大佬的博客||开篇
    codeforces699 div2 ABC | cf699 div2 abc | 贪心,贪心,还是贪心
    Pycharm破解
  • 原文地址:https://www.cnblogs.com/BySee1423/p/13150692.html
Copyright © 2020-2023  润新知