2023-第三十四周

该周报主要为各个地方内容的汇总整理

• 技术
  • React Suspense in three different architectures
  • clarity-js 源码分析系列（一）之代码模块
  • clarity-js 源码分析系列（二）之数据处理
  • clarity-js 源码分析系列（三）之元素变化处理
  • Can React Server Actions finally fix forms?
  • Why doesn't TypeScript properly type Object.keys?
  • What Is Streaming In The App Router?
  • Ditch process.env, use a typed config
• 更新
  • Debugging speculation rules
  • What's New in DevTools (Chrome 117)
  • Introducing the scheduler.yield origin trial
• 其他
  • How Desmos uses Pratt Parsers
  • 我的個人知識管理系統

技术

React Suspense in three different architectures

本文介绍了 React Suspense 在不同的渲染架构中的四个用例。首先是在客户端渲染中，使用 React.lazy 和 Suspense 可以实现按需加载组件和在数据获取时显示加载状态。其次是在服务器端渲染中，通过 Suspense 可以实现选择性的组件注水，提供更好的首次加载体验。最后是在服务器组件中，通过 Suspense 可以在数据获取时显示加载状态，实现流式渲染。总之，React Suspense 在不同的渲染架构中都有不同的用途和优势。

• React Suspense 有三种常见的渲染架构，分别是客户端渲染、服务器端渲染和服务器组件。
• 在客户端渲染中，可以使用 React.lazy 和 Suspense 实现按需加载组件和处理数据获取过程中的加载状态。
• 在服务器端渲染中，可以使用 Suspense 实现选择性的组件水合和渲染，提高用户体验。
• 在服务器组件中，可以使用 Suspense 实现数据获取过程中的加载状态，并通过流式传输提供更好的用户体验。

clarity-js 源码分析系列（一）之代码模块

clarity-js 源码分析系列（二）之数据处理

clarity-js 源码分析系列（三）之元素变化处理

Can React Server Actions finally fix forms?

React Server Actions 是一种在客户端调用服务器上操作的函数。它可以简化数据提交的过程，让前端开发人员可以像调用函数一样提交数据到服务器。本文介绍了如何使用 React Server Actions 构建一个上传视频到 Mux 的应用程序，并且讨论了它的优点和一些注意事项。

• React Server Actions 可以简化在 React 中发送数据的过程。
• React Server Actions 可以像调用函数一样轻松地向服务器发送数据。
• 使用 React Server Actions 可以避免编写独立的 API 和冗长的代码。

Why doesn't TypeScript properly type Object.keys?

该文章主要讨论了 TypeScript 中的结构类型系统以及 Object.keys 方法的类型定义。结构类型系统允许对象包含超出定义的属性，但不允许缺少或类型不匹配的属性。Object.keys 方法的类型定义是为了遵循结构类型系统的原则。文章还提到了如何利用结构类型系统的灵活性来设计更具适应性的代码。

• TypeScript 的 Object.keys 方法不接受泛型参数的原因是因为 TypeScript 的结构类型系统允许对象包含未知的属性。
• 结构类型系统的灵活性使接口只需声明所需的属性，从而提供了更大的灵活性和可复用性。
• 使用结构类型系统时需要注意可能导致的属性错误和类型错误。

What Is Streaming In The App Router?

本文介绍了 App Router 中的流式传输（streaming）功能，它是使用 App Router 来提供页面的主要原因。流式传输可以将页面的关键数据和非关键数据区分开来，关键数据必须在客户端看到页面之前加载，而非关键数据则可以在页面加载后再加载。相比之前的 Pages Router，App Router 通过 React Server Components 实现了组件级别的数据请求，可以将数据的加载与页面的渲染分开处理。流式传输通过保持服务器与客户端之间的连接，等待所有请求完成后关闭连接，从而实现了更快的页面加载速度和更好的用户体验。同时，流式传输还有利于搜索引擎优化（SEO），因为即使在数据加载过程中，所有的 HTML 内容也会在一次响应中发送给搜索引擎爬虫。总之，流式传输可以提供更快感受的网站，并且在关键数据加载完成之前，用户可以立即进行页面导航。

• 流媒体是 App 路由器中一个重要的功能，它可以将关键数据和非关键数据分开加载，提高页面加载速度。
• 使用 App 路由器的 React Server Components，每个组件可以单独请求自己所需的数据，实现数据的分块加载和渲染。
• 通过流媒体的方式，网页可以在请求未完成时先展示部分内容，提升用户体验，同时也有利于搜索引擎优化。

Ditch process.env, use a typed config

这篇文章讲述了如何将应用程序的配置集中管理，并使用环境变量和类型安全的方式来访问配置值。文章介绍了如何将配置集中在一个文件中，并使用类型转换和验证来处理配置值。通过这种方式，可以更好地管理应用程序的配置，并确保配置的正确性。

• 集中配置：将应用程序的配置集中在一个地方，便于管理和查看。
• 强制类型转换：使用有用的函数将配置值转换为更可用的类型，如字符串、数字和布尔值。
• 验证配置：使用工具如 Zod 验证配置的正确性，以避免配置错误导致应用程序出现问题。

更新

Debugging speculation rules

这篇文章介绍了如何使用 Chrome 开发者工具来调试预取和预渲染规则。预取规则可以提前获取下一个页面的文档，而预渲染规则可以在后台渲染整个页面，以便在用户实际导航到该页面时立即加载。文章详细介绍了如何使用 Chrome 开发者工具中的预加载面板来查看规则和预加载的状态，以及如何在网络面板、元素面板和控制台面板中调试预渲染的页面。

• 本文介绍了使用 Chrome DevTools 工具来调试预取和预渲染规则的方法。
• 文章详细讲解了预取规则的使用和调试技巧，包括在网络面板中查看预取请求和使用预加载面板进行调试。
• 文章还介绍了预渲染规则的使用和调试方法，包括使用预加载面板和其他 DevTools 面板查看预渲染页面的信息。

What's New in DevTools (Chrome 117)

本文介绍了 DevTools 的新功能和改进。其中包括改进了网络面板、覆盖本地网页内容的速度更快、覆盖 XHR 和 fetch 请求的内容、隐藏 Chrome 扩展请求、人类可读的 HTTP 状态码、美化 JSON 子类型的响应、查看网络事件的抓取优先级变化、源代码设置默认启用、改进第三方 cookie 问题的调试、调试预加载、新的颜色方案、Lighthouse 10.4.0 更新、C/C++ WebAssembly 调试扩展开源等。此外还有其他一些修复和改进。还介绍了新的实验性功能：prefers-reduced-transparency。

• Network panel 改进：可以更快地本地覆盖网络内容，包括模拟响应头和远程资源的内容。
• 支持覆盖 XHR 和 fetch 请求的内容，可以模拟 API 响应，方便调试网页。
• 新增隐藏 Chrome 扩展请求的过滤器，可以过滤掉与扩展相关的请求，提高代码开发的效率。

Introducing the scheduler.yield origin trial

Chrome 团队正在进行一个原型试验，试验中的新 API 称为 scheduler.yield，它可以帮助网页开发人员更好地控制主线程的执行。传统的 yield 方法（如使用 setTimeout）存在一些问题，而 scheduler.yield 可以解决这些问题。它可以让开发人员更灵活地控制任务的执行顺序，提高网页的响应速度。scheduler.yield 是一个非常有潜力的 API，有望在未来成为核心网络指标之一。

• 为了提高网页响应速度，Chrome 团队正在进行 origin trial 测试，试验了 scheduler.yield API，它可以更好地控制主线程的任务调度。
• 当任务执行时间过长时，会导致页面反应迟缓，用户体验下降，因此通过显式地 yield 控制任务，可以提升页面对用户输入的响应速度。
• scheduler.yield 相比于 setTimeout 等传统的 yield 方法，可以将任务放在队列的前端，避免被其他任务拖延，从而更好地平衡用户交互和其他非用户交互任务的执行。

其他

How Desmos uses Pratt Parsers

解析是将字符序列转换为抽象语法树的过程。它根据运算符的优先级和结合性，将字符串解析成一个表示表达式结构的树形结构。这个过程是递归的，根据运算符的优先级和结合性，逐步构建抽象语法树。通过解析，我们可以计算表达式的值或者美化它的显示。

• 解析是将字符序列转换为抽象语法树的过程，它能帮助我们理解表达式的结构和含义。
• Pratt 解析器使用绑定力的概念来确定操作符的优先级和结合性，从而构建正确的语法树。
• 通过递归调用和循环积累的方式，我们可以在解析过程中正确处理运算符的优先级和结合性。

我的個人知識管理系統

本文介绍了一套个人知识管理系统，涵盖了“探索、捕捉、发展、精炼、交流”等五个阶段，并提供了一些适合搭配的工具。这套系统适合那些常常感到被信息淹没、想法破碎、找不到记录、缺乏系统性理解的人。作者也承诺将在另一篇文章中提供更多实际案例和操作步骤。

当你强调生产力时，实际上是在强调，人必须始终忙碌。每一刻都有事情要做，而且总是有更多事情要做！因此，你会有做不完的工作，闲暇时间越来越少，工作压力越来越大。

程序员的真正目标，应该是“有效性”（effective）。你的劳动是有效的，切实完成了项目。

当你把“有效性”当作目标时，只要有效完成了项目，你就可以停下来了。因此，你可以追求做更少的事情、用更少的时间达到目标，这样你会得到更多的闲暇和休息，这才是可持久的。

生产力目标（productive）占用你所有的时间，把你的日程排满，追求尽可能多的产出。

有效性目标（effective）正好相反，它不追求添加更多的任务，而且减少那些不该做的事情。

如果有人称赞你，说你的生产力很高，或者公司以生产力作为考核指标。你可能需要小心，你有变成机器的风险。更好的称赞应该是，你的劳动很有效，很高效。

JavaScript 之所以流行，只是因为它在浏览器中具有垄断地位，没有替代品，我们都被它扣为人质。

-- Hacker News 读者