6-1、组件的定义（类、函数）

拆解性

标签不能大写（例如div：<div></div>）

React的组件相较于Vue的组件更加灵活多样，按照不同的方式可以分成很多类组件：

1. 根据组件的定义方式，可分为函数组件和类组件
2. 根据组件内容是否有状态需要维护，可分为：无状态组件和有状态组件
3. 根据组件的不同职责，可分为：展示型组件和容器型组件

函数组件、无状态组件、展示型组件主要关注UI的展示
类组件、有状态组件、容器型组件主要关注数据逻辑

类组件的定义要求：（标签不能大写）

1. 组件的名称必须是大写字符开头（无论类组件还是函数组件）
2. 类组件需要继承自React.Component
3. 类组件必须实现render函数
   

在ES6之前，可以通过create-react-class模块来定义类组件，但目前官网建议我们使用ES6的class类定义

使用class定义一个组件：

1. constructor是可选的，我们通常啊在constructor中初始化一些数据
2. this.state中维护的是我们组件内部的数据
3. render() 方法是class组件中唯一必须实现的方法

Render函数的返回值：

1. React元素：
   • 通常通过jsx创建
   • <div/>会被React渲染为DOM节点，<MyComponent/>会被React渲染为自定义组件
   • <div/>和<MyComponent/>均为React元素
2. 数组或fragments：使得render方法可以返回多个元素
3. Portals：可以渲染子节点到不同的DOM子树中
4. 字符串或数值类型：在DOM中会被渲染为文本节点
5. 布尔类型或null：什么都不渲染

函数组件使用function来定义函数，只是这个函数会返回和类组件中render函数返回一样的内容

函数组件：（有自己的特点：hooks）

• 没有生命周期，也会被更新并挂载，但是没有生命周期函数
• 没有this（组件实例）
• 没有内部状态（state）