资讯专栏INFORMATION COLUMN

React componentwillmount和componentdidmount请求数据

callmewhy / 1875人阅读

摘要:清楚调用顺序的问题这个方法正确调用的时候是在第一次之前所以第一眼看上去觉得就应该在这里去但是这里有个问题在异步请求数据中这一次返回的是空数据因为是异步的请求需要时间但不会等你慢慢请求所以在渲染的时候没有办法等到数据到来正确的处理方式就不要在

1.清楚调用顺序

2.componentWillMount的问题

这个方法正确调用的时候是在component第一次render之前,所以第一眼看上去觉得就应该在这里去fetch datas.
但是这里有个问题,在异步请求数据中这一次返回的是空数据(null),因为是异步的,请求需要时间,但render不会等你慢慢请求.所以在渲染的时候没有办法等到数据到来.正确的处理方式就不要在这里请求数据,而是让组件的状态(state)在这里正确的初始化.
顺便说一句在es6中,使用extend component的方式里的constructor函数和componentWillMount是通用的作用,所以你在构造函数里初始化了组件的状态就不必在WillMount做重复的事情了.

3.componentdidmount的优点

componentDidMount呢?这个生命周期函数在是在render之后调用一次,component已经初始化完成了.

在生产时,componentDidMount生命周期函数是最好的时间去请求数据,其中最重要原因:使用componentDidMount第一个好处就是这个一定是在组件初始化完成之后,再会请求数据,因此不会报什么警告或者错误,我们正常请教数据完成之后一般都会setState.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101489.html

相关文章

  • react 生命周期

    摘要:一个组件的生命周期分为三个部分实例化存在期和销毁时。如果回调函数以函数的方式来指定,那么在组件更新的时候回调会被调用次。 一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。 实例化阶段 客户端渲染时,如下依次被调用 getDefaultProps() getInitialState() componentWillMount() render() component...

    Fundebug 评论0 收藏0
  • React 深入系列4:组件的生命周期

    摘要:因为是深入系列文章,本文不会仔细介绍每个生命周期方法的使用,而是会重点讲解在使用组件生命周期时,经常遇到的疑问和错误使用方式。父组件发生更新导致的组件更新,生命周期方法的调用情况同上所述。 React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。 组件是构建React应用的基本单位,组件需要具备数据...

    alexnevsky 评论0 收藏0
  • React 深入系列4:组件的生命周期

    摘要:因为是深入系列文章,本文不会仔细介绍每个生命周期方法的使用,而是会重点讲解在使用组件生命周期时,经常遇到的疑问和错误使用方式。父组件发生更新导致的组件更新,生命周期方法的调用情况同上所述。 文:徐超,《React进阶之路》作者授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深...

    warnerwu 评论0 收藏0
  • React Component Lifecycle

    摘要:例如一个婴儿在出生前和出生后,这是两个不同的阶段。主要是在更新前,最后一次修改,而不会触发重新渲染。组件更新的整个过程控制台打印第一个是初始化调用的,不是更新的过程。 概述 我们先来理一理React的生命周期方法有哪些: componentWillMount 渲染前调用一次,这个时候DOM结构还没有渲染。 componentDidMount 渲染完成后调用一次,这个时候DOM结构已经渲...

    alphahans 评论0 收藏0
  • 简单谈谈我理解的React组件生命周期

    摘要:用处你在组建中所有的移除所有组建中的监听生命周期父子组件渲染顺序父组件代码引入子组件子组件代码浏览器中的执行结果如下图结论所以在的组件挂载及过程中,最底层的子组件是最先完成挂载及更新的。 原文首发在我的个人博客:欢迎点此访问我的个人博客 学了一段时间的react了,现在对自己学习的react的生命周期做一个简单总结(如有错误请留言指正,谢谢) react一共有如下几个生命周期函数 c...

    lowett 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<