RichTalk 快报第 8 期

头条

Ant Design 5.0 Alpha

介绍：zhuanlan.zhihu.com/p/569763868

官网：next.ant.design/index-cn

交互系统优化：增加圆角大小，减少线条使用等
新的动态主题方案：使用 CSS-in-JS 替代了 less 方案
新增了一些组件：
- Tour 漫游式引导
- QrCode 二维码
- WaterMark 水印
- FloatButton 悬浮按钮
废弃静态方法：不处于 React 生命周期内的静态方法会出现各种各样不适配的问题，所以类似于message.error的静态方法调用将不再被推荐，推荐使用这些组件的 hooks 版本

React 渲染的未来

原文：prateeksurana.me/blog/future…

翻译：mp.weixin.qq.com/s/8j1-ZT_df…

当前渲染模式

客户端渲染（CSR）

CSR 的优点

可以非常轻松地通过 CDN 提供服务；
允许我们在不刷新整个页面的情况下进行导航，从而提供良好的用户体验。
浏览器可以立即开始加载字体、CSS 和 JavaScript。

CSR 的缺点

用户首先需要下载并处理所有内容才能看到页面上的内容。
初始页面加载时会遇到很多 loaders。此外，如果子组件需要获取数据，情况可能会变得更糟，这样它们的父组件获取完所有数据后才会渲染它们，这可能会导致大量 loaders 和糟糕的 Network Waterfall。
不利于SEO

服务端渲染（SSR）

SSR 的优点

利于SEO 。
用户可以很快看到内容，而不是像 CSR 应用那样查看空白屏幕。

SSR 的缺点

由于我们在每次请求时首先在服务端渲染页面，并且必须等待页面的数据需求，这可能会导致 TTFB 速度变慢。
用户仍然需要等待下载页面的所有 JavaScript 并对其进行处理。

新的渲染模式

流式渲染： Suspense，将应用分解为更小的独立单元，独立渲染

2.服务端组件：让服务端完成一部分UI渲染的工作

将 React 组件区分为两个类型：客户端组件 和 服务端组件。使用不同的文件扩展名（.client.js 和.server.js）来区分它们。

客户端组件指的就是现在我们日常开发中使用的 React 组件。
服务端组件从某种意义上来说它是一个新型组件，该类型的组件会在服务端完成渲染后，再发送到客户端。

由于服务端组件是静态的、服务端渲染的，服务端组件不能有任何交互行为（例如：不能使用 useState()，useEffect()）。React 拿到数据时，将新的 UI 整体的合并到客户端 UI 树里面，此过程不会对客户端其他状态产生影响。此过程可以无限次数的执行。React 通过整体 UI 模块更新的方式，达到保持客户端状态的目的，极大的增强了用户体验。

// NoteWithMarkdown.server.js - Server Component === 包大小为0

import marked from 'marked'; // 包大小为0
import sanitizeHtml from 'sanitize-html'; // 包大小为0

function NoteWithMarkdown({text}) {
  const html = sanitizeHtml(marked(text));
  return (/* render */);
}

React RFC：use

github.com/reactjs/rfc…

使用与 await 类似

// `use` inside of a React component or Hook...
const data = use(promise);

// ...roughly equates to `await` in an async function
const data = await promise;

优势：

可以缓存Promise，只要Promise对象没有发生改变，它将会使用被缓存 Promise 的值，不会重新发起请求。
用户可以无需关心 Promise 的返回结果状态，当Promise没有返回正确的结果时，将会通过抛出特定的异常以暂停组件的渲染。直至Promise返回结果时，它会重新渲染组件。

使用示例：

另外，与其他Hook不同的是，它可以在条件、块和循环语句中使用：

function Note({id, shouldIncludeAuthor}) {
  const note = use(fetchNote(id));

  let byline = null;
  if (shouldIncludeAuthor) {
    // ✅ This works!
    const author = use(fetchNoteAuthor(note.authorId));
    byline = <h2>{author.displayName}</h2>;
  }

  return (
    <div>
      <h1>{note.title}</h1>
      {byline}
      <section>{note.body}</section>
    </div>
  );
}

function ItemsWithForLoop() {
  const items = [];
  for (const id of ids) {
    // ✅ This works! The parent function is a component.
    const data = use(fetchThing(id));
    items.push(<Item key={id} data={data} />);
  }
  return items;
}

拓展阅读：

动态

Deno Deploy：主打边缘计算，相比 Heroku 平均 300ms TTFB 的云服务，能降低到平均 100ms。
JavaScript Web 框架的新浪潮：JavaScript框架演进史。通过研究过去在构建大规模 Web 应用时的痛点来了解当前的情况。不要把注意力集中在快速增长的解决方案上，而是从潜在问题入手。每一种架构都会有不同的答案，并且会有不同的权衡。
2022 Web 网络年鉴：
- 77% 的请求使用了 HTTP/2，去年是 73%；CDN 请求中 95% 的请求是 HTTP/2；
- 支持 HTTP/3 的客户端在 6 月 1 日这天占比为 15%，去年 7 月 1 日占比为 10%；
- CSS 加载体积，九分位点涨了 7%；
- JavaScript 加载体积，九分位点涨了 8%+，九分位达到 PC 每页 1.5M / 移动每页 1.4M JavaScript 水平；
- 未使用的 JavaScript 九分位点达到 600k / 页水平；
- 76% 的页面的 head 标签有 async 加载的 <scripts>，42% 有 defer 的 <scripts>，28% 有 defer 和 async 的 <scripts>；
- 12% 的页面加载了 Web Worker；
- 在流量前 1000 的站点中，40% 用了 Babel，17% 使用了 Webpack，1.3% 用了 Parcel；
- 77% 的页面在 head 中有阻塞页面加载的 <scripts>；
- WebAssembly 前三应用场景为 Amazon IVS（可交互视频服务）、Hyphenopoly（一个 CSS hyphenation 的仓库）、微软 Blazor 上。
Templating in HTML：<template>标签用来隐藏元素，它可以被JavaScript读取，但是对css失效。文章中具体讲述了如何使用它，以及它与display: none的区别。
Bun 0.2.0，支持 bun --hot 热加载，提升了多项操作的性能并优化了内存损耗。
Rollup v3.0.0：Rollup 发布 v3.0.0，带来了大量更新。其中 Breaking Change 包括最低支持 Node 14.18.0、浏览器构建拆成单独的包 @rollup/browse、Node 构建使用 node: 前缀导入内置模块、移除一些以前被废弃的功能，使用时提示警告等。还有包括 Options 配置、插件 API、以及一系列的新特性。
Node 18.11.0
- 更新 V8 引擎到 v10.7
- 默认开启 HTTP(S)/1.1 KeepAlive
- 支持 node --watch 观察文件系统并重启服务。

RichTalk 快报 第 8 期

头条

Ant Design 5.0 Alpha

React 渲染的未来

React RFC：use

动态

RichTalk 快报第 8 期