React16源码: Suspense与lazy源码实现

Suspense 与 lazy


1 )概述

  • Suspense 是在 react16.6 提供的新 feature
  • 用于加载的缓冲的内置组件

2 )示例程序

lazy.js

// lazy.js
import React from 'react'
export default () => <p>Lazy Comp</p>

主程序

import React, { Suspense, lazy } from 'react'const LazyComp = lazy(() => import('./lazy.js'))let data = ''
let promise = ''
function requestData() {if (data) return dataif (promise) throw promisepromise = new Promise(resolve => {setTimeout(() => {data = 'Data resolved'resolve()}, 2000)})throw promise
}function SuspenseComp() {const data = requestData()return <p>{data}</p>
}export default () => (<Suspense fallback="loading data"><SuspenseComp /><LazyComp /></Suspense>
)
  • 示例的效果是先显示的是 loading data,然后再显示出来 Data resolved
  • 最终 export出去的这个组件,它是一个 function component
    • 里面使用了 Suspense,然后给它一个 fallback 的 prop
    • 这就是我们看到的 loading data,里面是一个组件(SuspenseComp),也是一个function component
    • 调用了一个 requestData 方法,它渲染的是一个p标签, 填充 data
  • 可以在一个 Suspense 组件,下面渲染一个或者多个这种异步的组件
    • 有任何一个抛出了 promise以及在这个 promise relove 之前
    • 都会显示这个 fallback里的内容
  • 这就是 Suspense 组件的一个原理
    • 其实它具体的内部实现是非常复杂的
  • 注意,16.6版本的React只支持lazy就是异步加载组件
    • 并没有很好的去支持我们的异步数据加载的功能
    • 相关源码没有稳定,跟数据加载相关的是 Suspense 的功能后期发布
    • 在后面的版本进行使用,当前版本是不推荐在生产环境使用
  • Suspense支持 lazy组件,可以非常方便的实现异步组件加载
    • 配合webpack提供的 import 来实现这个功能
    • 比如代码中, const LazyComp = lazy(() => import('./lazy.js'))
    • 这个 LazyComp 也被放到这个 Suspense 里面
  • 在控制台的 network 面板里面,刷新一下
    • 可以看到bundle.js 然后 2.chunk.js
    • 这就是我们进行了一个异步加载组件,自动给我们区分的一个 js 文件
  • 因为其实我们是在本地开发的,异步加载速度非常快
    • 最终 LazyComp 跟 Data resolved 是一起显示出来的
    • 如果在 Suspense 组件内部有多个组件,要等到所有的组件都resolved之后
    • 它才会把fallback里面的内容移除,这是 Suspense 的一个特点
    • 如果里面任何一个组件处于 pending 状态,它还是会显示 fallback

3 ) 源码探究

  • 定位到 React.js, 找到 Suspense

     import {REACT_SUSPENSE_TYPE,} from 'shared/ReactSymbols';import { lazy } from './ReactLazy';const React = {// ... 此处省略其他lazy,// ... 此处省略其他Suspense: REACT_SUSPENSE_TYPE}
    
    • 看到 Suspense它是一个常量,就是一个 REACT_SUSPENSE_TYPE,本质上只是一个Symbol
    • 而 lazy 就不是一个Symbol 了
    • 我们可以看到 import { lazy } from './ReactLazy';
  • 基于这个,定位到 ReactLazy.js 查看 lazy 源码

    /*** Copyright (c) Facebook, Inc. and its affiliates.** This source code is licensed under the MIT license found in the* LICENSE file in the root directory of this source tree.*/import type {LazyComponent, Thenable} from 'shared/ReactLazyComponent';import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {return {$$typeof: REACT_LAZY_TYPE,_ctor: ctor,// React uses these fields to store the result._status: -1,_result: null,};
    }
    
  • 它是一个方法 export function lazy,并接收一个方法

    • lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T>
    • 它指定这个传入的参数,这个参数是一个方法,并且它要返回一个 Thenable 类型的对象
    • Thenable 是 Promise 这样的一个对象,它具有 .then 方法
  • 最终,返回的是一个 lazy component

    • $$typeof,值为 REACT_LAZY_TYPE
    • _ctor 就是我们传递进来的回调函数
      • 在react渲染的过程当中,渲染到 lazy component 的时候
      • 会去调用这个 _ctor 回调,并返回一个 Thenable 的对象(Promise对象)
      • 这个时候Promise是处于 pending 状态的,对应的是值是 -1
    • _status 用来记录当前这个 Thenable 的对象,所处的状态
      • 后续达到了resolved 或者是 rejected 的这两种状态的时候,这个 _status 会变化
      • 让后期进行渲染的时候可以进行不一样的处理
    • _resultPromise结果
      • 用来记录这个Thenable对象,它 resolve 之后返回的那个属性
      • 在 lazy 里面,最终的组件会挂载到这个 _result
      • 后续渲染这个 lazy 组件的时候,直接拿 _result 里面的组件渲染就可以了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/590293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ARM AArch64的虚拟化(virtualization)详解(上)

目录 一、概述 开始之前 二、虚拟化介绍 为什么虚拟化很重要

用队列实现栈(JAVA)

仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除并返回栈顶元素。int top() …

【MySQL】查看表的信息相关命令

文章目录 【MySQL】查看表的信息相关命令查看表的信息相关命令例 【免责声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。 编辑|SQL和数据库技术(ID:SQLplusDB) 【MySQL】查看表的信息相关命令 在MySQL中&#xff0c;可以使用以下语句来查看表的信…

python实现Ethernet/IP协议的客户端(二)

Ethernet/IP是一种工业自动化领域中常用的网络通信协议&#xff0c;它是基于标准以太网技术的应用层协议。作为工业领域的通信协议之一&#xff0c;Ethernet/IP 提供了一种在工业自动化设备之间实现通信和数据交换的标准化方法。python要实现Ethernet/IP的客户端&#xff0c;可…

【Linux】socket基础API

目录 1. 创建socket&#xff08;TCP/UDP&#xff0c;客户端服务器&#xff09; 1.1 第一个参数——domain 1.2 第二个参数——type 1.3 第三个参数——protocol 2. 绑定socket地址&#xff08;TCP/UDP&#xff0c;服务器&#xff09; 2.1 字节序及转换函数 2.2 IP地址及…

消融实验(ablation study)——全网最全解读

消融实验&#xff08;ablation study&#xff09; 是什么优势与劣势案例总结 是什么 消融实验是一种科学研究方法&#xff0c;用于确定一个条件或参数对结果的影响程度。当研究者提出了一个新的方案或方法时&#xff0c;消融实验通过逐一控制一个条件或参数&#xff0c;来观察…

6个火爆全网的AI开源项目,用上月10万+

标题月10万可能说的有点夸张和含糊&#xff0c;10万具体指的是你可以利用这些开源项目实现&#xff1a; 访问量10万 收入10万 用户10万 …… 开源项目只是免费的工具&#xff0c;具体怎么实现还需要你根据自己需求去深入运营。这里只是给你推荐一些比较热门的开源项目&…

基于QT开发的温室气体数据记录软件

1、概述 温室气体分析仪数据记录软件用于实现温室气体分析仪数据的获取与存储&#xff0c;阀箱数据的获取与存储、冷阱数据的获取与存储、采样单元数据的获取与存储、阀箱和采样单元的远程操作以及系统功能的管理。其主操作界面如下&#xff1a; 上述软件界面分为2各区域&…

用html,js和layui写一个简单的点击打怪小游戏

介绍&#xff1a; 一个简单的打怪小游戏&#xff0c;点击开始游戏后&#xff0c;出现攻击按钮&#xff0c;击败怪物后可以选择继续下一关和结束游戏。 继续下一个怪兽的血量会增加5点&#xff0c;攻击按钮会随机变色。 效果图&#xff1a; html代码&#xff1a; <!DOCTYPE…

【仅供测试】

https://microsoftedge.microsoft.com/addons/detail/%E7%AF%A1%E6%94%B9%E7%8C%B4/iikmkjmpaadaobahmlepeloendndfphd 测试网站&#xff1a; https://www.alipan.com/s/tJ5uzFvp2aF // UserScript // name 阿里云盘助手 // namespace http://tampermonkey.net/ // …

Linux操作系统—进程和服务管理

1. 查看网络连接信息&#xff1a; - 使用netstat和ss命令查看系统的网络连接信息。 # 示例&#xff1a;查看网络连接信息 netstat -an | grep ESTABLISHED 2. 查看进程的环境变量&#xff1a; - 使用/proc目录下的environ文件查看进程的环境变量。 # 示例&#xff1a;查看进程…

一次性解决 DL-FWI 论文题目问题

摘要: 小组做同一方向研究时, 面临题目容易冲突的问题. 本文分析一篇 DL-FWI 涉及的几个方面, 以此来完全解决论文命名问题。 1. 反演结果 反演结果可以按几种方式划分. 1.1 数据的维度 1.1.1 1D 反演的结果是 1D, 其实容易有较好的普适性. 相应的输入, 一般是共中心点道集…

每天刷两条道题——第三天

1.1两两交换链表中的节点 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09; 输入&#xff1a;[1,2,3,4] 输出&#xff1a;[2,1,4,3…

路由懒加载及路由参数

路由懒加载 叙述&#xff1a;路由的懒加载是一种优化技术&#xff0c;用于在需要时按需加载路由组件&#xff0c;而不是在应用程序初始化时一次性加载所有路由组件。 routes: [{path: /login,// 路由懒加载component: () > import(/views/LoginComp),// 命名路由name: log…

QDialog

属性方法 样式表 background-color: qlineargradient(spread:reflect, x1:0.999896, y1:0.494136, x2:1, y2:1, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255));border: 1px groove rgb(232, 232, 232);border-radius: 20px; QDialog 的常用方法&#xff1a; e…

3.5.3 伪操作

在C语言中&#xff0c;为了编程方便&#xff0c;编译器会定义一系列与处理命令&#xff0c;并用#来标识&#xff0c;如#include&#xff0c;#define&#xff0c;#if&#xff0c;#else&#xff0c;#end等。这些预处理命令并不是真正的C语言关键字&#xff0c;而是为了编程方便&a…

前端 js 基础(1)

js 结果输出 &#xff08;点击按钮修改文字 &#xff09; <!DOCTYPE html> <html> <head></head><body><h2>Head 中的 JavaScript</h2><p id"demo">一个段落。</p><button type"button" onclic…

基于PHP的校园代购商城系统

有需要请加文章底部Q哦 可远程调试 基于PHP的校园代购商城系统 一 介绍 此校园代购商城系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。(附带参考设计文档) 技术栈&#xff1a;phpmysqlbootstrapphpstudyvscode 二 功能 …

2023/12/30 c++ work

定义一个Person类&#xff0c;私有成员int age&#xff0c;string &name&#xff0c;定义一个Stu类&#xff0c;包含私有成员double *score&#xff0c;写出两个类的构造函数、析构函数、拷贝构造和拷贝赋值函数&#xff0c;完成对Person的运算符重载(算术运算符、条件运算…

03 团队研究进一步详细介绍

一、印第安纳大学邢璐祎课题组 【团队网站】 https://www.xing-luyi.com/ 【团队介绍】 研究以形式化方法为特色&#xff0c;并保证系统中的安全性和隐私合规性&#xff0c;特别是物联网、云、移动和软件供应链。 【团队成果汇总】 物联网系统&#xff1a;[Oakland24][Se…