一.React组件分类##
- 定义方式：函数组件(function)，类组件(class)。
- 是否需要维护状态：无状态/有状态组件。
- 职责：展示型/容器型(逻辑结构)组件。
这些概念重叠很多，最主要是关注数据逻辑和UI展示的分离：
- 函数，无状态，展示型组件主要关注UI的展示。
- 类，有状态，容器型组件主要关注数据逻辑。
- 其他还有异步，高阶组件等。
二. 类组件##
- 组件名称必须大写字符开头（类 & 函数），JSX中将大写解析为组件，小写解析为html普通元素。
- 类组件需要继承自React.Component。
- 类组件必须实现render函数。
官方建议直接使用ES6的class类定义，使用class定义一个组件： - constructor是可选的，通常在其中初始化数据。
- this.state中维护的就是我们组件内部的数据。
- render()方法是class组件中唯一必须实现的方法。
export default class App extends Component { render(return ())}
三. 函数组件##
export default function App() { return ()}
函数组件特点：
- 普通的函数，内部没有this对象
- 没有内部的状态（hooks维护函数式组件内部状态）
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
补充##
render和函数组件可以return什么东西？
- React元素：
- JSX创建，DOM节点或自定义组件
- 数组：使render方法可以返回多个元素，如：div数组。
- fragments片段：
- Portals：可以渲染子节点到不同的DOM子树中。
- 字符串或数值类型：DOM中渲染为文本节点。
- 布尔值或null：什么都不渲染
四. 生命周期##
定义：从创建到销毁的整个过程。
React的生命周期可以让我们在合适的地方完成自己想要的功能。
React生命周期阶段：
- 装载阶段Mount：组件第一次被渲染到DOM中的过程。
- 更新过程Update：组件状态改变，重新更新渲染的过程。
- 卸载过程Unmount：组件从DOM树中被移除的过程。
React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数： - componentDidMount：组件挂载到DOM上时，回调。
- componentDidUpdate：组件发生更新，回调。
- componentWillUnmount：组件即将被移除，回调。
- 通过编写这些回调函数，实现需求。
注意：React生命周期，主要谈的类class的生命周期，因为函数组件没有生命周期函数（通过hooks可以模拟一些生命周期的回调）。
五. 生命周期解析##
image.png
- Mouting挂载阶段：
- 先执行constructor()方法
- 再执行render()方法
- 挂在组件到DOM树上
- 做完这些后，执行componentDidMount方法。
- Updating更新阶段：
- componentDidUpdate(prevProps, prevState, snapshot)
- New props, setState(), forceUpdate()三种操作会调用render()重新渲染DOM树。
- 更新DOM。
- 执行componentDidUpdate函数。
- 每次有new props或setState(), forceUpdate()调用都需要重新渲染，损耗性能，可以用shouldComponentUpdate()来权衡。
- getSnapshotBeforeUpdate()方法在最近一次渲染输出（提交到DOM节点）前被调用。可以获得更新前的一些数据（如滚动位置），会在一个对象里头保存，任何返回值都将作为参数传递给componentDidUpdate()，用法不常见。
- Unmounting卸载阶段：
- 移除一个组件时调用componentWillUnmount函数。
六. 生命周期函数内做什么##
- Constructor：通常只有两件事。
- 通过this.state赋值对象来初始化内部的state。
- 为事件绑定实例（this）；
this.increment.bind(this);
- componentDidMount：
- 组件挂载后立即调用
- 通常操作于：依赖于DOM的操作，在此处发送网络请求的最好的地方（建议），添加一些订阅（会在componentWillUnmount取消订阅）。
- componentDidUpdate：更新后立即调用，首次渲染不会执行。
- 组件更新后，可以在此处对DOM进行操作。
- 如果对更新前后的props进行了比较，也可以选择在此处进行网络请求，（如：当props未变化，则不执行网络请求）。
- componentWillUnmount：组件卸载/销毁前直接调用。
- 在此方法中执行必要的清理操作。
- 例如：清除timer，取消网络请求或清楚再componentDidMount()中创建的订阅等。
