react入门指南（五）类与组件

简述

react是函数式组件，一切逻辑元素都是在组件内完成的，而组件继承于类，熟悉类与组件，对于react必不可少

类

es6

实例属性与实例方法可以继承，静态方法与静态属性不能被继承

new出来的实例，可以访问实例属性实例方法，不能访问静态属性静态方法

而类可以访问静态属性与静态方法，此时的静态属性/方法也成为类属性/方法

class Person2223{
  constructor(name){
    this.name=name||'alex'  //实例属性创建，赋值
  }
  show(){//实例方法
    console.log('show',this.name);
  }
}
Person2223.VERSION='1.2.3';//静态属性|类属性

//子类
class Worker123 extends Person2223{
  constructor(name,job){
    super(name);//类如果有继承 super就要出现
    this.job=job||'卖烧饼';
  }
  show2(){
    console.log(this.job,this.name);
  }
}

es6+

在class内 开头声明static 声明是静态属性或者静态方法

//es7 类
class Person123{
  name='alex'; //实例属性  放在类内部,设置默认值
  age; //没有默认值的实例属性
  static VER='1.11.1';  //类属性 静态属性
  constructor(name,age){
    this.name=name;
    this.age=age||20; //构造器里面可以初始化实例属性
  }

  show(){//方法
    console.log(this.name,this.age,this.show);//访问实例属性
  }

  static show2(){//静态|类 方法定义
    console.log(this.name)
  }
}

class Workerr321 extends Person123{

  job; //实例属性

  static SUM=100;

  constructor(name,age,job){
    super(name,age);//调用父类 影响父类传入到当前的实例属性
    this.job=job||'卖闲鱼'; //构造器初始化
    // this.address='外滩18号';//实例属性，要实现声明
  }

  showJob(){
    console.log(this.job);
  }

}

组件

react组件：类组件和函数式组件

创建组件

//es6
import React from 'react';

class 组件名 extends React.Component{

  state={} 实例属性 组件状态

  static msg;  类属性

  constrctor(props){ //需要在构造时，修改组件的状态时，constrctor才会出现
    super(props) //类如果有继承 super就要出现
      需要在组件构造器内处理传递过来的props时，props参数就出现

    this.state={ // 本地状态

    }
  }
  render(){
    return jsx|null   //jsx~~要渲染   null不渲染
  }
  方法1(){} 自定义的方法
  static 方法2(){}
}

//es5
var React = require('react');
let 组件名 = React.createClass({
  getInitialState:function(){  //组件状态
    return {
      数据:值
    }
  }
  render:function(){
    return jsx
  }
});

使用组件

<HelloWorld/>
<HelloWorld></HelloWorld>

嵌套组件

渲染（描画）页面

import ReactDom from 'react-dom';
var RactDom = require('react-dom');
ReactDom.render(jsx,插入点,回调)