react 使用缓存_React缓存，时间分片和使用同步API的提取

react 使用缓存

by Marvin Frachet

由Marvin Frachet

React缓存，时间分片和使用同步API的提取 (React-cache, time slicing, and fetching with a synchronous API)

Well, this year seems to be the year of React. You’ve probably heard of the new killer feature that is coming with the 16.7-alpha.0 — Hooks. You’ve probably also heard about some other great and cool stuff like Time Slicing or even Suspense.

好吧，今年似乎是React的一年。 您可能已经听说过16.7-alpha.0附带的新杀手级功能-挂钩。 您可能还听说过其他一些很棒的东西，例如“时间片”或“暂停”。

This article doesn’t aim at describing how to use some of the new features but rather at proving how they may have been built. Just for the sake of understanding what we are playing with.

本文的目的不是描述 如何使用某些新功能，而不是证明它们是如何构建的。 只是为了了解我们在玩什么。

It’s also written in the way I have discovered the feature. It’s probably not the way it has been thought up, but this is how I got the points.

它也是按照我发现该功能的方式编写的。 这可能不是经过深思熟虑的方式，但这就是我的观点。

What you’ll find while reading:

阅读时会发现：

• Async JavaScript and the event loop
  异步JavaScript和事件循环
• Algebraic Effects in React, with example
  React中的代数效应，例如
• Fiber and React Phases
  纤维和React阶段

我为什么写这篇文章？ (Why did I write this post?)

What made me want to write this post was this special, and experimental, feature that allows the use of asynchronous operations using a synchronous API:

让我想要写这篇文章的是这项特殊的，实验性的功能，它允许通过同步 API使用异步操作：

const bulbasaur = ApiResource.read()?… What the? Synchronous?!

const bulbasaur = ApiResource.read()吗？……什么？ 同步吗？

The react-cache library creates the ability to use asynchronous operations with a synchronous API. This is the feature that made me want to learn how React is working under the hood. Here’s a presentation by presented by Dan Abramov and Andrew Clark on this library:

react-cache库创建了将异步操作与同步API结合使用的功能。 这就是让我想了解React如何在幕后工作的功能。 这是Dan Abramov和Andrew Clark在此库上的演示文稿：

How is that even possible? How can we get some remote data using synchronous calls?

这怎么可能呢？ 我们如何使用同步调用获取一些远程数据？

Let’s deep dive into this example and try to understand how react-cache implements such a functionality and discover how it can work. This story starts with the fiber architecture.

让我们深入研究此示例，并尝试了解react-cache如何实现这种功能并发现其功能。 这个故事始于光纤架构 。

控制JavaScript操作 (Controlling JavaScript operations)

Fiber architecture allows React to take control over task executions. It has been built to solve multiple problems that React suffered from. Here are the two that caught my attention:

光纤架构使React可以控制任务执行。 它是为解决React所遇到的多个问题而构建的。 这是引起我注意的两个：

• prioritising over specific events, like user input over data fetching
  优先处理特定事件，例如用户输入优先于数据获取
• asynchronously splitting React computation to retain the main thread availability and to avoid to block it during long rendering processes