09.React学习笔记.生命周期函数

一.React组件分类##

1. 定义方式：函数组件(function)，类组件(class)。
2. 是否需要维护状态：无状态/有状态组件。
3. 职责：展示型/容器型(逻辑结构)组件。
   这些概念重叠很多，最主要是关注数据逻辑和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 ()}

函数组件特点：

1. 普通的函数，内部没有this对象
2. 没有内部的状态（hooks维护函数式组件内部状态）
3. 没有生命周期，也会被更新并挂载，但是没有生命周期函数；

补充##

render和函数组件可以return什么东西？

1. React元素：

• JSX创建，DOM节点或自定义组件

2. 数组：使render方法可以返回多个元素，如：div数组。
3. fragments片段：
4. Portals：可以渲染子节点到不同的DOM子树中。
5. 字符串或数值类型：DOM中渲染为文本节点。
6. 布尔值或null：什么都不渲染

四. 生命周期##

定义：从创建到销毁的整个过程。
React的生命周期可以让我们在合适的地方完成自己想要的功能。
React生命周期阶段：

• 装载阶段Mount：组件第一次被渲染到DOM中的过程。
• 更新过程Update：组件状态改变，重新更新渲染的过程。
• 卸载过程Unmount：组件从DOM树中被移除的过程。
  React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：
• componentDidMount：组件挂载到DOM上时，回调。
• componentDidUpdate：组件发生更新，回调。
• componentWillUnmount：组件即将被移除，回调。
• 通过编写这些回调函数，实现需求。
  注意：React生命周期，主要谈的类class的生命周期，因为函数组件没有生命周期函数（通过hooks可以模拟一些生命周期的回调）。

五. 生命周期解析##

image.png

1. Mouting挂载阶段：

• 先执行constructor()方法
• 再执行render()方法
• 挂在组件到DOM树上
• 做完这些后，执行componentDidMount方法。

2. Updating更新阶段：

• componentDidUpdate(prevProps, prevState, snapshot)
• New props, setState(), forceUpdate()三种操作会调用render()重新渲染DOM树。
• 更新DOM。
• 执行componentDidUpdate函数。
• 每次有new props或setState(), forceUpdate()调用都需要重新渲染，损耗性能，可以用shouldComponentUpdate()来权衡。
• getSnapshotBeforeUpdate()方法在最近一次渲染输出（提交到DOM节点）前被调用。可以获得更新前的一些数据（如滚动位置），会在一个对象里头保存，任何返回值都将作为参数传递给componentDidUpdate()，用法不常见。

3. Unmounting卸载阶段：

• 移除一个组件时调用componentWillUnmount函数。

六. 生命周期函数内做什么##

1. Constructor：通常只有两件事。

• 通过this.state赋值对象来初始化内部的state。
• 为事件绑定实例（this）；

this.increment.bind(this);

2. componentDidMount：

• 组件挂载后立即调用
• 通常操作于：依赖于DOM的操作，在此处发送网络请求的最好的地方（建议），添加一些订阅（会在componentWillUnmount取消订阅）。

3. componentDidUpdate：更新后立即调用，首次渲染不会执行。

• 组件更新后，可以在此处对DOM进行操作。
• 如果对更新前后的props进行了比较，也可以选择在此处进行网络请求，（如：当props未变化，则不执行网络请求）。

4. componentWillUnmount：组件卸载/销毁前直接调用。

• 在此方法中执行必要的清理操作。
• 例如：清除timer，取消网络请求或清楚再componentDidMount()中创建的订阅等。