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

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