React创建组件

React创建组件

React创建组件有两种方式：构造函数和class关键字

1. 构造函数：
   第一种基本组件的创建方式(构造函数)，就是一个最基本的组件，想要把组件放在页面中，可以把 构造函数的名称，当作 组件的名称，以HTML标签形式引入页面中即可

注意：React在解析所有的标签的时候，是以标签的首字母来区分的，如果标签的首字母是小写的，那么就按照 普通的 HTML 标签来解析，如果首字母是大写的，则按照 组件的形式去解析渲染，所以，组件的首字母必须大写

父组件向子组件传递数据

• 属性扩散(使用方法为…Obj，把该对象的所有属性，放到这个位置，然后在组件中，必须 显式的在构造函数参数列表中，定义props属性来接收，最后在返回的JSX标签中以props.属性的方式展示出来)

注意：通过props得到的任何数据都是只读的，不能重新赋值

• 将组件封装到单独的文件中(使用export default 组件名将创建的组件暴露出去 )

2. class关键字

基于class关键字创建组件

• 使用 class 关键字来创建组件(通过extends关键字，继承React.component这个类，如果想要引用这个组件，可以把类的名称，以标签的形式，导入到JSX中使用)

class Person extends React.Component{
    // 通过报错提示得知：在class创建的组件中，必须定义一个render函数
    render(){
        // 在render函数中，必须返回一个null或者符合规范的虚拟DOM元素
        return <div>
            <h1>这是用 class 关键字创建的组件！</h1>
        </div>;
    }
}

同样的，如果想要给组件添加一些属性(通过外界传递一些数据)，首先也是在组件上(使用子组件的时候写明一些数据)写明属性，然后在组件的render中使用this.props.属性名获得相应的属性名称，并进行一些基本的处理。

注意：

• class方式定义的组件自身就带有porps属性，可以直接通过this.props来获得外界传递过来的数据，但是在function定义的组件中，如果想要使用props，必须在组件中先定义，否则无法直接使用
• 两种方式创建的组件(或者说只要是组件)，组件的props，都是只读的

两种创建组件方式的对比

1. 用构造函数创建出来的组件：专业的名字叫做“无状态组件”
2. 用class关键字创建出来的组件：专业的名字叫做“有状态组件”

用构造函数创建出来的组件，和用class创建出来的组件，这两种不同的组件之间的本质区别就是：有无state属性！！！
有状态组件和无状态组件之间的本质区别就是：有无state属性！同时，class创建的组件，有自己的生命周期函数，但是function创建的组件，没有自己的生命周期函数；

问题：什么时候使用有状态组件，什么时候使用无状态组件

1. 如果有一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合使用class创建出来的组件
2. 如果有一个组件，只需要根据外界传递过来的props，渲染固定的 页面结构即可，此时，非常适合使用function创建出来的无状态组件(使用无状态组件的一个好处是，由于剔除了组件的生命周期，所以，运行速度会相对快一些)