react 学习之路（记）- React 生命周期

文章参考：https://blog.youkuaiyun.com/luobo2345/article/details/122818947

React 生命周期 (lifecycle)

1. 挂载
2. 更新
3. 卸载

react 两个关键词：虚拟 DOM 与 组件

1. 虚拟 DOM 的本质 ： 就是通过 -> 编译 JSX -> 得到的一个以 JavaScript 对象形式存在的 DOM 结构描述
   生命周期方法 ： render
   <1. 在组件初始化阶段，会通过生命周期方法 render 生成虚拟 DOM节点，然后通过调用 ReactDOM.render 方法，完成虚拟 DOM 节点到真实 DOM 节点的转换。
   <2. 在组件更新阶段，会再次调用 render 方法生成新的虚拟 DOM 节点，然后借助Diffing 算法比对两次虚拟 DOM 节点的差异，从而找出变化的部分实现最小化的 DOM 更新
   虚拟 DOM 是 React 核心算法 Diffing 的基石。

挂载

constructor（props） 数据的初始化。

1. 接收props和context
2. 在函数内使用，需在super传入参数
3. 使用constructor 时 必须使用super（不使用，会有this指向的问题）
4. 不初始化 state 或者 不进行方法绑定，可不不为组件实现构造函数

componentWillMount 在挂载之前也就是render之前被调用。

1. 服务端渲染唯一会调用的函数
2. 已经初始化数据，但是没有渲染dom
3. 同步调用 setState() 不会触发额外渲染

getDerivedStateFromProps 从props获取state。

1. 替代了componentWillReceiveProps
2. 罕见，state的值在任何时候都取决于props 时。
3. 在初始挂载和后续更新时都会被调用
4. 返回一个对象更新state，返回null 不更新state
5. 返回值是必须的，如果不需要更新state 则在末尾（ 返回null return null）

render class组件中唯一必须实现的方法。

1. render函数会插入jsx生成dom结构，React生成一份虚拟的dom树，
2. react 通过diff算法比较新旧DOM
3. render 是纯函数

当render被调用时，他会检查this.props 和 this.state 的变化，并返回一下类型之一：

1. 通过jsx 创建的 react 元素
2. 数组或者fragments：使得render可以返回多个元素
3. Portals：可以渲染子节点到不同的dom树上
4. 字符串或数值类型：他们在DOM中会被渲染为文本节点
5. 布尔类型或者null：什么都不渲染

componentDidMount 在组建挂载后（插入到DOM树中）后立即调用

1. 在这里发送请求
2. 返回的数据 通过 setState 重新渲染组件
3. 添加订阅，然后在conponentWillUnmount 中取消

更新：当组件的props 或 state 发生变化时会触发更新

componentWillReceiveProps() 在已挂载的组件中接受新的props之前调用

1. 参数：nextProps
2. 对比：nextProps 与 this.props
3. 父组件渲染 props未改动也会调用此方法
4. 会在组件的props更新时调用
5. this.setState() 不会触发该生命周期

shouldComponentUpdate 在渲染之前被调用，默认返回true。

1. 用于性能优化
2. 返回false，不会调用 componentWillUpdate render componentDidUpdate
3. 用于控制组件重新渲染的生命周期（return false 阻止更新，不建议使用，建议使用 PureComponent 阻止组件更新）
4. 因为React父组件重新渲染会导致所有的子组件重新渲染。可以在这个生命周期中做判断。

componentWillUpdate 当组件接收到新的props和state会在渲染前调用。初始渲染不会调用该方法。

1. 当shouldComponentUpdate 返回true，组件重新渲染。进入componentWillUpdate，不能在这使用 setState。在函数返回之前，不能执行任何更新操作。
2. 可以替换为 componetDidUpdate()

getSnapshotBeforeUpdate 在最后一次渲染（提交到DOM节点）之前调用，替换componentDidUpdate

1. 能在组件更改之前获取DOM节点信息。
2. 所有返回值都会作为参数传给 componentDidUpdate
3. 用法不常见，可能出现在UI处理中，如 以特殊方式处理滚动位置的聊天线程等。应返回 snapshot 的值（或null）

componentDidUpdate 在更新之后立即调用，首次渲染不会调用，之后每次重新渲染都会被调用。

1. 可以在该方法中调用setState，但是要包含在条件语句中
2. 组件更新后，可以在此处对DOM进行操作。

卸载：当组件从DOM中移除时会调用如下方法：

新旧生命周期相同：componentWillUnmount 。在组件卸载和销毁之前调用。

1. 执行不要的清理操作
2. componentWillUnmount() 中不应代用 setState()，因为该组件将援用不会重新渲染。组件实例卸载后，将永远不会再挂载它。