2024-第二十一周

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

技术

⭐️⭐️⭐️Snappy UI Optimization with useDeferredValue

React 提供了许多优化应用性能的工具，其中之一是 useDeferredValue，它可以将 UI 分成高优先级和低优先级区域，通过延迟处理低优先级部分来提高性能。文章以实际案例介绍了如何使用 useDeferredValue 来解决 UI 性能问题，并解释了其原理和注意事项。

• useDeferredValue 是 React 中的一个强大工具，可以将 UI 分为高优先级和低优先级部分，从而显著提高应用程序的性能。
• 通过使用 React.memo() 包裹低优先级组件，可以利用 useDeferredValue 来延迟渲染低优先级部分，从而避免不必要的重复渲染。
• 在 React 19 中，可以通过指定初始值来加速初始渲染，从而进一步优化应用程序的性能。

React Compiler

这篇文章介绍了新的实验性 React 编译器，以及如何成功尝试并使用它。它包括了编译器的功能、用途、安装方法和故障排除，还提到了一些注意事项和建议。文章指出了编译器的实验性质，并建议在稳定版本发布前等待，但也鼓励开发者在小型实验中尝试并提供反馈。

• React Compiler 是一个实验性的编译器，可自动优化 React 应用程序的渲染性能，通过自动添加记忆化来避免不必要的重新渲染。
• 它包括一个 eslint 插件，可在编辑器中显示编译器的分析结果，帮助开发人员改善代码质量。
• 使用 React Compiler 需要 React 19 Beta，并且通过一些配置和指令可以在现有项目中逐步启用编译器，或者在新项目中全面启用。

Merging Remix and React Router

这篇文章介绍了 Remix 团队与 React Router 的演变和合并。Remix 团队将发布 React Router v7，该版本将吸收 Remix 的功能，并为 React 社区带来一系列新特性。作者表示希望让更多的 React 项目能够从这一合并中受益，并承诺提供流畅的升级路径。同时，Remix 团队也透露他们将继续致力于未来的创新，以帮助开发者构建更优秀的网站。

• Remix 团队宣布他们将把 Remix 框架的核心功能整合进 React Router v7 中，以便让更多项目能够轻松升级并享受到这些功能。
• 通过整合自动代码分割、简化数据加载、服务器渲染等功能，Remix 团队希望为 React 社区提供更好的构建网站的方式，同时推进 React Router 的发展。
• 在未来，Remix 团队计划将精力集中在稳定 React Router v7，并继续构建更强大、更以服务器为中心的新功能，以帮助开发人员构建更好的网站。

The Best ESLint Rules for React Projects

这篇文章介绍了在 React 项目中使用 ESLint 的重要性，以及针对 React 项目定制的一些有用的 ESLint 插件和规则。作者分享了他的完整 ESLint 配置，并详细讨论了 React 项目中的常见问题和最佳实践，包括 React 插件、Hooks 规则、React Refresh、可访问性检查、命名规范、文件命名规则、TS/JSDoc 等。文章强调了使用严格的规则可以提高代码质量和一致性，同时鼓励根据项目和团队需求调整规则，以及提供了自定义 ESLint 规则的 NPM 包。

• ESLint 可以帮助 React 项目捕捉常见错误、代码异味，并定义代码库的常规约定，提高代码质量和一致性。
• 该文介绍了针对 React 项目的一些有价值的 ESLint 插件和规则，包括对 React 插件、Hooks、文件命名规范、TS/JSDoc 等方面的配置和建议。
• 作者建议根据项目需求调整规则，并强调从较严格的规则开始，逐步放宽以减少误报，鼓励开发人员对代码进行批判性思考，并提供了自定义 ESLint 配置的 NPM 包。

工具

tshy

一种混合（支持 CommonJS 和 ESM）的 TypeScript 节点包构建工具。使用简单模式编写的模块可以在 ESM 和 CommonJS 环境中轻松运行。

compromise

初级自然语言处理

env-var

在 Node.js 中对环境变量进行验证、清理和类型转换

hamburger-react

React.js 中的动画汉堡菜单图标仅有 1.5 KB 大小。

spin-delay

React 智能加载辅助工具，用于管理加载状态的持续时间。

restore-scroll

🌀 在页面导航时恢复元素的滚动位置

shell-ask

直接从您的终端向大语言模型提问

restyle

给你的 React 组件添加 CSS 样式的最简单方法

更新

Next.js 15 RC

这段文字介绍了 Next.js 15 Release Candidate (RC) 版本的新特性和改进。这个版本支持 React 19 RC，引入了 React 编译器、部分预渲染和 next/after 等实验性功能。此外，还介绍了缓存的更新和 create-next-app 工具的更新。另外，还列举了一些其他变化和对该版本做出贡献的开发者名单。

• Next.js 15 Release Candidate (RC) 提供了多项新功能和改进，包括对 React 19 RC 的支持、实验性的 React 编译器以及部分预渲染等，开发者可以通过测试最新功能来提前体验稳定版本的特性。
• 更新了对 React 19 RC 的支持，增加了对 React 编译器的实验性支持，该编译器可以通过优化代码减少手动记忆化的 API 使用，简化代码并减少错误。
• 对缓存机制进行了改进，包括不再默认缓存 fetch 请求、GET 路由处理程序和客户端导航，以及增加了部分预渲染和执行响应后代码的实验性功能。

Astro 4.9

Astro 4.9 发布了长期期待的 Container API、React 19 支持和稳定的实验性功能。Container API 允许在 Astro 应用之外渲染组件，并提供了示例和测试指南。同时也加入了对 React 19 的全面支持，并介绍了 Astro Actions 的新功能。此外，本次发布稳定了 CSRF 保护和 i18n 域支持，并包含了一些小改进和 bug 修复。

• Astro 4.9 发布了长期期待的 Container API，使得可以在 Astro 组件外部进行渲染。
• 支持 React 19，并为 Astro Actions 增加了新功能，如使用 useActionState() 钩子追踪表单动作的“pending”和“result”值。
• 通过稳定实验性功能，Astro 4.9 解决了 CSRF 保护和 i18n 域支持的稳定性问题，简化了配置和使用流程。

设计

UI Density

这篇文章讨论了界面密度的各个方面，包括视觉密度、信息密度、设计密度、时间密度和价值密度。作者提出界面密度是用户从界面获取的价值除以界面所占据的时间和空间。文章解释了各种密度对用户体验和软件的影响，并探讨了如何设计更具密度的界面以提供更大的价值。

• UI 密度包括视觉密度、信息密度和设计密度，是指界面所占用的时间和空间与用户获得的价值之间的比率。
• 界面的时间密度取决于用户在单位时间内可以完成的操作数量，而界面的价值密度则关乎用户获得的价值与界面所占用的时间和空间之间的关系。
• 通过设计更紧凑的界面和提高用户体验的效率，可以增加界面的价值密度，从而为用户提供更多的价值。

On compliance vs readability: Generating text colors with CSS

本文讨论了如何使用已广泛发布的相对颜色功能来模拟即将推出的 CSS contrast-color() 函数。文章首先介绍了相对颜色功能以及其在解决调整颜色变化中的灵活性方面的优势，并指出其在大多数浏览器中已经发布。然后讨论了 CSS contrast-color() 函数的设计目的，以及通过相对颜色功能

• 相对颜色 (RCS) 可以通过对任何支持的颜色空间中的颜色分量进行任意数学运算，从现有颜色值中派生出新颜色。
• CSS contrast-color() 函数的设计旨在解决自动指定可在任意背景上保证可读的文本颜色的问题，为用户定义的颜色和其他开发人员定义的颜色提供灵活的默认文本颜色选择。
• 通过实验和计算，可以确定一种亮度值阈值，高于该值黑色文本可读，低于该值白色文本可读，为实现自动计算对比文本颜色提供了依据。

AI

ollama-js

Ollama JavaScript 库

其他

我的职业建议是，行动要急不可耐，对于结果要抱有耐心。

-- 《给年轻自己的职业建议》

大量的面试和考试，基本上是在测试你能在多大程度上替代编译器。比如，Java 认证考试倾向于考察语法和编译问题，而不是实际编程的能力或系统设计的能力。

-- 《我是程序员而不是编译器》

20 多岁时，我跟一个长辈说：“我很担心，别人会怎么看待我做的那个决定。”长辈说：“放心吧，你没有观众的。”

现在想起来，我认为这是我得到过的最好建议。

-- 阿曼达·福蒂尼（Amanda Fortini），美国作家