具有React Lazy getting promise错误的TypeScript - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

React 的“lazy”与 Typescript 和命名导出

React 的 lazy 函数是优化组件树渲染和内存使用的强大工具。例如，当处理根据某些触发器条件显示的模态框时，延迟加载可以极大地有益。...虽然这些模态框可能在触发之前保持不可见，但它们仍存在于您的组件树中。如果这些模态框包含繁重的组件，即使用户当前未查看任何内容，所有这些组件也会加载到内存中。...：const Modal = lazy(() => import(".....如果不是默认导出，您的 IDE 将会警告您出现此错误：TS2322 Property 'default' is missing in type 'typeof import("path/to/Modal...默认导出可能并不是您想要的。有时默认导出会使可搜索性变得困难，您的团队可能更喜欢命名导出。在这种情况下，您可以这样做：const Modal = lazy(() => import("..

5381 0

React lazy 原来是这么动态加载组件的！

前言最近没有开发任务，除了研究下安排的优化代码的任务，顺便看了下React.lazy源码！所以今天主要介绍 React.lazy 的实现原理！...React.lazy 的实现原理 React.lazy 的核心是利用 JavaScript 的动态导入和 React 的内部机制来实现按需加载。...以下是其工作流程：动态导入 React.lazy 接受一个返回 Promise 的函数，该 Promise 解析为模块对象，通常包含 default 导出的组件！.../LazyComponent'); LazyComponent 的创建 React.lazy 将动态导入的 Promise 包装为一个内部的 LazyComponent 对象。..._result = error; } ); throw promise; // 抛出 Promise，交给 Suspense 处理 } 使用缓存 React.lazy 具有内置缓存，同一个

6121 0

您找到你想要的搜索结果了吗？

是的

没有找到

这就是你日思夜想的 React 原生动态加载

它需要返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。 ?...1; export const Rejected = 2; 在控制台打印可以看到，React.lazy 方法返回的是一个 lazy 组件的对象，类型是 react.lazy，并且 lazy 组件具有..._status 属性，与 Promise 类似它具有 Pending、Resolved、Rejected 三个状态，分别代表组件的加载中、已加载、和加载失败三种状态。...如果单独使用 React.lazy，React 会给出错误提示。 ? 图片上面的错误指出组件渲染挂起时，没有 fallback UI，需要加上 Suspense 组件一起使用。...，上面我们提到 React.lazy 创建的动态加载组件具有 Pending、Resolved、Rejected 三种状态，当这个组件的状态为 Pending 时显示的是 Suspense 中 fallback

3K2 0

最完备的懒加载错误兜底方案，再也不会白屏了！

/path/to/component') 动态导入会返回一个 promise 对象，并且导入成功时这个 promise 需要 resolve 一个具有默认导出(default exprot)的模块，但是...以 React 为例，通常我们搭配 React.lazy 来使用动态导入，React.lazy 接受一个返回 promise 的函数。...const OurComponent = React.lazy(() => import('....异常处理这一层需要做的事有：成功时需要返回一个具有默认导出的模块失败时捕获错误并上报日志 function componentLoader(componentImport) { return...React.lazy(() => { return new Promise(resolve => { componentImport() .then(resolve

1.6K2 0

@types react 中值得注意的 TS 技巧

1 引言从 @types/react 源码中挖掘一些 Typescript 使用技巧吧。...问题：React.lazy 需要限制返回值是一个 Promise 类型，且 T 必须是 React 组件类型。...方案： function lazy>( factory: () => Promise ): LazyExoticComponent...; T extends ComponentType 确保了 T 这个类型一定符合 ComponentType 这个 React 组件类型定义，我们再将 T 用到 PromiseTypescript2.0 - 2.9》与精读《Typescript 3.2 新特性》，由于 TS 更新频繁，后续 TS 技巧可能继续以阅读源码方式进行，希望这次选用的

1.5K2 0

精读《@types react 值得注意的 TS 技巧》

1 引言从 @types/react 源码中挖掘一些 Typescript 使用技巧吧。...问题：React.lazy 需要限制返回值是一个 Promise 类型，且 T 必须是 React 组件类型。...方案： function lazy>( factory: () => Promise ): LazyExoticComponent...; T extends ComponentType 确保了 T 这个类型一定符合 ComponentType 这个 React 组件类型定义，我们再将 T 用到 PromiseTypescript2.0 - 2.9》与精读《Typescript 3.2 新特性》，由于 TS 更新频繁，后续 TS 技巧可能继续以阅读源码方式进行，希望这次选用的

7031 0

React默认工程的目录说明

项目包文件（node_modulesd 的依赖是根据 package.json 来下载的） tsconfig.json TypeScript 编译器的配置文件，TypeScript 编译器可以根据它的规则来对代码进行编译...vite.config.json 使用 vite 创建的项目里默认的配置 src目录下的说明文件名称文件说明 assets 静态资源文件，放一些css文件和image图片 common 定义data...alert("请求超时"); break; case 500: alert("服务器内部错误...alert("服务未实现"); break; case 502: alert("网关错误...from 'react'; import type { RouteObject } from "react-router-dom"; const Login =React.lazy(()=>import

5961 0

React 的 Suspense 和 ErrorBoundary 还有这种关系？

Suspense 组件想必大家都用过，一般是和 React.lazy 结合用，用来加载一些异步组件。...promise 初始状态展示 fallback，promise 改变状态后展示子组件。那 React.lazy 是不是也是基于这个实现的呢？...调试下源码，发现确实是这样： React.lazy 包裹之后，也会 throw 一个 promise 来触发 Suspense。当 promise 改变状态后，再返回拿到的值。...总结大多数人用 Suspense 都是结合 React.lazy 异步加载组件的时候用，其实它也可以独立用。...它的底层原理就是 throw 一个 promise，然后 React 会捕获这个 promise，交给最近的 Suspense 组件来处理。

5142 0

不换的周刊第22期

Scholar's Weekly 第22期 { loading=lazy } (封面图片来源于：基于 CC0 协议的 stocksnap) !!!...3.Deopt Explorer 简介相关地址：https://devblogs.microsoft.com/typescript/introducing-deopt-explorer/ Deopt...可以很好的缓解这个状态，它有点像是 React Context，按照规范特性的描述： On subclasses of Promise, the withResolvers method should...，Magee 向我们展示一组比较好的默认配置，因为一些测试状态可能会发生泄漏，导致我们的测试用例结果可能是错误的：正确的用例实际因为状态未重置导致错误，让人产生困惑；错误的用例因为状态未重置导致正确...React State 库，可以看下简单的基准测试： 8.headless-qr 相关地址：https://github.com/Rich-Harris/headless-qr 一个现代化的 QR 生成工具

2251 0

React 进阶 - 渲染调优

它必须返回一个 Promise ，该 Promise 需要 resolve 一个 default export 的 React 组件 const LazyComponent = React.lazy((...内部会处理这个 Promise ，Promise 结束后，Suspense 会再一次重新 render 把数据渲染出来，达到异步渲染的效果 React.lazy 原理 lazy 内部模拟一个...promiseA 规范场景完全可以理解 React.lazy 用 Promise 模拟了一个请求数据的过程，但是请求的结果不是数据，而是一个动态的组件。...下一次渲染就直接渲染这个组件，所以是 React.lazy 利用 Suspense 接收 Promise ，执行 Promise ，然后再渲染这个特性做到动态加载的 # 渲染错误边界 React 组件渲染过程如果有一个环节出现问题...作为回调函数，React.lazy 要求这个函数必须是返回一个 Promise 。

1.2K1 1

性能优化竟白屏，难道真是我的锅？

项目日渐“强壮”，性能优化方法之一是采用 React 框架提供的 Reat.lazy() 按需加载的方式，测试过程中，QA说我的优化代码导致了白屏，且看我如何狡辩～随着项目日渐“强壮”，优化首屏加载渲染速度迫在眉睫...，其中就采用了 React 框架提供的 Reat.lazy() 按需加载的方式，测试过程中，在我们的埋点监控平台上，发现了很多网络请求错误的日志，大部分来自分包资源下载失败！...3.1 支持自定义fallback以及error callback 目标：满足些场景下，开发者需要自行设置 fallback 的UI，以及自定义错误处理回调实现也非常简单，基于 TypeScript，...然后尝试主动触发重新渲染，发现并没有发起二次请求，点击重试只是捕获到了错误～ 4.2 定位原因不生效，于是想到声明引入组件的代码如下： const LazyCounter = React.lazy((...4.3 解决方案因此，想要解决网络加载错误问题并重试，就得在声明代码 import 的时候处理，因为import 返回的是一个Promise，自然就可以用 .catch 捕获异常。

1.5K1 0

性能优化竟白屏，难道真是我的锅？

项目日渐“强壮”，性能优化方法之一是采用 React 框架提供的 Reat.lazy() 按需加载的方式，测试过程中，QA说我的优化代码导致了白屏，且看我如何狡辩～随着项目日渐“强壮”，优化首屏加载渲染速度迫在眉睫...，其中就采用了 React 框架提供的 Reat.lazy() 按需加载的方式，测试过程中，在我们的埋点监控平台上，发现了很多网络请求错误的日志，大部分来自分包资源下载失败！...3.1 支持自定义fallback以及error callback 目标：满足些场景下，开发者需要自行设置 fallback 的UI，以及自定义错误处理回调实现也非常简单，基于 TypeScript，...然后尝试主动触发重新渲染，发现并没有发起二次请求，点击重试只是捕获到了错误～ 4.2 定位原因不生效，于是想到声明引入组件的代码如下： const LazyCounter = React.lazy((...4.3 解决方案因此，想要解决网络加载错误问题并重试，就得在声明代码 import 的时候处理，因为import 返回的是一个Promise，自然就可以用 .catch 捕获异常。

1.2K2 0

「React进阶」深度剖析 React 异步组件前世与今生

3 React.lazy如何实现动态加载的？ 4 React.lazy为什么要在Supsonse内部。 5 Supsonse原理是什么？ ?...，将一个非React组件Children1当作正常的React的组件来渲染，这样在渲染阶段就会报错，错误信息就会被 componentDidCatch捕获到，错误信息如下： ?...3.jpg 四实践：从Suspense到React.lazy React.lazy简介 Suspense带来的异步组件的革命还没有一个实质性的成果，目前版本没有正式投入使用，但是React.lazy是目前版本...5.gif React.lazy原理解读 React.lazy 是如何配合Susponse 实现动态加载的效果的呢？...lazy内部模拟一个promiseA规范场景。我们完全可以理解React.lazy用Promise模拟了一个请求数据的过程，但是请求的结果不是数据，而是一个动态的组件。

2.1K3 0

React 项目精进技巧

1、工程化实践 umi+dva作为底层框架，Ant Design Mobile为 UI 组件库，是蚂蚁金服推崇的的react项目最佳实践，具有国际化、权限、数据流、配置式路由、补丁方案、自动化 external...方面等等方便一线开发者的功能，部分功能代码可以参考Ant Design pro，目录结构预览如下 2、通用组件 ErrorBoundary 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃...，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界：错误边界 – React 懒加载 // index.js import React, { Component, lazy, Suspense...== 'Promise') { Lazy = lazy(() => import('..../error')); } else { Lazy = lazy(() => { return new Promise(resolve => { setTimeout

1.2K1 0

什么是 TypeScript 4.1 中的模板字面类型？

image.png 写了这么多年 TypeScript，最大的感触就是它非常易于理解——特别是对于具有 Java 背景的人。...React 17 的 jsx 和 jsxs 工厂函数： react-jsx react-jsxdev “这些选项分别用于生产和开发编译。.../tsconfig.json", "compilerOptions": { "jsx": "react-jsxdev" } } 如下图所示，TypeScript 4.1 支持在像 React...在 TypeScript 4.1 中，由于 DOM 类型是自动生成的，lib.d.ts 可能具有一组变动的 API，例如，从 ES2016 中删除的 Reflect.enumerate。...解决方法是，最好使用类型断言来避免错误。最后一点想法 TypeScript 通过在运行代码之前捕获错误并提供修复程序来节省我们的时间。

4.9K1 0

一文让你30分钟快速掌握Vue3

Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活，接下来总结一下...错误和应用程序实例将调用处理程序 app.config.errorHandler = (err, vm, info) => {} 可以在应用程序内的任何组件实例中访问的全局属性，组件的属性将具有优先权...React.lazy 接受一个函数，这个函数需要动态调用 import()。...它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。...import React, { Suspense } from 'react'; const myComponent = React.lazy(() => import('.

1.7K3 0

2021 年 JavaScript 大事记

为了更快地向用户提供新功能和错误修复，Chrome 加快了其发布周期。...Promise.any：Promise.any 方法和 Promise.race 类似，只要给定的数组中的有一个 promise 成功，就采用第一个 promise 的值作为它的返回值，但与 Promise.race...他们相信 JavaScript 将在未来很长一段时间内存在于互联网，并且会是速度最快、最受欢迎且唯一具有工业标准化流程的语言。...（主要用于非紧急状态更新）渲染的自动批处理优化（主要解决异步回调中无法批处理的问题）支持 React.lazy 的全新 SSR 架构（支持组件）详细可以看：【第一批吃螃蟹...2021.11.24 Remix 开源 Remix 是一个由 React Router 开发团队所开发的基于 React、 TypeScript 和 Node 的全栈框架，以解决开发者在用 React

1.6K1 0

跨端开发实践：多端适配指南

Taro 3. uni-app 跨端开发实践 3.1 框架特点 uni-app 是 DCloud 推出的跨端开发框架，具有以下特点： Vue.js 语法：基于 Vue.js 开发，学习成本低丰富的组件库...Taro 跨端开发实践 4.1 框架特点 Taro 是京东推出的跨端开发框架，具有以下特点： React/Vue 语法：支持 React 和 Vue 两种开发方式 TypeScript 支持：原生支持...TypeScript 多端统一：支持微信小程序、H5、React Native 等平台组件化开发：完善的组件化开发体系 4.2 多端适配策略 4.2.1 环境判断 import Taro from '...需要发布到快应用平台 Taro 适用场景：团队熟悉 React 技术栈需要 TypeScript 支持对代码质量要求较高需要与现有 React 项目集成 7....方案，原因：复杂的交互逻辑，React 组件化开发更适合 TypeScript 支持，提高代码质量丰富的 React 生态，富文本编辑器选择多 7.2.3 关键功能实现 // 富文本编辑器组件 import

2751 0

React 的未来，与 Suspense 同行

CodeSandbox上的演示 React.lazy 这个名字真的是暴露了它的意图！...回到前面 Codesandbox 的演示链接并将导入更改为以下内容： 1const TodoList = React.lazy(() => import("....的 createResource 从回调中创建资源，并返回一个 promise。...好吧，为了让 Suspense 知道它必须显示加载状态，所需要的只是一个 promise。在 promise 解决之前，它将继续显示加载状态。但是，这是实验性的。...我相信你会遇到错误，所以不要担心，很明显 react-cache 仍处于开发阶段。一点要小心，确保在组件内部使用 read 方法，否则，它会抛出一个错误。

1.2K5 1

React + TypeScript + Hook 带你手把手打造类型安全的应用。

社区里有很多 TypeScript 比较基础的分享，但是关于 React 实战的还是相对少一些，这篇文章就带大家用 React 从头开始搭建一个 TypeScript 的 todolist，我们的目标是实现类型安全...，杜绝开发时可能出现的任何错误！...实战创建应用首先使用的脚手架是 create-react-app，根据 www.html.cn/create-reac… 的流程可以很轻松的创建一个开箱即用的 typescript-react-app...const [todos, setTodos] = useState []; 当然，useState 也是具有泛型推导的能力的，但是这要求你传入的初始值已经是你想要的类型了，而不是空数组...而且 TypeScript 也可以在开发时就避免很多粗心导致的错误，详见： TypeScript 解决了什么痛点？

7001 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭