React组件

wzr

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(){
        ...
    }
}

用构造函数创造出来的组件叫做无状态组件（用的不多）
用class关键字创造出来的组件叫做有状态组件（state）
使用场景
- 如果一个组件需要有自己的私有数据，推荐使用class关键字创造
- React官方：无状态组件由于没有自己的私有数据和生命周期函数，运行效率会比有状态组件高
- 但其实我们一般用的都是有状态组件
props与state的区别
- props中的数据时外界传递来的；state中的数据是组件私有的（通过AJAX获取的数据一般是私有的）
- props中的数据是只读的，state中的数据是可以修改的