首页 > 其他分享 >react 中在componentDidMount中进行网络请求的原因

react 中在componentDidMount中进行网络请求的原因

时间:2024-05-10 17:58:37浏览次数:18  
标签:请求 componentWillMount 渲染 componentDidMount react constructor 组件 setState

1, 在constructor请求

组件未挂载也可以发送请求,这里所影响的时间只有执行发送请求的时间,然后组件接着渲染,等异步数据返回后,再执行 setState 然后render重新渲染

constructor执行一次没错 但是网络请求是异步的  先用默认值渲染  网络请求回来后setState 后重新render

2,componentWillMount请求

原理跟constructor是一样的,所影响的时间只有执行发送请求的时间,并不会阻塞组件的渲染,但不推荐使用 componentWillMount 是有其他的原因:

  1. 很重要的一点,React16.3后将会废弃掉componentWillMount、componentWillReceiveProps 以及 componentWillUpdate 三个周期函数

  2. 跟服务端渲染有关系(同构),如果在 componentWillMount 里获取数据,fetch data会执行两次,一次在服务端一次在客户端,使用 componentDidMount 则没有这个问题----暂不理解。

  3. 可能被调用不止一次

至于前面说到的数据在组件挂载前返回导致不生效的,这种情况并不会发生,

因为 setState 是将更新的状态放进了组件的__pendingStateQueue队列中,react并不会立即响应更新,会等到组件挂载完成后,再统一更新组件

setState 是异步的)

注意:

1 设置默认值 

2页面数据发生闪动 (默认值->网络请求回来的值)

总结:

  1. 数据获取可以放在 constructor 或者 componentDidmount 中, 但是为了更好的代码规范和可读性,建议统一放在 componentDidmount

  2. 对于首次render没有数据,可能导致出错的。可以设置一个initial state,或者增加一个loading状态。

标签:请求,componentWillMount,渲染,componentDidMount,react,constructor,组件,setState
From: https://www.cnblogs.com/fanjiawen/p/18184991

相关文章

  • Nginx请求访问控制是怎样实现的
    首先来看下什么是漏桶算法和令牌桶算法Nginx并不直接实现漏桶算法或令牌桶算法,但这些算法在控制网络流量和请求速率方面非常有用。这些算法通常在网络编程、API服务、负载均衡等领域中使用,以确保系统的稳定性和性能。漏桶算法(LeakyBucket):*漏桶算法用于限制数据的传输速率。它......
  • 升级Artalk评论至V2-8-3-解决Error-请求响应404
    记录升级Artalk评论至V2.8.3,并解决ArtalkErrorError:请求响应404,无法获取评论列表数据朗读全文Yourbrowserdoesnotsupporttheaudioelement.有什么用升级Artalk评论至V2.8.3解决ArtalkErrorError:请求响应404,无法获取评论列表数据心路历程Artalk配置的SMT......
  • 请求区别
    超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信。HTTP的工作方式是客户机与服务器之间的请求-应答协议。web浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。举例:客户端(浏览器)向服务器提交HTTP请求;服务器向客户端返回响应。响应包含关于请求的......
  • react甘特图
    importReact,{useEffect,useRef,useState}from'react'import'./indexgun.less'exportdefaultfunctionGunttCharts(props:any){const{dataSource,widthgezi=55,rowHeight=40,///数据行高hourWidth=80,///数据行宽......
  • 探究:响应式编程(Reactive Programming)
    在当今软件开发领域,响应式编程(ReactiveProgramming)成为了一个备受关注的话题。它提供了一种新的编程范式,与传统的命令式编程有着显著的不同。本文将详细讲解什么是响应式编程,以及它与传统的命令式编程的不同之处。1.什么是响应式编程?响应式编程是一种编程范式,它基于数据流和变......
  • vite react 使用 svg 文件当作图标
    svg可以当做图标导入react里面,如果用img标签弄的话,无法控制图标颜色和字体大小,但是把他当组件导入的话,就可以这么控制了,比较方便,并且也方便webstorm预览首先安装vite-plugin-svgrpnpmaddvite-plugin-svgr-D然后使用修改vite.config.jsimport{defineConfi......
  • React的高阶组件详解
    接受一个或多个函数作为参数;返回一个新的函数;2使用场景(页面权限,某些页面是必须用户登录成功才能进行进入;如果用户没有登录成功,那么直接跳转到登录页面;)//定义一个高阶组件,用于鉴权的操作functionloginAuth(WrapperCpn){returnprops=>{//从本地存储中获取tok......
  • 网页根据屏幕宽度请求不同的CSS文件
    网页根据屏幕宽度请求不同的CSS文件前言:重在记录,可能出错。一、代码<!DOCTYPEhtml><htmllang="ch"> <head> <title>网页根据屏幕宽度请求不同的CSS文件</title> <linkid="desktop-style"media="onlyscreenand(min-width:960px)"type=&......
  • react项目中使用lottie动画
    一,引入lottie库点击查看代码npmi--savereact-lottie@types/react-lottie二,下载lottie的json文件去iconfont.cn中可以在库中下载lottie文件(注意版权问题)三,在项目中使用lottie点击查看代码import*asReactfrom"react";importLottiefrom"react-lottie";impo......
  • react中使用craco,针对路径转换,修改webpack别名路径配置
    1.0首先下载craco依赖包npminstall@craco/craco-D2.0在项目根目录下面新建craco.config.js文件,里面内容配置为constpath=require('path')module.exports={webpack:{alias:{'@':path.resolve(__dirname,'src')}......