React组件



  • 1、使用函数定义一个组件:

    function Hello(props) {
        return <h1>Hello World!</h1>;
    }
    ReactDOM.render(
        <div>
            <Hello></Hello>
        </div>
        , document.getElementById("app")
    )
    
    • 在组件中必须返回一个虚拟DOM元素

    • 在使用时直接把组件名称以标签的形式放在页面上

    • 在构造函数中使用props形参接收外界传递进来的数据

    const user = {
        name:       "Shaw",
        age:        19,
        sex:        "female"
    }
    
    ReactDOM.render(
        <div>
            <Hello name={user.name} age={user.age} sex={user.sex}></Hello>
        </div>
        , document.getElementById("app")
    )
    

    2. 使用class关键字创建组件

    • es6中class关键字的用法

      //创建一个动物类
      class Animal{
          //这是类中的构造器
          //每一个类中都有一个构造器
          //如果我们没有指定构造器,那么可以认为每个类内部有个隐形的空构造器
          constructor(name, age){
              this.name = name;
              this.age = age;
          }
      }
      
    • class中的静态属性与实例属性

      • 静态属性指的是 Class 本身的属性,即Class.propName,挂载给构造函数

      • 实例属性指的是定义在实例对象(this)上的属性,挂载给实例对象

      • (不用class关键字)

        //实例属性
        function Person(name, age){
            this.name = name;
            this.age = age;
        }
        //静态属性
        Person.number = "111111";
        
      • (使用class关键字)

        class Animal{
        	//实例属性
            constructor(name, age){
                this.name = name;
                this.age = age;
            }
            //静态属性
            static info = "animal";
        
    • class中的静态方法与实例方法

      • (不用class关键字)

        
        
      • (使用class关键字)

        class Animal{
            
            howl() {
                console.log("这是animal的实例方法");
            }
            static show() {
                console.log("这是animal的静态方法")
            }
        }
        
    • class中的继承

      • 我们可以使用extends关键字实现子类继承父类
      class Person {
          constructor(name, age){
              this.name = name;
              this.age = age;
          }
          //公共实例方法
          hello() {
              console.log("Hi");
          }
      }
      //在class中可以使用extends关键字实现子类继承父类
      class American extends Person{ }
      const a1 = new American("Jack", 20);
      
      class Chinese extends Person{ }
      const c1 = new Chinese("Shaun", 18);
      
      • super函数

        • 当子类通过extends关键字继承了父类,那么在子类的constructor构造函数中必须优先调用super()函数(规定),super即是父类中构造器的引用

        • 注意!!!!!!!!!!!

          当子类内部没有我们手写的构造器时,name、age参数将会自动被传给父类

          但是如果我们自己定义了子类的constructor,那么首先我们必须使用super函数引用父类构造器;但这时由于我们自己写的constructor没有接收到参数,所以我们必须自己手动传

          class American extends Person{ 
              //手动传参数进constructor
              constructor(name, age){
                  //手动传参数进父类构造器
                  super(name, age);
              }
          }
          
    • 使用class关键字创建组件

      • 如果我们要使用class创建组件,那么必须让自己的组件继承自React.Component
      • 必须包含render()函数,渲染当前组件内部的虚拟DOM结构,必须有return返回值
      • class关键字创建的组件中,如果想使用外界传递过来的props参数,无需接受,可直接通过this.props.XXX访问
      class Movie extends React.Component {
          render(){
              return <div>
                  this is a component
                  --{this.props.name}
                  --{this.props.age}
                   </div>
          }
          constructor(){
              super();
          }
      }
      

    3. 两种方法创建组件的区别

    使用class关键字创建的组件,有自己的私有数据(this.state)和生命周期函数

    使用function创建的组件,只有props,没有自己的私有数据和生命周期函数

    class Movie extends React.Component {
        
        constructor(){
            super();
            //私有数据
            this.state = {
                msg:            "大家好,我是class创建的Movie组件",
            };
        }
    
        render(){
            ...
        }
    }
    
    1. 用构造函数创造出来的组件叫做无状态组件(用的不多)

    2. class关键字创造出来的组件叫做有状态组件(state)

    3. 使用场景

      • 如果一个组件需要有自己的私有数据,推荐使用class关键字创造
      • React官方:无状态组件由于没有自己的私有数据和生命周期函数,运行效率会比有状态组件高
      • 但其实我们一般用的都是有状态组件
    4. propsstate的区别

      • props中的数据时外界传递来的;state中的数据是组件私有的(通过AJAX获取的数据一般是私有的)
      • props中的数据是只读的,state中的数据是可以修改的

 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

Looks like your connection to Dian was lost, please wait while we try to reconnect.