余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

React 的未来:与 Suspense 共舞(Suspense react)

xiyangw 2022-11-26 17:04 71 浏览 0 评论

React 的 16.x 版本自从发布以后就风靡了整个业界。这个版本的新增功能中,最受欢迎的有 Hooks、懒加载、Suspense 和缓存 API 等。

不要以为本文又要教你怎么写 Hooks,我要写的是对 React 未来的展望!如果你从未听过 Hooks 或者 React 中的其他新 API,这篇文章会让你了解这些激动人心的未来。

接下来我们将介绍两个新概念,相关功能预计将在 2019 年第二季度发布:

  • 如何使用 Suspense 获取数据
  • 如何使用 react-cache

虽然我迫不及待想要介绍这些功能,但之前我们还是先来铺垫一下。

React Hooks

React 16.8 正式在稳定版中引入了 Hooks。它在高层级上解决了一些问题:

  • 它引入了使用函数编写所有内容的理念,使代码更加模块化、更易于维护。
  • 它不鼓励使用 HOC 等难以理解的复杂函数。
  • 它不再使用复杂的生命周期,如 componentDidMount、componentDidUpdate 等,免去了编写重复代码的麻烦。

想了解更多内容请点击此处:https://reactjs.org/docs/hooks-intro.html#motivation。

下面来看一个 React Hooks 的示例,看看使用它的典型应用长什么样!示例地址:https://codesandbox.io/embed/3rm5jk86wm?fontsize=14

React.lazy

这个名字起得真是恰如其分!当我们想懒加载组件时就可以用上它了:

const TodoList = React.lazy(() => import("./containers/todoList"));

在 webpack 中使用动态导入时就能用它做优化了。它能用来创建 bundle,从而提高页面加载速度。下面是一个例子,只要在上面的 Codesandbox 演示中把导入改为以下内容即可:

const TodoList = React.lazy(() => import("./containers/todoList"));
const CompletedList = React.lazy(() => import("./containers/completedList"));
const AddNewTask = React.lazy(() => import("./containers/addNewTask"));

如下图所示,创建了许多独立的 bundle:


Suspense

Suspense 很好用,下面的代码就是很好的例子:

// https://codesandbox.io/s/new-6m2gj
import React, { useState, useEffect, Suspense } from "react";
import ReactDOM from "react-dom";
import todoListData from "./containers/todoList/todolistData";
import Header from "./containers/header";
import Clock from "./components/Clock";
import "./styles.css";
 
const TodoList = React.lazy(() => import("./containers/todoList"));
const CompletedList = React.lazy(() => import("./containers/completedList"));
const AddNewTask = React.lazy(() => import("./containers/addNewTask"));
 
function App() {
 const { todolist } = todoListData;
 const [todoListPayload, setTodoListPayload] = useState(todolist);
 const [completedTodoList, setCompletedTodoList] = useState([]);
 
 const addTodoTaskHandler = value => {
 // addTodoTaskHandler
 };
 
 const removeTodoTaskHandler = ({ id }) => {
 // Remove from the set of todo list
 };
 
 const completeTodoTaskHandler = ({ id }) => {
 // Get item to remove
 };
 
return (
 <div className="App">
 <Header title={"My Tasks"} />
 <Clock />
 <div className="PageLayout">
 <Suspense fallback={<div>Loading...</div>}>
 <TodoList
 payload={todoListPayload}
 completeTodoTaskHandler={completeTodoTaskHandler}
 />
 <CompletedList list={completedTodoList} />
 <AddNewTask addTodoTaskHandler={addTodoTaskHandler} />
 </Suspense>
 </div>
 </div>
 );
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

演示链接:https://codesandbox.io/s/new-6m2gj。

仔细检查示例中的代码,我们会看到:

<Suspense fallback={<div>Loading...</div>}>
 <TodoList
 payload={todoListPayload}
 completeTodoTaskHandler={completeTodoTaskHandler}
 />
 <CompletedList list={completedTodoList} />
 <AddNewTask addTodoTaskHandler={addTodoTaskHandler} />
</Suspense>

只要用 Suspense 包装组件就行了,就是这么简单。我们使用 React.lazy() 懒加载了一些组件——TodoList、CompletedList、AddNewTask。由于它会在内部为每个组件生成 bundle,因此网络条件不佳的情况下可能需要花些时间来加载它们。

Suspense 会自动处理加载延迟,显示像 Loading…之类的组件作为 fallback。

未来展望

铺垫结束!下面我们来看看 Suspense 还有什么好玩的内容。

Suspense 和 react-cache

其实 Suspense 在某个 API 被调用时也可以处理我们的加载状态。不过我们先要好好了解一下这个 API。

经过一番搜索,我找到了Shawn Swyx Wang 的 GitHub 库,这里直接引用他文档中的一段话:

React Suspense 是组件从缓存中加载数据时暂停呈现的一种通行方法。它解决的问题:渲染是和 I/O 绑定时的情况。

“从缓存中加载数据”是一个要点,但怎样真正控制这个 API 呢。

Kent C. Dodds 在他的Egghead 课程中讲授了一个重要的概念:如果我们抛出一个 promise,Suspense 会自动得知调用了一个 API 请求。

import React, { Suspense } from "react";
 
fetchArticles() {
 // Some fetch API fetching articles
}
 
let isRequestCalled = false;
function Content() {
 let result = [];
 if (!cache) {
 const promise = fetchArticles();
 isRequestCalled = true;
 throw promise; // Let suspense know
 }
 return <div>Article</div>;
}

当然,这种方法不是最佳选择,它还是有点不正规。所以我们改用 react-cache 来优化一下:

import React, { Suspense } from "react";
 
import { unstable_createResource as createResource } from "react-cache";
 
function fetchArticles() {
 // Some fetch API fetching articles
}
 
const politicalArticles = createResource(fetchArticles);
 
function Content() {
 const result = politicalArticles.read(someKey);
 return <div>Article</div>;
}
 
const Articles = () => {
 return (
 <div>
 <Suspense fallback={<div>loading...</div>}>
 <Content />
 </Suspense>
 </div>
 );
};
 
export default Articles;

react-cache 中的 createResource 从回调中创建资源,返回一个 promise。

所以只要一个 promise 就能让 Suspense 知道它必须显示加载状态;在 promise 被解析之前它将一直显示加载状态。

但这个功能还处于实验阶段。所以就算你遇到了错误也不用慌张,因为 react-cache 仍处于开发阶段。

需要注意,一定要在组件内部使用 read 方法;否则它会抛出一个错误。

// A snippet from the React-cache library
 
function readContext(Context, observedBits) {
 const dispatcher = ReactCurrentDispatcher.current;
 if (dispatcher === null) {
 throw new Error(
 'react-cache: read and preload may only be called from within a ' +
 "component's render. They are not supported in event handlers or " +
 'lifecycle methods.',
 );
 }
 return dispatcher.readContext(Context, observedBits);
}

点击此处查看react-cache 源代码。

总结

现在我们已经了解了 React 未来的发展趋势,有一件事可以确定:React 团队想要让 API 变得越来越简单。

我也很高兴能看到越来越多的库开始支持函数编程。这种模式肯定会彻底改变我们前端的编程方式。我也在关注 React 的并发改进——相关内容可查看官方文档。React-cache 和 Suspense 就是属于并发 react 的功能。

英文原文:https://blog.logrocket.com/the-future-of-react-unfolding-with-suspense/

相关推荐

“三次握手,四次挥手”你真的懂吗?

记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有下文了,面试官貌似也没有深入下去的意...

面试官问:三次握手与四次挥手是怎么完成的?

作者|饶全成来源|码农桃花源记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有...

三次握手和四次挥手的高阶面试题,建议收藏

昨天村长的讲解,真是一语点醒,这样的解释胜过死记硬背。但对于学习者,如果不能有直观感受,可能还是觉得不接地气,今天介绍两个工具,一个是网络抓包工具Wireshark,一个是linux命令tcpdum...

三次握手和四次挥手到底是个什么鬼东西

之前总有是有面试官喜欢问,你知道什么是三次握手么?什么是四次挥手么?为什么握手需要三次,挥手需要四次呢?今天我们就来详细的聊一下这个。1.什么是TCPTCP协议,简单称呼一下的话,那就是传输控制协议,...

加深理解TCP的三次握手与四次挥手

在了解三次握手和四次挥手之前,先要知道TCP报文内部包含了那些东西。熟悉了解TCP报文对日后学习网络和排除方面有很大的帮助,所以,今天为了加深对三次握手的理解,从新去认识TCP报文格式。TCP报文格式...

三次握手 与 四次挥手_三次握手四次挥手大白话

三次握手:①首先Client端发送连接请求报文②Server段接受连接后回复ACK报文,并为这次连接分配资源。③Client端接收到ACK报文后也向Server段发生ACK报文...

动画讲解TCP的3次握手,4次挥手,让你一次看明白

专注于Java领域优质技术,欢迎关注作者:老钱占小狼博客TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一。很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答。本篇尝试...

linux下实现免密传输文件或登录到其他服务器

使用scp传输文件到其他服务器的时候,提示需要输密码,如下:[root@18csetup]#scpLINUX.X64_180000_db_home.zip192.168.133.120:/u0...

Linux如何通过salt免密SCP传输上百台机的脚本?看chatGPT的回答

如何通过salt免密SCP传输上百台机的shell脚本”,下面是chatGPT给出的结果。scp批量免密脚本给出的详细shell脚本如下:#!/bin/bash#源文件路径和目标路径SRC_...

Linux/Mac scp命令上传文件_将hdfs上的文件下载到本地的命令是

语法scp[可选参数]file_sourcefile_target参数说明:-1:强制scp命令使用协议ssh1-2:强制scp命令使用协议ssh2-4:强制scp命令只使用IPv4寻...

Linux常用功能——文件远程传输_linux 远程传输文件

scp是securecopy的简写,是linux系统下基于ssh登陆进行安全的远程文件拷贝命令,用于在Linux下进行远程拷贝文件的命令。和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器...

使用 scp 命令定时拉取服务器备份文件

我们的服务器,每周五必须要做下备份,但总是忘记执行备份这件事情,或者是服务器备份做了,但没有做异地备份。所以通过定时任务自动备份,备份成功之后,在其它服务器上面通过定时任务scp命令自动拉取备份文...

windows下最轻便的FTP/SCP文件管理器

这次推荐的工具叫做winscp,这个工具如果是IT从业人员,又是做服务端相关工作的话,可能无人不知,如果是刚入门,推荐立马上手试试。如果看了觉得有用,欢迎收藏、点赞、关注。官方网站:https://w...

我不是网管 - Linux中使用SCP命令安全复制文件

SCP是linux发行版中的命令行工具,用于通过网络安全地跨系统复制文件和目录。SCP代表安全复制,因为它使用ssh协议复制文件。拷贝时,scp命令建立ssh连接到远程系统。换句话说...

WinSCP软件双系统(Win-Linux)文件传输教程

WinSCP软件是windows下的一款使用ssh协议的开源图形化SFTP客户端,也就是一个文件传输的软件,它有什么优点吗,咱们嵌入式开发中经常会将windows中的文件复制到linux系统当中,比较...

取消回复欢迎 发表评论: