这次趁着学习React过一下生命周期，主要是参考了官网生命周期的内容然后加了些自己的理解，做个学习记录，后续可能会继续完善相关内容
1.概览
React 16:
旧版生命周期.jpg
- 页面初始化：constructor-->componentWillMount-->render-->componentDidMount
- 父级数据更新：componentWillReceiveProps-->shouldComponentUpdate-->componentWillUpdate-->render-->componentDidUpdate
- 组件数据更新：shouldComponentUpdate-->componentWillUpdate-->render-->componentDidUpdate
- 强制更新：componentWillUpdate-->render-->componentDidUpdate
2.特点：（待完善）
- 绿色：页面加载后只走一次
- 蓝紫色：父级数据更新会引发render
- 黄紫色：子组件更新数据会引起render
- 黑紫色：强制更新会跳过SCU，引发render
3.生命周期方法：（待完善）
| 生命周期函数 | 函数参数及功能 |
|---|---|
| render() | 常用，唯一必须的生命周期 |
| constructor(props) | 常用，非必须，可以不用(不初始化状态和方法时) |
| componentDidMount() | 常用，请求接口，挂载方法和定时器 |
| componentDidUpdate(prevProps,prevState,shapshot) | 常用，组件更新后调用，按需请求接口 |
| componentWillUnmount | 常用，卸载方法和销毁定时器 |
| componentWillUpdate | 更新前 |
| shouldComponentUpdate(nextProps,nextState) | 根据数据不同返回true/false而决定是否render |
| componentWillMount | 设置定时器 |
| componentWillUpdate(nextProps,nextState) | 更新发生前的准备工作：定时器，网络请求 |
| componentWillReceiveProps(nextProps) | 接受最新的props，获取组件状态 |
常用：
-
render()
- 多种返回值：节点，字符串或数字，数组
- 纯函数，不应该修改组件状态，不与浏览器交互
-
constructor(props)
- constructor是非必须的
- 只有在construcor里可以直接设置this.state，不能用
this.setState - 避免在构造函数中引入任何副作用或订阅。
- 不要这样写：会产生bug：props.color更新时color不变(除非你本意就是不想让他变)，你可以直接使用this.props.color，
constructor(props) {
super(props);
// Don't do this!
this.state = { color: props.color };
}
-
componentDidMount()
- 在这里进行网络请求
- 如果绑定了事件和定时器等，记得在
componentWillUnmount()中解绑 - 这里可以使用
setState()，虽然会产生额外的render()但是用户看不出来。这样会导致性能问题所以最好慎用
-
componentDidUpdate(prevProps, prevState, snapshot)
看参数基本上就能推测出这是干嘛的了：旧的状态和旧的数据，比较参数，做一些逻辑梳理，比如接口请求
与componentDidMount一样，这里也可以使用
setState()，但是也是会产生性能损耗，如果要使用的话一定要做条件判断，不然死循环了第三个参数：snapshot是生命周期：
getSnapshotBeforeUpdate的返回值
componentDidUpdate(prevProps) {
// 典型用法，不要忘了比较porps
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
-
componentWillUnmount()
- 取消事件监听、清除定时器等
- 显然，这里不应该使用
setState()，用了也没用
不常用：用起来不难但是通常情况下不太需要，具体图示见这里
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
-
shouldComponentUpdate(nextProps,nextState)
- 性能优化用，不应该作为阻止render的手段
- 别使用JSON.stringify()，低效并且损耗性能
-
static getDerivedStateFromProps(props,state)
- 在render之前调用
- 用于props随着时间变化而变化的情况，例如transition
-
getSnapshotBeforeUpdate(prevProps,prevState)
- 获取DOM快照，返回值给componentDidUpdate的第三个参数使用
-
static getDerivedStateFromError(error)
- 组件出错时调用
-
componentDidCatch(error,info)
- 子组件引发错误时调用
旧版生命周期
- UNSAFE_componentWillMount()
- UNSAFE_componentWillReceiveProps(nextProps)
- UNSAFE_componentWillUpdate(nextProps,nextState)
4.使用getDerivedStateFromProps()后的生命周期
- 生命周期：
新生命周期.jpg
5.setState(),forceUpdate()
- setState()，需要说的比较多，暂时不讨论
- forceUpdate()，跳过shouldComponentUpdate强制更新，不需要定义可以直接调用，慎用
6.类属性：defaultProps,displayName,
- defaultProps:
class CustomButton extends React.Component {
// ...
}
CustomButton.defaultProps = {
color: 'blue'
};
如果没有 props.color 那么color会被设置为 blue
- displayName:用于调试消息
7.实例属性：props,state
这俩篇幅过长，暂时不细说了
下篇文章计划：
React生命周期具体使用方法及常见相关面试题，敬请期待
