拆解性
标签不能大写(例如div:<div></div>
)
React的组件相较于Vue的组件更加灵活多样,按照不同的方式可以分成很多类组件:
- 根据组件的定义方式,可分为函数组件和类组件
- 根据组件内容是否有状态需要维护,可分为:无状态组件和有状态组件
- 根据组件的不同职责,可分为:展示型组件和容器型组件
函数组件、无状态组件、展示型组件主要关注UI的展示
类组件、有状态组件、容器型组件主要关注数据逻辑
类组件的定义要求:(标签不能大写)
- 组件的名称必须是大写字符开头(无论类组件还是函数组件)
- 类组件需要继承自React.Component
- 类组件必须实现render函数
在ES6之前,可以通过create-react-class模块来定义类组件,但目前官网建议我们使用ES6的class类定义
使用class定义一个组件:
- constructor是可选的,我们通常啊在constructor中初始化一些数据
- this.state中维护的是我们组件内部的数据
- render() 方法是class组件中唯一必须实现的方法
Render函数的返回值:
- React元素:
- 通常通过jsx创建
<div/>
会被React渲染为DOM节点,<MyComponent/>
会被React渲染为自定义组件<div/>
和<MyComponent/>
均为React元素
- 数组或fragments:使得render方法可以返回多个元素
- Portals:可以渲染子节点到不同的DOM子树中
- 字符串或数值类型:在DOM中会被渲染为文本节点
- 布尔类型或null:什么都不渲染
函数组件使用function来定义函数,只是这个函数会返回和类组件中render函数返回一样的内容
函数组件:(有自己的特点:hooks)
- 没有生命周期,也会被更新并挂载,但是没有生命周期函数
- 没有this(组件实例)
- 没有内部状态(state)