React的生命周期

react的生命周期分为三大周期,整理如图:

  1. 在挂载(创建)时
  • getDefaultProps(旧):定义默认属性数据。

  • getInitialState(旧):初始化默认状态数据。

  • componentWillMount(旧):组件即将被构建。已初始化数据,但没有渲染DOM。

  • constructor(props) :数据初始化。接收props和context。

  • static getDerivedStateFromProps(nextProps,prevState)(新):从props中获取state。适用于罕见用例,即当state的值任何时候都取决于props时。如果返回对象,更新state;返回null,不更新。

  • render:渲染组件。class组件中唯一必须实现的方法。

render会插入jsx生成的Dom树,react会生成虚拟Dom树。每次更新,react会根据其diff算法比较更新前后的新旧Dom树。之后,找到最小差异的Dom节点,并重新渲染。

render被调用时会检查this.props和this.state的变化,并返回以下类型之一:

(1)通过jsx创建的react元素

(2)数组或fragments(使render可返回多个元素)

(3)Protals:可以渲染子节点到不同的Dom树上

(4)字符串或数值类型:在Dom中会被渲染成文本节点

(5)布尔类型或null:什么都不渲染

  • componentDidMount:组件挂载后(插入到Dom树)立即调用。在此可以调用ajax、setState或添加订阅(需要在卸载之后取消点阅)

  1. 在更新(存在期)时
  • componentWillReceiveProps(nextProps)(旧):组件即将接收新的属性数据。即在已挂载的组件接收新的props前调用。

  • static getDirevedStateFromProps(nextProps,prevState)(新):替换componentWillReceivedProps

  • shouldComponentUpdate(nextProps,nextState):判断组件是否应该更新。在渲染前调用,默认返回true。主要用于性能优化。浅层比较。

  • componentWillUpdate(nextProps,nextState)(旧):组件即将更新。不能调用setState

  • render:渲染组件。

  • getSnapShotBeforeUpdate(prevProps,prevState)(新):在最后一次渲染(提交到Dom节点)前调用,替换componentWillUpdate。

会在组件更新前获取Dom节点的信息(如滚动位置),该方法返回的所用值都会作为参数传给componentDidUpdate中的第三个参数。该方法不常用,可用于UI处理中。

  • componentDidUpdate(prevProps,precState,snapshot):在更新之后立即调用。

首次渲染不会调用,之后的每次更新渲染都会被调用。可以使用setState,但要包含在if语句中,否则一直更新会造成死循环。可在此处对Dom操作(可以根据比较前后props,进行网络请求)。

  1. 在卸载(销毁期)时
  • componentWillUNmount:组件即将被卸载。

在组件卸载和销毁前调用。取消timer、订阅、监听。不应调用setState,该组件永远不会重新渲染。

  1. 从 Class 迁移到 Hook

生命周期方法要如何对应到 Hook?

  • constructor:函数组件不需要构造函数。可以通过调用 useState 来初始化 state。如果计算的代价比较昂贵,可以传一个函数给 useState。

  • getDerivedStateFromProps:改为 在渲染时 安排一次更新。

  • render:这是函数组件体本身。

  • componentDidMount, componentDidUpdate, componentWillUnmount:useEffect Hook 可以表达所有这些(包括 不那么 常见 的场景)的组合。

  • getSnapshotBeforeUpdate,componentDidCatch 以及 getDerivedStateFromError:目前还没有这些方法的 Hook 等价写法,但很快会被添加。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值