props 变化导致新一次数据请求和页面展示更新效果在 react 新生命周期中的处理

最新推荐文章于 2024-09-25 10:46:15 发布

SarinaDu

最新推荐文章于 2024-09-25 10:46:15 发布

阅读量3k

点赞数 1

分类专栏： react typescript 文章标签： react typescript

本文链接：https://blog.csdn.net/m0_37148591/article/details/90371665

版权

本文探讨了一个React应用的需求，即当props变化时触发数据请求并更新页面。在旧版React中，通常使用componentWillReceiveProps生命周期方法，但随着React的更新，此方法已被取代。文章提出在getDerivedStateFromProps中处理该逻辑不再适用，而是选择在componentDidUpdate中进行数据获取和页面更新，尽管这种方法作者感觉有些不妥，但鉴于项目进度，暂时采用此方案。

摘要由CSDN通过智能技术生成

前言

日常积累，欢迎指正

正文

需求

有这样一个需求： props.planId 修改就要触发 getPlanDetailByPlanId(planId : string|number) 当然会相应有一个 state.data ,在 get 方法中根据 id 请求到正确的数据后再 setState({data}) 就能实现页面正确结果的显示啦！

处理思路

在 react 未更新的版本中这种情况在生命周期方法 componentWillReceiveProps 中处理，但在新生命周期中我们不再使用这个方法，初学 react 新生命周期时我们一般都会了解到有一个用于替代 componentWillReceiveProps 的生命周期方法 static getDerivedStateFromProps() 所以马上想到在这个方法里面触发编写的 getPlanDetailByPlanId 方法。

但是请注意生命周期方法 getDerivedStateFromProps 的修饰符 static,之前的思路就行不通了，那到底该怎么处理呢？我目前的解决办法是在 shouldComponentUpdate 方法中处理：