超越React 16: Time Slicense和Suspen

作者: 魂斗驴 | 来源:发表于2021-03-12 09:06 被阅读0次

超越React 16: Time Slicense和Suspen
2019 1-29
react-native webrtc开发
react-redux
1-Redux Introduction
13-React Redux与Hooks共同使用
亲子打卡日记Dec.6th，overcast
react16 路由配置
常用的版本
ReactDom.render 源码阅读

ReactJS是一个UI库，是前端开发人员构建JavaScript应用程序时非常强大的工具。在本文中，我将向您介绍ReactJS的一些功能。

ReactJS是一个JavaScript库，由Facebook构建和维护。截至今天，它为如此众多的流行网络和移动平台提供支持，例如Twitter，Airbnb，Lyft，Dropbox，Pinterest，Whatsapp和Instagram。ReactJS的最新版本是React 16附带了很多功能，例如Error Boundaries，Custom DOM Attributes definition，Fragments as return types，Portals和其他许多人。

但是，ReactJS团队并不懈怠。他们正在努力寻找使React在UI组件开发中成为高性能库的新方法。先睹为快到未来做出反应的新功能是由全世界展示终极版的创造者和阵营的核心团队成员，丹·阿布拉莫夫在JSConf Iceland, 2018如果你还没有看过丹的谈话，这里是演示。

ReactJS即将发生什么？

ReactJS团队的目标一直是使开发人员更轻松地使用ReactJS建立出色的用户体验。建立良好的用户体验需要将开发人员的注意力分为两个不同的类别：

计算能力
网络速度

阐明了这些类别之后，您就开始问以下问题：

用户是否在慢速网络上？如果是这样，用户体验如何？我们（开发人员）可以控制加载状态吗？
用户是否在低端设备（CPU能力低的设备）上？如果是这样，使用该应用程序仍然有效吗？
用户是否在快速网络上？如果是这样，体验是否无缝？没有混乱的用户界面。
用户是否在高端设备（具有较高CPU能力的设备）上？如果是这样，渲染是否完美无瑕？

这些是需要回答的有效问题。让我们探讨一下ReactJS中的时间分片和暂停如何为每个人提供最佳的用户体验。

时间分片 Time Slicing

在Dan的演讲中，他说：“我们已经建立了一种通用的方法，以确保呈现高优先级的更新（例如用户输入）不会因呈现低优先级的更新而被阻止”。这是什么意思？ReactJS团队将这个概念命名为“时间切片”。让我用更简单的方式解释一下。

我们已经建立了一种通用的方法，以确保呈现高优先级的更新不会因呈现低优先级的更新而被阻止，例如用户输入。”

ReactJS关注设备的CPU能力。在渲染时，ReactJS确保不会阻塞线程，从而导致应用程序冻结。

时间片允许现在运行在React Fiber上的ReactJS在空闲回调期间将子组件上的更新计算拆分为多个块，并且渲染工作分散在多个帧上。现在，在异步渲染过程中，它可以确保如果用户的设备非常快，则应用内更新会感到是同步的，而如果用户的设备很慢，则应用会迅速响应。没有冻结，没有讨厌的UI体验！

暂停 Suspense

在Dan的演讲中，他说：“我们为组件建立了一种通用方法，可以在组件加载异步数据时暂停渲染”。

暂停功能的简单定义是，ReactJS可以暂停任何状态更新，直到准备好呈现已提取的数据为止。本质上，ReactJS在等待数据完全提取的同时挂起组件树。在暂停期间，它将继续处理其他高优先级更新。

我们为组件构建了一种通用方法，使组件在加载异步数据时可以暂停渲染。”

暂停功能的作者安德鲁·克拉克（Andrew Clark）在以下鸣叫中对暂停功能的工作方式进行了实际分解：

image.png

丹使用的API从Future React所谓的createFetcher（这个名字很可能会改变）在他的演示，演示如何暂停功能的工作原理。该createFetcher函数是一个基本的缓存系统，该系统允许React暂停来自render方法的数据获取请求。根据安德鲁·克拉克（Andrew Clark）的说法，它称为simple-cache-provider。

我将从React Apollo团队的初始实现中借用一个实际示例，向您展示暂停是如何工作的。React Apollo团队通过挂起GraphQL查询的结果来模仿暂停功能。

const MOVIE_QUERY = gql`
  query GetMovie($id: Int!) {
    movie(id: $id) {
      id
      title
      overview
      poster_path
    }
  }
`;
function MovieInfo({ movie, clearActiveResult }) {
  return (
    <Query asyncMode query={MOVIE_QUERY} variables={{ id: movie.id }}>
      {({ data: { movie } }) => (
        <Fragment>
          <FullPoster movie={movie} />
          <h2>{movie.title}</h2>
          <div>{movie.overview}</div>
        </Fragment>
      )}
    </Query>
  );
}

GraphQL查询

在上面的示例中，有一个asyncMode附加到Query component，可以进行异步渲染。下面的示例代码显示了Query组件中的render方法。

....
if (loading) {
    if(this.props.asyncMode) {
        throw this.state.queryObservable!.result();
    }
}
Object.assign(data.data, this.previousData, currentResult.data);

查询组件渲染方法

如果async打开该模式，渲染将暂停，直到获取数据为止。在上面的示例中，它在异步模式下抛出了Promise。在暂停期间，开发人员现在可以通过使用带有附有时间限制的组件（如下所示）或通过的loadingAPI方法来有效地控制加载状态createFetcher。

<Placeholder
    delayMs={1000}
    fallback={<Loadingsize="medium" color="blue" />}

注意： Dan Abramov提到了中有一个加载API的概念simple-cache-provider。它可能作为Loading组件着陆，或者名称可能会在即将发布的ReactJS版本中更改。

在React中，如果某个组件挂起，我们将尽可能深地呈现同级。暂停表示“不承诺”，而不是“不和解”。-安德鲁·克拉克（Andrew Clark）

另一个用例是Code splitting。代码拆分是通过仅在应用程序中加载特定页面所需的代码来提高性能的概念。Code splitting与该suspense功能配合良好。

import { createFetcher } from 'React';

// dynamic imports
const moviePageFetcher = createFetcher(
    () => import('./MoviePage')
);

// get the MoviePage component
const moviePage = moviePageFetcher.read().default;

...

上面的代码仅在需要时才通过Movie组件使用暂停功能来加载MoviePage组件createFetcher。