React学习笔记五——组件的生命周期

桃扇骨 2022-10-09 12:07 191阅读 0赞

# 生命周期的理解 #

*  组件从创建到死亡会经历一些特定的阶段
 *  React组件中包含了一系列的钩子函数（生命周期回调函数），会在特定的时刻调用
 *  我们在定义组件时，会在特定的生命周期函数中，做特定的工作

# 组件的生命周期（旧） #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]  
**初始化挂载时按顺序触发的钩子函数**

1.  constructor–构造器
2.  componenetWillMount–组件将挂载
3.  render–页面渲染
4.  componenetDidMount–组件已挂载

**更改状态( setState() )时按顺序触发的钩子函数**

1.  shouldComponentUpdate–组件是否更新
2.  componentWillUpdate–组件将更新
3.  render–页面渲染
4.  componentDidUpdate–组件已更新

**强制更改( forceUpdate() )时按顺序触发的钩子函数**

1.  componentWillUpdate–组件将更新
2.  render–页面渲染
3.  componentDidUpdate–组件已更新

**组件接受props时按顺序触发的钩子函数**

1.  componentWillReceiveProps–组件将接收props
2.  shouldComponentUpdate–组件是否更新
3.  componentWillUpdate–组件将更新
4.  render–页面渲染
5.  componentDidUpdate–组件已更新

**卸载时触发的钩子函数**

1.  componenetWillUnmount–组件将卸载

> **延申知识点：通过setState()更改状态，但不重新渲染页面？**

shouldComponentUpdate(){ 
     return false
    }
    //此钩子函数返回false后，即使通过setState()更改状态，走到该函数时就结束了，
    //不会再往下执行，故不会执行render()函数，页面也不会被重新渲染

# 组件的生命周期（新） #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 1]  
**更改生命周期背景**

> React团队一直致力于实现异步渲染，探索中发现以下三个生命周期钩子经常会被误解和滥用；预计在异步渲染中，它们的潜在误用问题可能更大，因此会影响效率和性能，所以在新版本中为这些生命周期添加 “UNSAFE\_” 前缀，（这里的 “unsafe” 不是指安全性，而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug，尤其是在启用异步渲染之后。）  
> 1.componentWillMount  
> 2.componentWillReceiveProps  
> 3.componentWillUpdate  
> ***PS:以上三个钩子函数目前在新版本中还可以使用但是要带上“UNSAFE\_” 前缀；以后版本可能将会被弃用；***

**初始化挂载时按顺序触发的钩子函数**

1.  constructor–构造器
2.  getDerivedStateFromProps
3.  render–页面渲染
4.  componenetDidMount–组件已挂载

**更改状态( setState() )和组件接受props时按顺序触发的钩子函数**

1.  getDerivedStateFromProps
2.  shouldComponentUpdate–组件是否更新
3.  render–页面渲染
4.  getSnapshotBeforeUpdate
5.  componentDidUpdate–组件已更新

**强制更改( forceUpdate() )时按顺序触发的钩子函数**

1.  getDerivedStateFromProps
2.  render–页面渲染
3.  getSnapshotBeforeUpdate
4.  componentDidUpdate–组件已更新

**卸载时触发的钩子函数**

*  componenetWillUnmount–组件将卸载

# 旧生命周期和新生命周期的区别 #

*  旧生命周期即将弃用三个生命周期钩子，分别是：componentWillMount、componentWillReceiveProps、componentWillUpdate
 *  新生命周期新增了两个生命周期钩子，分别时：getDerivedStateFromProps、getSnapshotBeforeUpdate

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/bec5cfecf6054d8aa42657b0fa56e531.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/431516972b564450b91884833bc00cf9.png