React 中 componentDidMount 和 componentWillMount 谁先执行完?

React生命 周期函数componentDidMount 和 componentWillMount 的执行时间

 1. 执行顺序

     componentWillMount函数肯定在componentDidMount之前运行,前者是文档加载前执行,后者是加载后执行。

 2.执行时间

     需要具体分析,方法里可能会有xhr请求、定时器多种效果影响,需要注意代码书写。

 3.谁先执行完?

    如果componentWillMount 使用了async方法,并且有Xhr请求,谁先执行完就不一定了。

    特殊情况下,可以在componentDidMount中判断状态,来判断是否componentWillMount已经执行完毕。而这个状态可以在componentWillMount中进行修改,达到目的。

    比如(如何判断):

1.在state中初始化一个状态,值为false

2.可在componentWillMount中修改这个状态,Ajax请求结束后 将它修改为true。

3.在 componentDidMount执行结束,或Ajax回调判断这个状态是true还是false。

    自我总结: componentWillMount函数一定会比componentDidMount先执行,但是不一定是它最先执行完。(今天工作遇到这个小bug,记录一下)

重要说明:一般场景不会遇到这个问题,componentWillMount 和 componentDidMount会有不同的场景处理不同逻辑,而且现在React >16.8,类组件方法已经逐步退出历史舞台,拥抱Hooks,告别传统写法。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: React v18 的 `componentWillMount` 生命周期已经被废弃,官方推荐使用 `componentDidMount` 代替。在 `componentDidMount` 执行的代码可以保证在组件挂载成后立即执行,而 `componentWillMount` 的代码则可能会在组件挂载前执行,因此使用 `componentDidMount` 更为安全可靠。 ### 回答2: 在React v18componentWillMount生命周期方法已被新的生命周期方法代替。在旧版本的ReactcomponentWillMount方法会在组件渲染前被调用,以便进行一些准备工作,例如初始化状态或进行网络请求等。然而,新的React版本已经引入了类似的生命周期方法来取代componentWillMount。 在React v18,代替componentWillMount方法的是新的生命周期方法`UNSAFE_componentWillMount`。这个新的方法与旧的方法类似,会在组件渲染前被调用。然而,React团队已经标记这个新的方法为不安全(UNSAFE),意味着它在未来的版本可能会被移除。因此,建议在新的开发不要使用`UNSAFE_componentWillMount`方法。 相反,React v18推荐使用的是`componentDidMount`方法来替代`componentWillMount`。`componentDidMount`方法会在组件渲染之后被调用,因此可以在这个方法进行需要在组件渲染毕后执行的操作,例如网络请求、订阅事件等。 总结来说,React v18推荐使用`componentDidMount`方法来代替`componentWillMount`方法,而`UNSAFE_componentWillMount`方法可以在旧的React代码使用,但不建议在新的开发使用。 ### 回答3: 在 React v18 componentWillMount 生命周期方法被新的生命周期方法取代了。新的生命周期方法是UNSAFE_componentWillMount。由于 React v17 开始将生命周期方法标记为 UNSAFE,以告知开发者在将来的版本可能会被移除或更改,所以在 React v18 继续使用 UNSAFE_componentWillMountcomponentWillMount 生命周期函数在组件渲染前调用,它是在 render 方法执行前最后一个被调用的方法。它通常被用于在组件被挂载到 DOM 前设置组件的一些初始状态或进行一些准备工作。 然而,由于 componentWillMount 方法存在一些限制和问题,React 团队决定废弃它并提供替代方案。主要原因是 componentWillMount 在服务器端渲染时会被调用两次,而且容易导致一些不一致的问题。 为了兼容之前的代码,React v18 引入了 UNSAFE_componentWillMount 方法。开发者可以继续在旧的生命周期方法编写代码,但应该尽早迁移到推荐的更安全的生命周期方法。 替代 componentWillMount 方法的推荐方法是使用 constructor 设置初始状态或在 componentDidMount 进行初始设置。constructor 是在组件实例化时第一个被调用的方法,适合用于设置初始状态。而 componentDidMount 在组件挂载到 DOM 后被调用,适合用于进行一些准备工作。 总之,React v18 componentWillMount 生命周期方法被 UNSAFE_componentWillMount 方法代替。开发者应尽早迁移到推荐的更安全的生命周期方法,如 constructor 或 componentDidMount
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值