目录
React New Component Lifecycle【新生命周期】
为什么Fiber Reconciler要有新的生命周期函数呢？
扩展学习资料
| 名称 | 链接 |
| React 组件 | |
| React v16.3 组件生命周期 | |
| React 组件图 |
React New Component Lifecycle【新生命周期】
掌握新的组件生命周期，在老的生命周期组件中进行更新代码。
React 组件新生命周期详解
React组件老生命周期 v15.x
- Initialization【初始化】：state的初始化；及props是否转化为state；setup；
- Mounting【挂载过程】：componentWillMount()【新版删除1】->render()->componentDidMount()
- Updation【业务更新】：（props【父级传递的props更新；被动更新】）=>componentWillReceiveProps()【新版删除2】->shouldcomponentUpdate(){return true}-> componentWillUpdate()【新版删除3】->render()->componentDidUpdate();(states【主动调用setState更新】)=>shouldcomponentUpdate(){return true}-> componentWillUpdate()【新版删除3】->render()->componentDidUpdate()
- Unmounting【卸载过程】：componentWillUnmount
为什么Fiber Reconciler要有新的生命周期函数呢？
答：1.Fiber Reconciler中为了在没有更新前再次混入更新任务导致Fiber更新整个流程有点混乱；为了适配Fiber Reconciler就取消了在更新前可以再次触发更新的操作。
(有部分同学会在componentWillMount中setState；异步请求)
Fiber Reconciler要求对组件的生命周期，至少在更新前做到要纯函数行为。【不能写入异步的操作，影响更新流程】
2.我们之前并不是Fiber Reconciler中导致的，在刚开始接触React的时候会有大部分同学，会在componentWillMount进行set相关操作（setState，进行初始化redux操作，以及调用接口异步操作）【应该写在构造函数constructor中】,不然会多进行一遍vDom diff；
另一个就是componentWillUpdate中进行setState操作【不带任何条件的操作】，相当于触发了一个无线循环。
总结：基于这两点，一个是我们在老的生命周期中对一些方法的滥用，以及为了适配Fiber Reconciler当中更新前的一些流程处理，是为了我们后面的异步渲染做准备，所以React16.x之后就更新了新的生命周期函数。
新的组件生命周期
React v16.3版本
static getDerivedStateFromProps(props, state)【替换componentWillReceiveProps】、static getSnapshotBeforeUpdate【静态方法,静态方法中不能调用this】
1.挂载时：constructor()【构造函数】->getDerivedStateFromProps()【新增1】->render()->React更新DOM和refs->componentDidMount()
2.更新时：New Props触发更新 =>getDerivedStateFromProps()【新增1】->shouldComponentUpdate(){return true}->render()->getSnapshotBeforeUpdate()【新增2】->React更新DOM和refs->componentDidUpdate()
setState()触发更新=>shouldComponentUpdate(){return true}->render()->getSnapshotBeforeUpdate()【新增2】->React更新DOM和refs->componentDidUpdate()
forceUpdate()触发更新=>render()->getSnapshotBeforeUpdate()【新增2】->React更新DOM和refs->componentDidUpdate()
3.卸载时：componentWillUnmount()
“Rebder（更新）阶段【render()方法之前】”：纯净【纯函数】且不包含副作用【重新触发setState、异步请求、redux更新】。可能会被React暂停，中止或重新启动。
“Pre-commit阶段”：可以读取DOM
“Commit阶段”：可以使用DOM，运行副作用，安排更新。
React v16.4版本【通常用的v16.4版本】
与v13比
挂载阶段【constructor】和更新阶段【New Props，setState()，forceUpdate()】之后都会触发getDerivedStateFromProps()
getDerivedStateFromProps
是一个派生state，所有可能触发state变更的都会经过这个静态方法，主要是返回一个派生类的state
挂载阶段
挂载阶段的函数
- constructor 构造函数，初始化state，以及为事件处理函数绑定实例。【初始化数据】
- getDerivedStateFromProps (nextProps, state) { this === window } 新增的静态方法。返回一个新的state，或者是null（后续不更新）。
- render 渲染函数。
- componentDidMount 挂载成功后立即调用的函数。【副作用操作，调用fetch(接口数据)，绑定真实dom数据，如window.onresize,window.onscroll事件等】
更新阶段
更新阶段的函数
- getDerivedStateFromProps props变化或者state方法触发。
- shouldComponentUpdate 判断是否进行更新。【可以对UI更新逻辑进行优化】
- render 渲染函数。
- getSnapshotBeforeUpdate render方法之后调用，返回一个dom更改之前的快照，将配合后续的componentDidUpdate方法使用。
- componentDidUpdate(oldprops, oldstate) 更新后会被立即调用。如果设置了getSnapshotBeforeUpdate(),会多出一个componentDidUpdate(oldprops, oldstate，snapshot)；异步，进行setState操作，要进行条件判断，避免死循环更新，
卸载阶段
卸载阶段的函数
- componentWillUnmount 卸载函数，组件卸载及销毁之前直接调用。主要用于清除一些在组件生命周期订阅，真实DOM事件以及setTimeout/setInterval的返回值。【不做的话，可能会引起内存泄漏、溢出】
异常捕获
v16.x 异常捕获的函数【全局错误处理，后代组件异常处理】
- componentDidCatch(error,info) 生命周期方法在后代组件抛出错误后被调用。方法接收两个参数(error,info),分别是错误信息和错误组件的栈信息。；做一些错误日志上传，错误信息，错误源。不推荐在这里修改state，处理UI页面展示。避免setState影响Fiber 协调
- getDerivedStateFromError(error) 在后代组件抛出错误后调用，接收一个参数(error)表示具体错误信息。做一些兼容错误页面，返回一些对象，控制页面元素，用户体验更好，是否出现不可抗性错误。新增的静态类型，返回一个派生类的state，建议在这里修改state进行页面处理
v15.x之前的处理方案：
1.关键代码加try{}catch(e){}包裹
2.监听window.onerror方案。也可以通过window.addEventListener("error", function(evt){})
3.react 提供的一个内置捕获错误方法：unstable_handleError；没有正式对外宣布过，并不是一个标准的稳定的方法
新版组件升级
升级组件版本
- componentWillMount
- render方法之前调用，在此调用setState并不会触发再次渲染。
- 通常会在这个方法中进行页面标题的一些修改以及其他与再次render不相关的操作。
- UNSAFE_componentWillMount（不推荐用这个替换componentWillMount）
- 与state相关的操作挪到constructor方法中执行。
- 异步操作挪到componentDidMount中执行。
- componentWillUpdate
- 在组件收到新的props或者state时，会在渲染之前调用。
- 方法内不能调用setState，触发循环，内存泄漏。
- UNSAFE_componentWillUpdate（官方保留方法，不推荐使用）
- 应该在shouldComponentUpdate中判断是否更新。
- componentWillReceiveProps
- 接收父级组件传递过来最新的props，转化为组件内的state。
- 判断是否进行更新或者执行异步请求数据。
- UNSAFE_componentWillReceiveProps（官方保留方法，不推荐使用）
- 与渲染相关的props直接渲染，不需要处理为组件内state。
- 异步数据请求在componentDidUpdate中处理。
- getDerivedStateFromProps方法替换，需要考虑生命周期的执行顺序。【挂载阶段【constructor】和更新阶段【New Props，setState()，forceUpdate()】之后都会触发getDerivedStateFromProps()】
APP.js
import React, { Component } from "react";
import NewCycle from "./component";
import "./styles.css";
const mockList = [
{
key: 1,
text: "这是列表项-1"
},
{
key: 2,
text: "这是列表项-2"
},
{
key: 3,
text: "这是列表项-3"
},
{
key: 4,
text: "这是列表项-4"
}
];
export default class App extends Component {
// let cycleList = [];
state = {
cycleList: []
};
// const [cycleList, setCycleList] = useState([]);
queryList = () => {
this.setState({
cycleList: mockList
});
};
render() {
return (
<div className="App">
<NewCycle
cycleList={this.state.cycleList}
queryListCB={this.queryList}
/>
</div>
);
}
}component.js
import React, { Component } from "react";
import shallowequal from "shallowequal";// 开源第三方库，shallowequal比较值相等，或者对象含有相同的属性、且属性值相等
export default class NewCycle extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
parentList: []
};
}
/*
UNSAFE_componentWillReceiveProps(nextProps) {
if (!shallowequal(this.props, nextProps)) {
const { cycleList } = nextProps;
this.setState({
list: cycleList.map(item => ({
...item,
label: "origin" // 组件内部要调用一些逻辑
}))
});
}
}
componentDidUpdate(prevProps, prevState) {
// console.log(prevProps, prevState, this.props, this.state);
// 比getDerivedStateFromProps晚一些，更新完成之后才触发
if (!shallowequal(this.props, prevProps)) {
const { cycleList } = this.props;
this.setState({
list: cycleList.map((item) => ({
...item,
label: "标题"
}))
});
}
}
*/
static getDerivedStateFromProps(props, state) {// newprops,oldstate
// 触发时机有4种，要做好兼容判断
const { cycleList } = props;
const { parentList } = state;
/**
* prueComponent 在这里如果返回有数据的对象，
* shouldComponentUpdate 会返回true
* 最好是不要再用state来控制
*/
// 初始化不执行 &&
if (cycleList.length > 0 && !shallowequal(cycleList, parentList)) {
return {
list: cycleList.map((item) => ({
...item,
label: "标题"
})),
parentList: cycleList
};
}
return null;
}
queryList = () => {
const { queryListCB } = this.props;
if (typeof queryListCB === "function") {
queryListCB();
}
};
render() {
const { list } = this.state;
return (
<div>
{list.map(item => (
<div key={item.key}>
{item.label}-{item.text}
</div>
))}
<button onClick={this.queryList}>按钮</button>
</div>
);
}
}升级组件遍布-保留选项
老工程代码量很多，改动特别麻烦。需要回归的点非常多！怎么解决？
npx react-codemod rename-unsafe-lifecycles
// 此方法会给需要添加'UNSAFE_'的方法加上它。 此时版本为【v16.x】 (v15.x < v16.x < v17)
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
