🧠 新的 React 和旧的缓存

恶棍

电极反应-ssr-缓存

安装

用法

React 服务器端渲染优化库

React 组件缓存

React 预渲染组件

React 🚀 快，还是 🐌 慢？这个问题的答案非常简单，无需思考。

• React 很快，仅此而已。React 的速度取决于它所能达到的极致：不会显示太多数据，也不会以每秒 60 帧的速度进行动画。总有更快的对手（比如 Svelte？），但 React 的速度几乎足以应对任何情况。
• React 很慢。再说一遍。让它变慢没什么大不了的——内联 1000 个 SVG 并用 React 全部渲染，或者在服务器端同时渲染 100 个页面。

简而言之 - React 作为客户端库是 👍 的，但作为服务端渲染 - 哦，🔥它会消耗你的 CPU 和 AWS 账单。不是因为它慢，而是因为万事皆有局限。

这是显而易见的 - 您无法比较所有 CPU 都为一个客户（在浏览器中）工作的情况，以及您必须同时为十几个客户端渲染相同内容的情况。

缓解这个问题的方法也显而易见——它以生成而闻名，而对于 React 本身来说，它的核心思想是处理不必要的更新——记忆化。或者，用老式的 SSR 来解释——就是缓存。
缓存小块，缓存大块，缓存页面、数据和中间结果。尽可能多地缓存，让一个客户的渲染结果加快另一个客户的渲染速度。

缓存是一种众所周知的模式，它总是能节省时间！几十年来！对每个人来说都是如此！除了 React。

React 天

那么，React 中缓存是怎么回事？你还记得它的 API 吗？不，你不记得了。根本没有。

您仍然可以缓存renderToString结果 - 没什么大不了的，或者像mxstbr去年为 Spectrum 所做的那样进行缓存。renderToNodeStream

但是我们需要缓存吗？

是的——React 15 确实很慢，而 React 16 即使速度快了很多，也仍然需要一些时间来渲染结果。
任何事情都需要时间。一切都有要求和限制。

React 中的缓存

只要问题存在，就会有许多开发人员利用缓存背景（来自以前使用不同框架或语言的经验）来解决它——新的模式和库就会出现。

恶棍

React-DOM 的替代方案。我们的英雄。节省了数百万 CPU 周期。能够在组件级别处理数据加载，并缓存结果。

完美运行。直到 React 16 才生效。之后就失效了。

$ npm install --save rapscallion

const {
  render,
  template
} = require("rapscallion");

// ...

另一个很棒的组件级缓存工具。另一个侵入 React 并试图改变其工作方式的工具。然而，它不支持 React 16。

npm i electrode-react-ssr-caching

import SSRCaching from "electrode-react-ssr-caching";
import React from 'react';
import ReactDOM from 'react-dom/server';

import SSRCaching from "electrode-react-ssr-caching";
import { renderToString } from "react-dom/server";
import MyComponent from "mycomponent";
// First you should render your component in a loop to prime the JS engine (i.e: V8 for NodeJS)
for( let i = 0; i < 10; i ++ ) {
    renderToString(<MyComponent />);
}

SSRCaching.clearProfileData();
SSRCaching.enableProfiling();
const html

React-SSR 优化

沃尔玛实验室开发的用于记忆和模板化的神奇系统。在 React 14-15 迁移期间曾出现故障，并且未获得 React 16支持。

React-组件缓存

TLDR：实际上是一个有效的！

$ npm install react-component-caching

const ReactCC = require("react-component-caching");
const cache = new ReactCC.ComponentCache();
app.get('/example', async (req,res) => {
    const renderString = await ReactCC.

React 16 使用组件缓存实现更快的服务器端渲染

Sasha Aickin在 2016 年的一次关于加速服务器端渲染方法的演讲中介绍并演示了组件缓存。此后不久，沃尔玛实验室创建了一个组件缓存库，该库具有用于计时渲染的分析功能。这个想法在去年的React Amsterdam上引起了关注，并在 Github 上的讨论中浮出水面。Formidable 的 React 服务器渲染器Rapscallion中也加入了组件缓存 API 。
随着去年 9 月 React 16 的发布，许多此类工作都需要重新启动。React 提高了其服务器端渲染方法的速度，现在提供两种流式传输方法。我们很好奇是否可以通过这些新的和改进的方法利用组件缓存的强大功能。因此，我们构建了React Component Caching，让开发人员能够做到这一点。

但是，你知道，这个库内部相当复杂，在下一个 React 版本中肯定会崩溃——100%。而且面向用户的 API 也相当复杂……但它确实能用，能和 memcache 或其他缓存库协同工作，并且一直是我们的救星……直到今天。

React-Prerendered-Component

那么，让我来介绍一下 React 中组件级缓存的另一种方法，这种方法永远不会被破坏。从设计上来说永远不会。

import {CachedLocation, NotCacheable} from 'react-prerendred-component';

const MyCachedComponent = () => (
  <CachedLocation cacheKey="MyCachedComponent">
    any code you want
  </CachedLocation>
);

// component like this shall not be cached.
const SomeNonPureImportantComponent = () => (
 <NotCacheable>hey {global.userName}</NotCacheable>
);

简单吗？容易吗？它是如何运作的？

工作原理

1. CachedLocation将用以下方式包装您的组件<x-cached-store>{children}<x-cached-store>
2. 的结果renderToString将被分析是否存在此类标记，并且标记的内容将被移入缓存。renderToStream同样的操作是通过 进行的transform streams。
3. 如果key在存储中存在，那么CachedLocation就会渲染<x-cached-restore-key />，并且相同的后置过滤器会用存储的值替换该文本。

这在 HTML/流转换级别上起作用，并且不依赖于任何 React 内部结构。

客户端也一样！CachedLocation它只会用 包装你的数据，div然后使用 来存储/恢复数据dangerouslySetInnerHTML。例如，你可能会缓存那些我在一开始提到的大型 SVG 文件。

<CachedLocation cacheKey="svg-fileName">
  // react component first time, just a string second.
  <MySVRGComponent />
</CachedLocation>

renderToString(...);

// - first render, cache is empty, making a full render
// <x-cached-store-1><svg..../></x-cached-store-1>
// - cache stored, extra tags removed
// <svg .../> 

renderToString(...);

// - second render, cache exists - restore entity
// <x-cached-restore-1/>
// - we know what to restore
// <svg ...

虽然CachedLocation在渲染过程中添加了额外的标签，但它们稍后会被移除。这是一个透明的过程！

它是完全基于纯 HTML 的解决方案，在React 完成工作后即可发挥作用。

XSS 我的朋友？

所以 - 让我们再回想一下 -CachedLocation将在结果 HTML 中放入一些tag，而一些虚拟的（它是）RegEx 将完成剩下的工作。

如果你亲爱的客户也这么做了怎么办？如果tagJSON、脚本以及反之亦然，也会出现同样的情况怎么办？当然，那就糟了:P

所以，在实际应用中，这个库不会使用如此明显的标签名称，而是会使用nanoid在每次渲染时生成唯一的标签名称。这样，就不会出现 XSS 漏洞和误报，放心吧。

<x-cached-supersecretstring-11 /> // it's "safe"

唯一的问题是，现在在不同线程中生成的缓存彼此不兼容，因此在分布式缓存的情况下，您必须super-secret-seed自己指定。

模板化

这是一个很长的术语，可能不太正确，代表较少变化的记忆。

例如，标题dev.to包含你的头像，但其他内容相同，你可以将其“模板化”到静态和缓存中<Header/>。如果你按用户缓存标题，会发生什么？嗯，缓存不是无限的。

图片来自Scaling React 服务器端渲染。

<Button>unuqieText</Button>您可能不需要拥有 100500 个不同的变量<Button>#text#</Button>- 因此您将只记住复杂的 html 标记，并使用简单的方法添加一些“变量” replace。

虽然使用字符串替换并不十分安全，但这个库为您提供了一些组件来注入占位符，它使用 Context API 来深入研究 props，并且只需要进行少量的代码样式更改即可使用。

const UserHeader = () => (
 <div>
   .....
   <Placeholder name="userName"/>
   ....
 </div>
)

renderToString(<CacheLocation variables={{userName:'Joe'}}><UserHeader/></CacheLocation>);

// <x-cached-store-1 userName="Joe">....{x-cached-placeholder-userName}...</x-cached-store-1>

renderToString(<CacheLocation variables={{userName:'Jack'}}><UserHeader/></CacheLocation>);

// <x-cached-restore-1 userName="Jack"/>
// ....{x-cached-placeholder-userName}...
// ....Jack...

这是一个非常强大的策略，通过将全新的 React App 转换为旧式模板引擎，可以减少内存使用量并使您的应用程序性能飞速提升。

这真是🚀非常🚀快🚀。

附言：这可以实现亚毫秒级的服务器端渲染 (SSR)，react-component-caching这一点已经得到证实。
附言：但这还不适用于客户端缓存。使用变量进行 CSR 缓存会禁用缓存。

该技术的另一个名称是缓存interpolation，如果您想真正了解片段缓存背后的一切，请阅读文章。

缓存在哪里？

这种方法的另一个很酷的时刻是cache。一个简单的 React 16/Suspense 兼容缓存模型。

• 同步get缓存
• 同步set缓存。
• 没有可用的缓存？——抛出一个承诺！

您不能使用react-cache，只要它使用不同的模型（没有set），但任何其他缓存，包括内存或共享内存的缓存 - 都很简单。

但不是memcache，只要不支持异步缓存。

预渲染组件为您提供了组件的功能memoization，并且templatization适用于服务器和客户端，并且将来不会中断，因为它就是这样构建的 - 永远不会让您失望。

尝试一下，
或者只是想想。

PS：顺便说一下，react-prerendered-component 是另一篇文章的英雄：

💡 2019 年的 React 代码拆分

安东·科尔祖诺夫・2019年3月19日

#react #javascript #ssr #codesplitting