react如何控制全局loading_React Loading组件的正确姿势

最新推荐文章于 2021-01-15 03:09:29 发布
最新推荐文章于 2021-01-15 03:09:29 发布
阅读量2.3k 收藏
点赞数
文章标签： react如何控制全局loading
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35379749/article/details/112015411
版权

React Loading组件的正确姿势

页面异步加载的时候为缓解用户等待的焦虑情绪，我们通常会采取加载中...等文字或图标提示。

(图例，各种加载中状态)

日常写法

直接在state中存一个loading的布尔变量，请求发送前后改变状态，触发页面渲染

this.setState({

loading:true //发送之前

});

ajax("path", {a:1}, (text)=>{

this.setState({

loading:false, //正确回调函数中设置为false

text:text

});

}, ()=>{

this.setState({

loading:false, //错误回调函数中设置为false

text:"出错了"

})

});

render函数

render(){

let {loading,text} = this.state;

return

{loading ?

加载中...
: null}

{text}

;

}

上面是一个非常普通的写法，实现功能完全没问题，但不够优雅，也不具备可扩展性，试想组件中有多个请求

最低0.47元/天 解锁文章
瞻云云
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react如何控制全局loading_react如何封装一个全局组件
weixin_29533443的博客
12-29 726
date: 2017-11-29 21:59:29tags:背景react如何封装一个组件相信，一百度网上一大把，当我想通过message.error('错误')，这样的提示的时候，我们想拥有一个全局组件来调用，当我查阅资料时，并没有太多关于这个的讲解，所以想自己动手写一个。思路我们可以通过let div = document.createElement('div');document.body....
React+TS前台项目实战（十三）-- 全局常用响应式加载动画Loading组件封装
weixin_43883615的博客
06-20 663
高阶组件有几大有点，其中一个就是渲染劫持，如懒加载，是否显示该元素loading，这在项目中我们经常用到。毫无疑问，这个实战系列我们必然也要用到它，本文主要封装这个loading组件，为了后期开发页面使用。
react如何控制全局loading_React项目实现全局 loading 以及错误提示
weixin_39740419的博客
12-19 3115
前言在项目中使用 loading，一般是在组件中用一个变量( 如isLoading)来保存请求数据时的 loading 状态，请求 api 前将 isLoading 值设置为 true，请求 api 后再将 isLoading 值设置为 false，从而对实现 loading 状态的控制，如以下代码：import { Spin, message } from 'antd';import { Bin...
react如何控制全局loading_优雅地使用loading(推荐)
weixin_35180432的博客
01-15 1449
前言不知道从什么时候开始有了写博客的想法，奈何自己的知识储备还很薄弱，迟迟无法下笔。这是我的第一篇博客，算是记录一下自己学习前端以来的一些知识吧。如有错漏，恳请指出，您的批评和指正是我前进路上的一大动力！在平时的开发过程中，我们需要异步等待数据，常常会利用loading图来加强用户的体验，让用户知道我们有在加载，那么如何在开发过程中更为优雅地使用loading呢？开发小程序的时候我们只需要一句wx...
react如何控制全局loading_react添加页面加载loading
weixin_30045751的博客
01-15 1776
react添加页面加载loading父import React, { Component } from 'react';import Children from './Children';class Father extends Component {constructor(props){super(props);this.state = {show:true}}componentWillMoun...
react如何控制全局loading_用React+Antd封装Axios实现全局Loading效果
weixin_42466331的博客
12-29 2296
前言今天在做react后台管理的时候要实现一个全局Loading效果，通常使用axios库与后端进行数据交互。为了更好的用户体验，在每次请求前添加一个加载效果，让用户知道在等待加载。要实现这个功能，我们可以在每个组件请求手动添加加载效果返回后再将其隐藏，但如果每个请求都这么做，就要做多次重复设置显得很麻烦，但好处是可以设置定制多种请求效果。但考虑到该项目场景为后台管理系统，给管理员使用，花样可以不...
react如何控制全局loading_react封装简单的浏览器顶部加载进度条全局组件
weixin_39897392的博客
12-19 753
在项目中经常会有在请求前后加loading或者加加载进度条，一般这些组件都会抽离出来作为全局组件进度条的插件貌似都不是很符合自己项目中的需求，于是。。参考nprogress样式，自己在项目中封装组件，实现简单的顶部加载进度条。效果如下组件放到components文件夹下，新建progress文件夹progress/index.jsximport React, { Component } from ...
react如何控制全局loading_DVA框架统一处理所有页面的loading状态
weixin_39962889的博客
12-19 969
dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-loading 插件。通过这个插件，我们可以不必一遍遍地写 showLoading和 hideLoading，当发起请求时，插件会自动设置数据里的 loading 状态为 true 或 false 。然后我们在渲染 components 时绑定并根据这个数据进行渲染。dva-loading的使用非常简单，在index.j...
react如何控制全局loading_ReactJS实践（一）—— FrozenUI React化之Loading组件
weixin_31109967的博客
01-12 244
在前面我们通过四篇文章入门了React的大部分主要API，现在则开始进入实践环节。实践系列的开篇打算拿我司的FrozenUI来试验，将其部分UI组件进行React化，作为第一篇实践文章，将以较简单的Loading组件来入手，官网demo的效果如下图：为了更好地开发，后续将以webpack工具来辅助，对其不了解的童鞋可以先查阅我的《webpack 入门指南》一文。鉴于我们将复用 FrozenUI 的...
react如何控制全局loading_React / Redux技巧：处理reducer中loading标志的更好方法
weixin_33877700的博客
01-15 458
最近又重新开始做起React的网站来，在做的时候想添加骨架屏，之前添加的Skeleton骨架屏有些不够好用。因为每次请求的时候，都要设置Action并且修改reducer里面的isLoading的值，重写一个界面之后又再写一遍类似的代码。所以说很多人都说React冗余复杂，可能就是复杂在这些上面吧。于是我搜索了一下，发现了一个很好用的方法，自己用了一下觉得真的很好用，就翻译过来。以下是原文。目的：...
React实现全局组件的Toast轻提示效果
10-17
React 实现全局组件的 Toast 轻提示效果是构建用户界面时常见的需求，尤其是在需要向用户提供即时反馈的情况下。本文将详细介绍如何在 React 应用中创建一个可全局调用的 Toast 组件，以及如何实现其不同类型的提示...
一个用于react native 页面加载的loading组件 iOS
04-06
4. **生命周期方法**：React组件有特定的生命周期方法，例如`componentDidMount`、`componentDidUpdate`等，这个加载组件可能会在这些方法中控制加载指示器的显示和隐藏。 5. **状态管理**：在React应用中，状态...
react 创建单例组件的方法
08-27
在React中，实现单例组件主要是为了优化性能，避免重复渲染或初始化相同的组件，特别是在全局状态管理或跨组件通信时。 在需求背景下，比如有一个消息通知弹窗，需要在用户查看后不再重复显示。考虑到多页面系统，...
优雅地使用loading(推荐)
12-01
现在，你可以在任何 Vue 组件中通过 `this.$loading.show()` 和 `this.$loading.close()` 来控制 loading 的显示与隐藏，如下所示： ```javascript {{ msg }} export default { name: 'HelloWorld', ...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
react antd 全局loading
06-07
您可以使用 antd 的 Spin 组件来实现全局 loading 效果。您可以创建一个高阶组件，包装需要加载的组件，并在组件加载时显示 Spin 组件。以下是一个简单的例子： ```jsx import { Spin } from 'antd'; const withLoading = (Component) => { return ({ isLoading, ...props }) => { if (isLoading) { return <Spin />; } return <Component {...props} />; }; }; // 使用示例 const MyComponent = (props) => { // ... }; const MyComponentWithLoading = withLoading(MyComponent); const App = () => { const [isLoading, setIsLoading] = useState(false); useEffect(() => { setIsLoading(true); // 异步操作 setIsLoading(false); }, []); return ( <div> <MyComponentWithLoading isLoading={isLoading} /> </div> ); }; ``` 在上面的例子中，`withLoading` 函数接受一个组件作为参数，并返回一个新的组件。这个新组件会根据 `isLoading` 属性决定是否显示 Spin 组件或原始组件。在 App 组件中，我们使用 `useState` 来跟踪加载状态，然后在 useEffect 中模拟异步操作并更新 `isLoading` 状态。最后，我们将 MyComponentWithLoading 组件渲染到页面中，传递 isLoading 属性以决定是否显示 Spin 组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值