对react生命周期的了解

水深无声 2022-01-11 06:39 160阅读 0赞

React中组件有生命周期，我们会将组件的生命周期分为四个阶段，初始化、运行中、销毁、错误处理(16.3之后)

生命周期钩子函数不能写成箭头函数。

## 生命周期四个阶段 ##

### **初始化** ###

在组件初始化阶段会执行

1.  constructor
2.  static getDerivedStateFromProps()
3.  componentWillMount() / UNSAFE\_componentWillMount()
4.  render()
5.  componentDidMount()

### **运行** ###

`props`或`state`的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：

1.  componentWillReceiveProps() / UNSAFE\_componentWillReceiveProps()
2.  static getDerivedStateFromProps()
3.  shouldComponentUpdate() // react性能优化第二方案
4.  componentWillUpdate() / UNSAFE\_componentWillUpdate()
5.  render()
6.  getSnapshotBeforeUpdate()
7.  componentDidUpdate()

### **销毁** ###

1.  componentWillUnmount()

### **错误处理** ###

1.  componentDidCatch()

## 生命周期图 ##

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

## 各生命周期详解 ##

### constructor ###

1.  通过super来继承父类身上传递过来的值，让子类通过this.props接收值。
2.  用来初始化一个状态。
3.  初始化绑定一个方法，将this传递给这个方法。this.change = this . change.bind(this) 注意：change是个方法名字 。
4.  constructor 钩子函数中不能使用带副作用的代码。

### componentWillMount() ###

1.  提供一次数据修改机会
2.  数据请求 fetch axios

### render() ###

1.  计算this.prop this.state\*
2.  返回一种类型\*

*1. React元素。通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。*

*2. 字符串或数字。他们将会以文本节点形式渲染到dom中。*

*3. Portals【'portl】。react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置。*

*4. null，什么也不渲染*

*5. 布尔值。也是什么都不渲染。*

1.  render()方法必须是一个纯函数，他不应该改变state，也不能直接和浏览器进行交互，应该将事件放在其他生命周期函数中。\*

4. 如果shouldComponentUpdate()返回false，render()不会被调用。\*

5. jsx->vdom 对象\*

### componentDidMount() ###

组件挂载结束

1. 数据请求

2. 数据修改

3. 将render函数生成的vdom对象渲染成真实dom,然后挂载在 id 为 root 的容器中

### componentWillReceiveProps() ###

触发： 属性发生改变，就会触发

这个钩子函数一定能监听到整个当前组件的属性变化 — > 当前组件的路由我们也可以监听到

### shouldComponentUpdate() ###

决定组件是否更新

返回值true,更新

返回值false,不更新

默认值是true

这个钩子是React性能优化的关键钩子

## componentWillUpdate() ##

组件即将更新，生成新的DOM。

## componentDidUpdate() ##

组件更新结束。

1.数据更新

2.DOM操作

3.接收getSnapshotBeforeUpdate() 第三方参数作为返回值

## componentWillUnmount() ##

销毁

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70]: /images/20220111/5a3ca034b79247a7a3590b99188de9c7.png