react创建组建的基本方式

构造函数创建组件

当前目录结构如下：

构造函数创建组件的代码写在的Hello.jsx中，在index.js引用此文件：

index.js引用react ,react-dom， 和Hello文件，

import React from 'react';//创建组建，虚拟DOM元素，生命周期
import ReactDom from 'react-dom';//把创建好的组件和虚拟DOM放到页面上展示

import Hello from '@/components/Hello'

构造函数的数据是从外部引入的，所以数据写到index.js中，然后在index.js中渲染构造函数：

const user = {
    name: '点点',
    age: 5,
    gender: 'boy'
}
ReactDom.render(<div>
    1:
 <Hello name={user.name} age={user.age} gender={user.gender} list={user}></Hello>
    2:
<Hello {...user}></Hello>
</div>, document.getElementById('app'))

上面写了两种传值方式，一种是普通传值，一种是es6传值（...user），意思是，将user这个数组的每一个数值都传递给Hello 这个组件。

然后在Hello.jsx中写构造函数，此文件需要引入react，并且在最后暴露构造函数：

import React from 'react'

function Hello(props) {
    //return null;//1、return 为null时，表示，此组建为空，什么都不渲染；
    // 2、在组建中必须返回一个合法的jsx虚拟dom元素
    console.log(props)
    // console.log(users, 'users')
    return <div>this is hello com --{props.name}--{props.age}--{props.gender}
    </div>
}
// 把组件暴漏出去
export default Hello;

在这个文件中props接受的是来自index.js中传来的数据，index.js分别传值分别调用，并且传入的值只读，不可修改；传入的值也属于实例属性；

class关键字创建组件

语法：

class 组件名称 extends React.Component{
    //render渲染当前虚拟DOM对应的结构
    render(){
        return <div>this is a class zujian</div>
    }
}

每个class关键字创建的组件中必须有render和renturn 返回的合法的jsx；

index.js不变，Hello的引入路径修改为“04.class关键字创建react组件“

在04.class关键字创建react组件.js文件中也需要引入react，最后也要暴露这个函数：

import React from 'react';
class Hello extends React.Component{
    constructor(){
        super();
        // 先调用super(),才能使用this
        this.state={
            msg:'大家好'
        };

    }
    
    // render 渲染当前虚拟DOM对应的结构
    // 不论是class还是function 创建的组件，他们的props都是只读的

    render(){
        this.state.msg='大家好，我也好！';
        return <div>{this.props.name}---{this.props.age}---{this.state.msg}</div>
    }
}
export default Hello 

在class关键字创建的组件中，可以自定义私有值，比如上面的state，state可读可写，但是props是只读的；

在class关键字组件的this，指的是，组件的实例对象；

上面是在不同的文件中使用class关键字创建组件，但是若要是在同一个文件中创建若干个class关键字组件，并且这些组件有相同的部分，那么写法如下：

// 父类(原型对象)
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
}
//在class类中，可以使用extends关键字实现子类继承父类
//语法 class 子类 extends 父类{}
//子类，美国人
// class American{
// constructor(name,age){
// this.name=name;
// this.age=age;
// }
// }
class American extends Person{}
const a1=new American('jack',20);
console.log(a1);
//子类，中国人
// class Chinese{
// constructor(name,age){
// this.name=name;
// this.age=age;
// }
// }
class Chinese extends Person{
 constructor(name,age,id){
        super(name,age);
        this.id=id;
    }
}
const a2=new Chinese('zhangsan',22,2);
console.log(a2);

上面的a1和a2分别输出“jack 20”“zhangsan 22 2”

1、为什么要在constructor中调用super？

    如果一个子类通过extends关键字继承了父类，那么在子类的constructor构造函数中，必须优先调用super();调用super后，需要通过super给父类传值，不然，父类的name，age会为undefined；

2、super()是什么？

    super()是一个函数,代表父类的构造器，子类中的super是父类中constructor构造器的引用；