zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    java接口返回json数据格式
    ajax请求报406问题
    ajax跨域问题
    js、css等引入文件路径正确,却报404的解决办法
    HttpServletResponse,HttpServletRequest详解
    python学习(十六)os使用
    python学习(十五)python读取配置yaml
    python学习(十四)python操作发送邮件(163邮箱)
    python学习(十三)python使用pymsql链接数据库操作
    python学习(十二)python正则表达式
  • 原文地址:https://www.cnblogs.com/BySee1423/p/13150692.html
Copyright © 2011-2022 走看看