zoukankan      html  css  js  c++  java
  • react学习一

    1.constructor( )-----super( )的基本含义

      constructor()  ----super()的基本含义

                  这是ES6对类的默认方法,通过new,命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的 constructor()  方法

       super( ) ——继承

                  在class方法中,继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法,否则新建实例时会报错。

                报错的原因是:子类是没有自己的 this 对象的,它只能继承自父类的 this 对象,然后对其进行加工,而super( )就是将父类中的this对象继承给子类的。没有 super,子类就得不到 this 对象。

    2.Es5-----Es6关于继承的实现不同之处
      出现上面情况的原因是,ES5的继承机制与ES6完全不同。

    复习一个重要知识点——ES5中new到底做了些啥?


    当一个构造函数前加上new的时候,背地里来做了四件事:
    1.生成一个空的对象并将其作为 this;
    2.将空对象的 __proto__ 指向构造函数的 prototype;
    3.运行该构造函数;
    4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型,则返回this;如果 return 一个引用类型,则返回这个引用类型。

          简单解释,就是在ES5的继承中,先创建子类的实例对象this,然后再将父类的方法添加到this上( Parent.apply(this) )。而ES6采用的是先创建父类的实例this(故要先调用 super( )方法),完后再用子类的构造函数修改this。

    3.super(props)------super()-----以及不写super的区别
         如果你用到了constructor就必须写super(),是用来初始化this的,可以绑定事件到this上;

        如果你在constructor中要使用this.props,就必须给super加参数:super(props);

       (无论有没有constructor,在render中this.props都是可以使用的,这是React自动附带的;)

        如果没用到constructor,是可以不写的;React会默认添加一个空的constructor。

    生命周期方法

       许多方法在组件生命周期中某个确定的时间点执行。

    挂载: componentWillMount

               服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用setState,render()将会感知到更新后的state,将会执行仅一次,尽管state改变了

    挂载:componentDidMount

               在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个DOM展现,  你可以通过this.getDOMNode()来获取相应DOM节点。

               如果想和其它的javascript框架集成,使用setTimeout或者setInterval来设置定时器,或者发送AJAX请求,可以在该方法中执行这些操作

    更新:shouldComponentUpdate

              shouldComponentUpdate(object nextProps, object nextState)
              在接收到信的props或者state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用forceUpadate方法的时候也不会。如果确定新的props和state不会导致组件更新,则此处应该

    shouldComponentUpdate: function(nextProps, nextState) {

      return nextProps.id !== this.props.id;

    }

    如果 shouldComponentUpdate 返回 false,则 render() 将不会执行,直到下一次 state 改变。(另外,componentWillUpdate 和componentDidUpdate 也不会被调用。)

     

    默认情况下,shouldComponentUpdate总会返回true,在 state 改变的时候避免细微的 bug,但是如果总是小心地把 state 当做不可变的,在 render() 中只从 props 和 state 读取值,此时你可以覆盖 shouldComponentUpdate 方法,实现新老props和state的比对逻辑

    如果性能是个瓶颈,尤其是有几十个甚至上百个组件的时候,使用 shouldComponentUpdate 可以提升应用的性能。

     

    更新:componentWillUpdate

               componentWillUpdate(object nextProps, object nextState)

               在接收到新的props或者state之前立刻调用。在初始化渲染的时候该方法不会被调用。

              使用该方法做一些更新之前的准备工作

             注意:

            你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps

     

    更新:componentDidUpdate

              componentDidUpdate(object prevProps, object prevState)

             在组件的更新已经同步到DOM中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作DOM元素。

            注意:

           为了兼容 v0.9,DOM 节点会作为最后一个参数传入。如果使用这个方法,你仍然可以使用 this.getDOMNode() 来访问 DOM 节点。

     

    用 async/await 来处理异步

     

    111111
  • 相关阅读:
    Swift3 重写一个带占位符的textView
    Swift3 使用系统UIAlertView方法做吐司效果
    Swift3 页面顶部实现拉伸效果代码
    Swift3 倒计时按钮扩展
    iOS 获取当前对象所在的VC
    SpringBoot在IDEA下使用JPA
    hibernate 异常a different object with the same identifier value was already associated with the session
    SpringCloud IDEA 教学 番外篇 后台运行Eureka服务注册中心
    SpringCloud IDEA 教学 (五) 断路器控制台(HystrixDashboard)
    SpringCloud IDEA 教学 (四) 断路器(Hystrix)
  • 原文地址:https://www.cnblogs.com/whl4835349/p/9776872.html
Copyright © 2011-2022 走看看