1、组件化

组件化提供了一种抽象，将页面拆分成一个个独立可复用的小组件来构造应用，任何的应用都会被抽象成一颗组件树
1、根据组件的定义方式，可以分为:函数组件(Functional Component )和类组件(Class Component)
2、根据组件内部是否有状态需要维护，可以分成:无状态组件(Stateless Component )和有状态组件(Stateful Component)
3、根据组件的不同职责，可以分成:展示型组件(Presentational Component)和容器型组件(Container Component)

2、类组件

1、定义要求：
1）、组件的名称是大写字符开头
2）、类组件需要继承自 React.Component
3）、类组件必须实现render函数
2、相关属性
1）、constructor是可选的，通常在constructor中初始化一些数据。
2）、this.state中维护的就是组件内部的数据。
3）、render() 方法是 class 组件中唯一必须实现的方法。
3、函数式组件和类组件区别
1）、函数式组件没有this
2）、函数式组件没有内部状态

// class组件
export  default class App extends React.Component {
    constructor() {
        super()
        this.state = {
            message: "你好"
        }
    }
    render() {
        {/**alt + shift + f 对代码格式化 */}
        return (<div>
            <span>你好啊，李晓红</span>
            <h2>{this.state.message}</h2>
        </div>)
    }
}
// 函数式组件
export default function App {
    return (<div>
        <span>你好啊，李晓红</span>
    </div>)
}

4、render返回值
1）、React 元素：通过 JSX 创建的元素
2）、数组或 fragments:使得 render 方法可以返回多个元素
3）、Portals:可以渲染子节点到不同的 DOM 子树中
4）、字符串或数值类型:它们在 DOM 中会被渲染为文本节点
5）、布尔类型或 null:什么都不渲染。

3、组件生命周期

1、生命周期，可以分为多个阶段
1）、装载阶段(Mount)，组件第一次在DOM树中被渲染的过程
2）、更新过程(Update)，组件状态发生变化，重新更新渲染的过程
3）、卸载过程(Unmount)，组件从DOM树中被移除的过程
2、React生命周期函数
1）、componentDidMount：组件已经挂载到DOM上
2）、componentDidUpdate：组件已经发生了更新
3）、componentWillUnmount：组件即将被移除

生命周期图

4、生命周期函数

1、Constructor
constructor中通常只做两件事情:
1）、通过给 this.state 赋值对象来初始化内部的state
2）、为事件绑定实例(this)
如果都没有上述两件事，则不需实现构造函数
2、componentDidMount
在组件挂载后(插入 DOM 树中)立即调用
1）、执行依赖于DOM的相关操作
2）、在此处发送网络请求(官方建议)
3）、在此处添加一些订阅(会在componentWillUnmount取消订阅)
3、componentDidUpdate(prevProps, prevState, snapshot)
在更新后会被立即调用，首次渲染不会执行此方法。如果组件实现了 getSnapshotBeforeUpdate() ，第三个参数 “snapshot” 参数传递，否则此参数将为 undefined。
1）、组件更新后，可以在此处对 DOM 进行操作
2）、如果你对更新前后的 props 进行了比较，也可以选择在此处进行网 络请求;(例如，当 props 未发生变化时，则不会执行网络请求)
4、componentWillUnmount
会在组件卸载及销毁之前直接调用
1）、在此方法中执行必要的清理操作，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等

5、不常用的生命周期函数

不常用的生命周期