react异步数据如ajax请求应该放在哪个生命周期?

2023-05-16

对于同步的状态改变,是可以放在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可能会被执行多次。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react异步数据如ajax请求应该放在哪个生命周期? 的相关文章

  • Android 抛弃IMEI改用ANDROID_ID

    介绍 之前一直使用IMEI作为唯一标识符 xff0c 缺点就是需要权限 xff1a Android 10以前 xff0c 需要READ PHONE STATE权限 Android 10限制 xff0c 需要READ PRIVILEGED P
  • Android 单例模式必知必会

    目录 一 概念 1 1 单例类 1 2 优缺点 1 2 1 优点 1 2 2 缺点 二 创建单例模式的方法 2 1 饿汉式 2 2 懒汉式 2 2 1 懒汉式 非线程安全 2 2 2 懒汉式 线程安全 2 3 双重检验锁 2 4 静态内部类
  • 使用netinstall重置MIKROTIK RouterOS

    相信查看本文的读者手头应该有一台Mikrotik的路由产品 xff0c 本文中出现的RouterOS是指笔者拥有的一台家庭版路由器 非Routeros玩家可以忽略本文 下图就是笔者正在使用的一个Routeros路由器 我们在给Routero
  • BigDecimal 简单使用

    目录 为什么使用BigDecimal 解决方案 构造方法 类型转换 double 转 BigDecimal BigDecimal 转 String BigDecimal 转 double int long等 加减乘除取余 divide 舍入
  • Android Framework 启动流程必知必会

    课前预习 在了解启动流程之前先了解一下下面两个概念 1 子进程与父进程的区别 1 除了文件锁以外 其他的锁都会被继承 2 各自的进程ID和父进程ID不同 3 子进程的未决告警被清除 4 子进程的未决信号集设置为空集 2 什么是写时拷贝 co
  • ADB 操作命令及用法

    ADB 操作命令及用法 文章目录 ADB 操作命令及用法一 ADB是什么 xff1f 二 ADB有什么作用 xff1f 三 ADB命令语法单一设备 模拟器连接多个设备 模拟器连接4 1 基本命令4 1 1 查看adb的版本信息4 1 2 启
  • 研究生生涯的一些经验和感悟

    研究生生涯的一些经验和感悟 引言 写这篇博客前 xff0c 我不禁要感慨一下互联网分享所带来的好处 我这里讲的分享主要是指知识 技术和个人思想的分享 网络新闻媒体更多是传播一些资讯 xff0c 而这些资讯一般不涉及深入的技术 xff0c 深
  • PyCharm上传本地项目到GitLab - MacOS版

    登录GitLab 创建一个项目 填写项目名称 xff0c 选择显示级别 复制GitLab的这个项目地址 xff0c 后面会在PyCharm里面用到 PyCharm操作 从PyCharm打开本地项目 xff0c 然后创建本地代码仓库 xff0
  • 【Python】使用Scrapy 网络爬虫框架Demo

    安装 使用PyCharm安装 xff0c 进入到PyCharm gt Preferences gt Project Interpreter xff0c 点击加号 查询框输入 Scrapy xff0c 点击 Install Package 使
  • Docker+Selenium Grid运行UI自动化

    简介 使用Selenium Grid可以分布式运行UI自动化测试 xff0c 可以同时启动多个不同的浏览器 xff0c 也可以同时启动同一个浏览器的多个session 这里使用Docker Compose来同时启动不同浏览器的容器和Sele
  • python-生成HTMLTestRunner测试报告

    一 安装HTMLTestRunner HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展 xff0c 它可以生成 HTML的 测试报告 首先要下 HTMLTestRunner py 文件 xff0c
  • Jenkins发送测试报告邮件

    简介 总结怎么使用Jenkins执行自动化测试后发送测试报告邮件 一 系统设置 1 在Jenkins安装Email Extension Plugin插件 xff0c 如下图 xff1a 2 设置Extended E mail Notific
  • Java读取csv文件

    简介 xff1a 总结用java通过读取csv文件方法 xff0c 为用csv文件来做数据驱动测试提供解决方案 创建csv文件 用WPS表格或excel创建文件 xff0c 填写数据 xff0c 另存为选择CSV格式进行保存 xff0c 如
  • MikroTik RouterOS上网设置

    本文是一篇关于MikroTik Routeros上网配置的示例文章 xff0c 适合有一定RouterOS路由器配置基础的同学学习 网络拓扑如下图 xff0c 家用WIFI已配置并正常上网 xff0c 接口地址如图所示 xff08 大家凑合
  • 搭建PHP开发环境(Apache+PHP+MySQL)

    简介 xff1a 总结在Windows环境搭建PHP开发环境 xff08 Apache 43 PHP 43 MySQL xff09 安装Apache 1 下载Apache xff0c 地址 xff1a http www apacheloun
  • Java读取Excel文件

    简介 xff1a 总结Java读取Excel文件 添加maven依赖 lt dependency gt lt groupId gt org apache poi lt groupId gt lt artifactId gt poi ooxm
  • 【python】Pytest+Request+Allure+Jenkins 接口自动化测试Demo

    摘要 xff1a 用postman的一个接口为例子 xff0c 做了一个接口自动化测试 xff0c 使用Pytest 43 Request 43 Allure 43 Jenkins 框架 xff0c 现在加以总结 技术栈 xff1a pyt
  • windows django生产用

    mod wsgi 下载 注意 xff1a 下载mod wsgi so版本需和python和apache匹配 http www lfd uci edu gohlke pythonlibs mod wsgi 我之前下过一个对应apache22和
  • 2021-02-19

    升级从版本5 5到6 x的VMware ESXi 转自 xff1a https www cisco com c zh cn support docs servers unified computing vmware esxi cisco u
  • zabbix 5.4在 CentOS8.3中的安装(mysql8/php7)

    0x1 安装 zabbix包及各种必用软件和依赖 rpm Uvh https repo zabbix com zabbix 5 4 rhel 8 x86 64 zabbix release 5 4 1 el8 noarch rpm dnf

随机推荐