React生命周期流程图及简述

淡淡的烟草味﹌ 2021-07-26 17:46 509阅读 0赞

### 1.概览 ###

React 16:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZHJpb3Nvcw_size_16_color_FFFFFF_t_70_pic_center]

*  页面初始化：constructor–>componentWillMount–>render–>componentDidMount
 *  父级数据更新：componentWillReceiveProps–>shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate
 *  组件数据更新：shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate
 *  强制更新：componentWillUpdate–>render–>componentDidUpdate

### 2.特点：（待完善） ###

*  绿色：页面加载后只走一次
 *  蓝紫色：父级数据更新会引发render
 *  黄紫色：子组件更新数据会引起render
 *  黑紫色：强制更新会跳过SCU，引发render

### 3.生命周期方法：（待完善） ###

<table> 
 <thead> 
  <tr> 
   <th>生命周期函数</th> 
   <th>函数参数及功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>render()</td> 
   <td>常用，唯一必须的生命周期</td> 
  </tr> 
  <tr> 
   <td>constructor(props)</td> 
   <td>常用，非必须，可以不用(不初始化状态和方法时)</td> 
  </tr> 
  <tr> 
   <td>componentDidMount()</td> 
   <td>常用，请求接口，挂载方法和定时器</td> 
  </tr> 
  <tr> 
   <td>componentDidUpdate(prevProps,prevState,shapshot)</td> 
   <td>常用，组件更新后调用，按需请求接口</td> 
  </tr> 
  <tr> 
   <td>componentWillUnmount</td> 
   <td>常用，卸载方法和销毁定时器</td> 
  </tr> 
  <tr> 
   <td>componentWillUpdate</td> 
   <td>更新前</td> 
  </tr> 
  <tr> 
   <td>shouldComponentUpdate(nextProps,nextState)</td> 
   <td>根据数据不同返回true/false而决定是否render</td> 
  </tr> 
  <tr> 
   <td>componentWillMount</td> 
   <td>设置定时器</td> 
  </tr> 
  <tr> 
   <td>componentWillUpdate(nextProps,nextState)</td> 
   <td>更新发生前的准备工作：定时器，网络请求</td> 
  </tr> 
  <tr> 
   <td>componentWillReceiveProps(nextProps)</td> 
   <td>接受最新的props，获取组件状态</td> 
  </tr> 
 </tbody> 
</table>

常用：

*  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()后的生命周期 ###

*  生命周期：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZHJpb3Nvcw_size_16_color_FFFFFF_t_70_pic_center 1]

### 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 ###

这俩篇幅过长，暂时不细说了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZHJpb3Nvcw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/44e028e625884eda84314b3888539841.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZHJpb3Nvcw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210726/c5f75bc9188e4811acc85cee539d62a6.png