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

本文介绍了React 16组件的生命周期,包括初始化、更新、卸载阶段的关键方法,如constructor、render、componentDidMount、shouldComponentUpdate、componentDidUpdate等。探讨了生命周期中的性能优化策略,并提醒开发者避免在不适当的方法中执行副作用操作。同时,文章提到了新旧版本生命周期方法的变化,以及如何使用getDerivedStateFromProps进行状态更新。最后,简要提及了默认属性 defaultProps 和组件显示名称 displayName 的用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这次趁着学习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而决定是否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()后的生命周期

  • 生命周期:

在这里插入图片描述

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值