首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用getDerivedStateFromProps获取API数据会导致组件多次呈现。

问题:使用getDerivedStateFromProps获取API数据会导致组件多次呈现。

回答: getDerivedStateFromProps是React生命周期函数之一,用于根据传入的props和state计算并返回新的state。它在组件实例化、接收到新的props或者调用forceUpdate()时被调用。

使用getDerivedStateFromProps获取API数据可能会导致组件多次呈现的原因是,每次父组件传入新的props时,getDerivedStateFromProps都会被触发,而获取API数据是一个异步操作,可能需要一些时间来获取数据。因此,在这段时间内,父组件可能会多次传入props,导致多次触发getDerivedStateFromProps,从而引起组件的多次呈现。

解决这个问题的方法有多种,下面提供一种常用的做法:

  1. 在组件实例化时,初始化一个空的状态变量,例如data。
  2. 在getDerivedStateFromProps中,判断传入的props是否有变化,如果有变化且符合获取API数据的条件,则发起获取API数据的请求,并将数据更新到状态变量中。
  3. 在组件的render方法中,根据状态变量data来渲染组件的内容。

这样做的好处是,通过判断props是否有变化,可以避免无谓的API数据获取请求,减少不必要的组件渲染。同时,由于获取API数据是一个异步操作,可以通过显示loading状态或者其他优化手段来提升用户体验。

推荐的腾讯云相关产品:

  • 云函数(Serverless计算服务):腾讯云云函数是一种无需管理服务器即可运行代码的事件驱动计算服务,可以用于快速处理API数据获取请求,并提供高可靠性和可扩展性。详情请参考:腾讯云云函数产品介绍
  • 云数据库MySQL版:腾讯云云数据库MySQL版是一种基于分布式架构的关系型数据库服务,可用于存储和管理获取的API数据。详情请参考:腾讯云云数据库MySQL版产品介绍
  • 云存储(对象存储):腾讯云云存储是一种存储海量文件的分布式存储服务,可用于存储多媒体数据等。详情请参考:腾讯云云存储产品介绍

以上只是腾讯云提供的部分相关产品,更多产品和详情可以参考腾讯云官方网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

谈谈新的 React 新的生命周期钩子

React 的生命周期 API 一直以来十分稳定,但是当 React 团队在引入异步渲染机制的时候,发现之前的生命周期会的使用产生一些问题,所以才会改动生命周期 API,感兴趣的可以看这篇博客。...为何移除 componentWillMount 因为在 React 未来的版本中,异步渲染机制可能导致单个组件实例可以多次调用该方法。...Listener,更有可能导致内存泄漏 发出重复的异步网络请求,导致 IO 资源被浪费 在服务端渲染时,componentWillMount 会被调用,但是因忽略异步获取数据而浪费 IO 资源 现在...和 componentDidUpdate 执行前后可能间隔很长时间,足够使用户进行交互操作更改当前组件的状态,这样可能导致难以追踪的 BUG。...和 componentDidUpdate 配合使用时将组件临时的状态数据存在组件实例上浪费内存,getSnapshotBeforeUpdate 返回的数据在 componentDidUpdate 中用完即被销毁

1K20
  • 前端开发常见面试题,有参考答案

    被废弃的三个函数都是在render之前,因为fber的出现,很可能因为高优先级任务的出现而打断现有任务导致它们会被执行多次。...,如果在 willMount 中订阅事件,但在服务端这并不会执行 willUnMount事件,也就是说服务端导致内存泄漏所以componentWilIMount完全可以不使用,但使用者有时候难免因为各...这样做一来破坏 state 数据的单一数据源,导致组件状态变得不可预测,另一方面也增加组件的重绘次数。...使用了 Redux,所有的组件都可以从 store 中获取到所需的 state,他们也能从store 获取到 state 的改变。这比组件之间互相传递数据清晰明朗的多。...什么是受控组件和非受控组件受控组件: 没有维持自己的状态 数据由付组件控制 通过props获取当前值,然后通过回调函数通知更改非受控组件 保持这个自己的状态 数据有DOM控制 refs用于获取其当前值

    1.3K20

    第三篇:为什么 React 16 要更改组件的生命周期?(下)

    getDerivedStateFromProps 里面做任何类似于 this.fetch()、不合理的 this.setState(导致死循环的那种)这类可能产生副作用的操作。...这个需求的前半截要求我们对比更新前后的数据(感知变化),后半截则需要获取真实的 DOM 信息(获取位置),这时用 getSnapshotBeforeUpdate 来解决就再合适不过了。...componentWillMount 结束后,render 迅速地被触发,所以说首次渲染依然会在数据返回之前执行。...这样做不仅没有达到你预想的目的,还会导致服务端渲染场景下的冗余请求等额外问题,得不偿失。 2. 在 Fiber 带来的异步渲染机制下,可能导致非常严重的 Bug。...但实际却可能因为 componentWillxxx 被打断 + 重启多次多次调用付款接口,最终付了 50 块钱;又或者你可能习惯在 componentWillReceiveProps 里操作 DOM

    1.2K20

    React生命周期简单分析

    在服务端渲染时 componentDidMount 是不会被调用的,只会调用componentWillMount. 2.在componentWillMount中, 我们一般会用来异步获取数据, 但是在新版生命周期中...如果需要从远端加载数据的话, 推荐在这个方法中初始化 由于这个方法发生初始化挂载render方法之后, 因此在这个方法中调用setState()导致一次额外的渲染, 只不过这次渲染会发生在浏览器更新屏幕之前...这样做一来破坏 state 数据的单一数据源,导致组件状态变得不可预测,也增加组件的重绘次数. // App.jsx // 在其中添加上static getDerivedStateFromProps...另外,虽然this.setState()也导致组件重新渲染,但并不会导致这个方法的重新调用....要使用context的数据,我们需要使用Consumer组件 // 数据提供者 class App extends React.Component { render() {

    1.2K10

    React 特性剪辑(版本 16.0 ~ 16.9)

    开启 Fiber 后,获取异步数据的方法应放到 render 后面的生命周期钩子里(phase 2 阶段)进行, 因为 render 前面的生命周期钩子(phase 1阶段)会被执行多次 注意:...在此之前的实现方式是 react-loadable 并发模式(16.8, 2019 年 Q2 季度): 在文件懒加载的同时能做其它交互; data fetching(16.9 版本, 2019 年中): 数据动态呈现...Context(16.3、16.6) Context 相当于是用组件化的方式使用 global, 使用其可以共享认证的用户、首选语言(国际化)等一些全局的信息, 而不必通过组件一层层传递。...基于以下两点考虑: 服务端渲染: 在服务端渲染的情景下, componentWillMount 执行完立马执行 render 导致 componentWillMount 里面执行的方法(获取数据,...): 移除这个 api 基于如下考虑: 语义不太契合逻辑 举个例子: 比如切换 tab 时都要重新获取当前页面的数据, 之前通常会这么做: componentWillReceiveProps(nextProps

    1.4K30

    React 组件性能优化——function component

    当 Tab 下的页面开始加载时,会去读取这个 参数,并且使用它去做一些请求,获取更多的信息进行渲染。 最初拿到这个需求时,我使用了 类组件 去开发,但实践过程中发现编写出的代码不易理解和管理。...另一个不好的 ( componentWillReceiveProps ) 上面的 中,导致我们必须使用 componentDidUpdate 的一个主要原因是,getDerivedStateFromProps...为此,我们不妨使用 componentWillReceiveProps 来实现,在获取到 props 的时候就能直接发起请求,并且 setState。...纯组件 api组件输入的数据进行浅层比较,如果当前输入的数据和上一次相同,那么组件就不会重新渲染。...2.2. useCallback 在函数组件中,当 props 传递了回调函数时,可能引发子组件的重复渲染。当组件庞大时,这部分不必要的重复渲染将会导致性能问题。

    1.5K10

    React 组件性能优化——function component

    当 Tab 下的页面开始加载时,会去读取这个 参数,并且使用它去做一些请求,获取更多的信息进行渲染。 最初拿到这个需求时,我使用了 类组件 去开发,但实践过程中发现编写出的代码不易理解和管理。...另一个不好的 ( componentWillReceiveProps ) 上面的 中,导致我们必须使用 componentDidUpdate 的一个主要原因是,getDerivedStateFromProps...为此,我们不妨使用 componentWillReceiveProps 来实现,在获取到 props 的时候就能直接发起请求,并且 setState。...纯组件 api组件输入的数据进行浅层比较,如果当前输入的数据和上一次相同,那么组件就不会重新渲染。...2.2. useCallback 在函数组件中,当 props 传递了回调函数时,可能引发子组件的重复渲染。当组件庞大时,这部分不必要的重复渲染将会导致性能问题。

    1.5K10

    你需要的react面试高频考察点总结

    总结:跟服务器端渲染(同构)有关系,如果在componentWillMount里面获取数据,fetch data执行两次,一次在服务器端一次在客户端。...或收集项中的其他唯一字符串: {todos.map((todo) => {todo.text} )};在集合中添加和删除项目时,不使用键或将索引用作键导致奇怪的行为...时,就可以考虑使用getDerivedStateFromProps来进行替代。...React-intl提供了两种使用方法,一种是引用React组件,另一种是直接调取API,官方更加推荐在React项目中使用前者,只有在无法使用React组件的地方,才应该调用框架提供的API。...}}函数组件是无状态的(同样,小于 React 16.8版本),并返回要呈现的输出。

    3.6K30

    React生命周期深度完全解读

    但是它会破坏 props 数据的单一数据源。在首次渲染组件时,不会调用此生命周期钩子;使用 this.setState 触发组件更新时,也不会调用此生命周期钩子。...不过要注意:如果是父组件渲染导致组件的重新渲染,即使传给该组件的 props 没变,该组件中的这个生命周期函数也会被调用。我们一般不使用此生命周期函数,因为它通常会破坏数据源的单一性。...不过注意:它并不会阻止子组件因为 state 改变而导致的更新。使用场景:这个生命周期方法通常用来做性能优化。...而这导致的问题就是:在 render 阶段执行的生命周期函数可能被执行多次。...父子组件生命周期函数调用顺序接下来我们来探究一下 React 中父子组件生命周期函数的执行顺序。由不同的原因导致组件渲染,React 执行不同的生命周期函数。

    1.7K21

    React Async Rendering

    一.渐进迁移计划 启用Fiber最大的难题是关键的变动破坏现有代码,这个breaking change主要来自组件生命周期的变化: // 第1阶段 render/reconciliation componentWillMount...(引自生命周期hook | 完全理解React Fiber) 一般道德约束render是纯函数,因为明确知道render会被多次调用(数据发生变化时,再render一遍看视图结构变了没,确定是否需要向下检查...componentDidMount里发就好了,算是实践原则,不要在componentWillUnmount里发请求,之前是因为对SSR不友好,而现在有2个原因了 注意,如果是为了尽早发请求(或者SSR下希望在render之前同步获取数据...)的话,可以挪到constructor里做,同样不会多次执行,但大多数情况下(SSR除外,componentDidMount不触发),componentDidMount也不慢多少 另外,将来提供一个suspense...开启Async Rendering后可能造成多次监听,同样存在内存泄漏风险 这样写是因为一般认为componentWillMount和componentWillUnmount是成对儿的,但在Async

    1.5K60

    React生命周期

    (render函数和didMount函数的执行时间),但是为什么我们还要在didMount中获取数据 如果使用服务端渲染的话,willMount会在服务端和客户端各自执行一次,这会导致请求两次(接受不了...constructor代替willMount 为什么要改变生命周期 从上面的生命周期的图中可以看出,被废弃的三个函数都是在render之前,因为fiber的出现,很可能因为高优先级任务的出现而打断现有任务导致它们会被执行多次...首先这个函数的功能完全可以使用componentDidMount和constructor来代替,异步获取数据的情况上面已经说明了,而如果抛去异步获取数据,其余的即是初始化而已,这些功能都可以在constructor...中执行,除此之外,如果我们在willMount中订阅事件,但在服务端这并不会执行willUnMount事件,也就是说服务端导致内存泄漏 所以componentWillMount完全可以不使用,但使用者有时候难免因为各种各样的情况...这样做一来破坏 state 数据的单一数据源,导致组件状态变得不可预测,另一方面也增加组件的重绘次数。

    1.8K60

    React16废弃的生命周期和新的生命周期

    will: componentWillMount componentWillReceiveProps componentWillUpdate 废弃的原因:是在React16的Fiber架构中,调和过程多次执行...此外,多次执行,在周期中如果有setState或dom操作,触发多次重绘,影响性能,也导致数据错乱。 2....React16的2个新的生命周期: getDerivedStateFromProps getSnapshotBeforeUpdate 2.1 getDerivedStateFromProps的用法 这个周期很难用...: 触发时机频繁,16.3是在props变化时触发,16.4则改为在每次组件渲染器调用,即无论props变化,组件自己setState,父组件render 都会触发 静态方法,本意是隔离访问组件实例,却造成访问组件数据和方法十分不便...,难以进行数据比较 不能setState,而是返回一个对象来更新state,使用不便,也可能触发多次更新状态 当组件实例化的时候,这个方法替代了componentWillMount(),而当接收到新的

    1.6K30

    浅谈 React 生命周期

    例如,实现 组件可能很方便,该组件会比较当前组件与下一组件,以决定针对哪些组件进行转场动画。 派生状态导致代码冗余,并使组件难以维护。...如果只想在 「prop 更改时重新计算某些数据」,请使用 memoization helper 代替。...如需通过网络请求获取数据,此处是实例化请求的好地方。 这个方法是比较适合添加订阅的地方。如果添加了订阅,请不要忘记在 componentWillUnmount() 里取消订阅。...,导致 UI 界面多次更改渲染,这是绝对要避免的问题。...而如果开发者在这些函数中运行了副作用(或者操作 DOM),那么副作用函数就有可能会被多次重复执行,带来意料之外的严重 bug。

    2.3K20

    React面试之生命周期与状态管理

    这个机制一定程度上的影响了部分生命周期的调用,并且也引入了新的 2 个 API 来解决问题。 在之前的版本中,如果你拥有一个很复杂的复合组件,然后改动了最上层组件的 state,那么调用栈可能很长。...// 组件挂载后调用 // 可以在该函数中进行请求或者订阅 componentDidMount() {} // 用于获得最新的 DOM 数据 getSnapshotBeforeUpdate...() {} // 组件更新后调用 componentDidUpdate() {} // 渲染组件函数 render() {} // 以下函数不建议使用 UNSAFE_componentWillMount...API,但是它存在一些问题,可能导致犯错,核心原因就是因为这个 API 是异步的。...setState异步的原因我认为在于,setState 可能导致 DOM的重绘,如果调用一次就马上去进行重绘,那么调用多次就会造成不必要的性能损失。

    29940
    领券