zoukankan      html  css  js  c++  java
  • react异步数据如ajax请求应该放在哪个生命周期?

    react请求接口数据是在componentDidMount 还是componentWillMount周期好?React数据获取为什么一定要在componentDidMount里面调用?

    对于同步的状态改变,是可以放在componentWillMount,对于异步的,最好好放在componentDidMount。但如果此时有若干细节需要处理,比如你的组件需要渲染子组件,而且子组件取决于父组件的某个属性,那么在子组件的componentDidMount中进行处理会有问题:因为此时父组件中对应的属性可能还没有完整获取,因此就让其在子组件的componentDidUpdate中处理。

    至于为什么,先看看react的生命周期:

    constructor() 》componentWillMount() 》render() 》componentDidMount()

    上面这些方法的调用是有次序的,由上而下,也就是当说如果你要获取外部数据并加载到组件上,只能在组件"已经"挂载到真实的网页上才能作这事情,其它情况你是加载不到组件的。

    componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重渲染。所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。

    constructor被调用是在组件准备要挂载的最一开始,所以此时组件尚未挂载到网页上。

    componentWillMount方法的调用在constructor之后,在render之前,在这方法里的代码调用setState方法不会触发重渲染,所以它一般不会用来作加载数据之用,它也很少被使用到。

    一般的从后台(服务器)获取的数据,都会与组件上要用的数据加载有关,所以都在componentDidMount方法里面作。虽然与组件上的数据无关的加载,也可以在constructor里作,但constructor是作组件state初绐化工作,并不是设计来作加载数据这工作的,所以所有有副作用的代码都会集中在componentDidMount方法里。

    constructor()中获取数据的话,如果时间太长,或者出错,组件就渲染不出来,你整个页面都没法渲染了。

    componentDidMount()中能保证你的组件已经正确渲染。

    总结下:

    1.跟服务器端渲染(同构)有关系,如果在componentWillMount里面获取数据,fetch data会执行两次,一次在服务器端一次在客户端。在componentDidMount中可以解决这个问题。

    2.在componentWillMount中fetch data,数据一定在render后才能到达,如果你忘记了设置初始状态,用户体验不好。

    3.react16.0以后,componentWillMount可能会被执行多次。

    参考:

    segmentfault: React数据获取为什么一定要在componentDidMount里面调用?

    React 异步渲染组件优化

  • 相关阅读:
    网络教程(2)光纤和RF编码简介
    网络教程(1)通过导线传播数字信号
    C语言基础 (11) 结构体 ,共用体 枚举 typedef
    C语言基础 (10) 变量作用域,生命周期 内存结构
    C语言基础 (9) 数组指针
    C语言基础 (8) 常用字符串处理函数
    C语言基础 (7) 输入输出
    短视频图像处理 OpenGL ES 实践
    短视频 SDK 6大功能技术实现方式详解
    从 HTTP 到 HTTPS 再到 HSTS
  • 原文地址:https://www.cnblogs.com/YbchengXumin/p/11244683.html
Copyright © 2011-2022 走看看