资讯专栏INFORMATION COLUMN

React componentwillmount和componentdidmount请求数据

callmewhy / 1978人阅读

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

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 生命周期

    摘要:在使用组件的进行组件实例化时,得到的便是其返回值。也就是说,如果其子组件的或发生改变时,只会取决于那个组件的方法的返回值。文章为本人原创,原文见本人个博浅析生命周期一浅析生命周期二 Overview 最近常有学习React相关的技术,写了几个React的小Demo,使用 React/Express 技术栈。实在太小,羞于拿出来细说。React 的确是一个值得追随的技术。但React体系...

    lansheng228 评论0 收藏0

发表评论

0条评论

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