[生命周期]React生命周期流程图及简述

这次趁着学习React过一下生命周期，主要是参考了官网生命周期的内容然后加了些自己的理解，做个学习记录，后续可能会继续完善相关内容

1.概览

React 16:

页面初始化：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而决定是否rendercomponentWillMount设置定时器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()后的生命周期

生命周期：

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生命周期具体使用方法及常见相关面试题，敬请期待