react的use函数可搭配Suspense与lazy

2024-09-04 05:36

本文主要是介绍react的use函数可搭配Suspense与lazy,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

use 是一个用于解析 React v18 及以下版本的 promise 状态的 polyfill hook。请注意,它只实现了消费 promise 的能力。

参考资料

https://www.reactuse.com/zh-Hans/state/usehttps://zh-hans.react.dev/reference/react/use#dealing-with-rejected-promises

app.jsx 

import { useState, Suspense, lazy } from 'react';const Son = lazy(() => delayForDemo(import('./Son.jsx')));function fn1() {return new Promise((res) => {setTimeout(res, 1000, { a: { b: 33 } })})
}
async function fn2() {var res = await new Promise((res) => {setTimeout(res, 1000, 'bbbb')})return res
}
export default function MarkdownEditor() {const [dt1, sets] = useState(fn1);const [dt2, setb] = useState(fn2);return (<><Suspense fallback={<div>loading...</div>}><h2>Preview</h2><Son dt1={dt1} dt2={dt2} /></Suspense></>);
}// Add a fixed delay so you can see the loading state
function delayForDemo(promise) {return new Promise(resolve => {setTimeout(resolve, 1200);}).then(() => promise);
}

son.jsx

import { use } from 'react'
export default function MarkdownPreview({ dt1, dt2 }) {var d1 = use(dt1)var d2 = use(dt2)return (<><h1>{dt1.a.b}</h1><div>-------</div><h1>{d2}</h1></>);
}

只有等待fn1,fn2里的函数 resolve之后,才会显示Son组件

附:延迟promise时间
延迟特定promise时间
function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}delay(3000).then(() => alert('runs after 3 seconds'));
 附:延迟组件加载时间

//定义
function delayForComp(promise) {return new Promise(resolve => {setTimeout(resolve, 1200);}).then(() => promise);
}//使用:
import { useState, Suspense, lazy } from 'react';const Mxxxxx = lazy(() => delayForComp(import('./Mxxxxx.jsx')));//放在Suspense内部return (<><Suspense fallback={<div>loading...</div>}><h2>Preview</h2><Mxxxxx dt1={dt1} dt2={dt2} /></Suspense></>);

这篇关于react的use函数可搭配Suspense与lazy的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1135135

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》:本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,:本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印