2024-第十六周

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

技术

译：CSS in React Server Components

这段文字讨论了在 React 服务器组件（RSC）时代使用 CSS-in-JS 的问题以及解决方案。作者介绍了 RSC 的概念和相关问题，并分析了目前流行的 CSS-in-JS 库（如 styled-components 和 Emotion）与 RSC 之间的不完全兼容性。作者提到了一些编译时的零运行时 CSS-in-JS 库，如 Linaria 和 Panda CSS，这些库在 RSC 环境下能够提供更好的支持。同时，作者探讨了在迁移到这些库时可能遇到的一些问题和挑战。

• React 服务器组件是 React 的新范式，提供了服务器组件和客户端组件的区分，服务器组件只在服务器上运行，为 React 应用提供了更轻量、更快的性能。
• CSS-in-JS 库 (如 styled-components) 与 React 服务器组件不兼容，因为库内部使用了 useContext 钩子，无法在服务器组件中使用。这导致了一些困难和限制。
• 解决方案是使用编译时的 CSS-in-JS 库，如 Linaria 和 Panda CSS，这些库在编译时处理样式，减少了运行时的负担，提高了性能，但也需要重新设计动态组件的部分功能。

Things That Can Break aspect-ratio in CSS

CSS 中的 aspect-ratio 属性可以帮助实现特定设计需求，比如创建正方形元素或匹配视频的 16:9 比例。然而，在设置高度和宽度、弹性布局的拉伸以及内容强制高度等情况下，aspect-ratio 可能会出现意外结果或失效。这一属性自 2021 年左右开始得到广泛支持，但需要注意潜在的问题和浏览器兼容性。

• CSS 的 aspect-ratio 属性可以帮助在设计中实现需要特定长宽比的元素，但在设置高度和宽度同时存在时会被忽略。
• 在 flexbox 或 grid 布局中，使用默认的 stretch 对齐方式可能会破坏 aspect-ratio 的效果，需要注意调整对齐方式。
• 使用 padding-bottom 实现的“Padded Box Trick”可能会导致内容溢出，建议使用 aspect-ratio 属性替代以避免此问题。

译：Zustand 和 React Context

这篇文章介绍了如何将 Zustand 库与 React Context 结合使用，以解决全局状态管理的一些问题。作者提到了 Zustand 全局存储存在的一些问题，并讨论了如何通过创建并使用 React Context Provider 来实现局部状态管理，并解决了测试、可重用性和从属性初始化存储等方面的挑战。

• Zustand 库虽然优秀，但全局 Store 的存在导致了一些问题，包括无法从 Props 初始化、测试复杂性以及缺乏可重用性。
• 作者提出了通过将 Zustand 与 React Context 结合使用的方法，使用 React Context 分享 store 实例，解决了全局 Store 存在的问题。
• 通过这种结合使用的方法，可以实现从属性初始化存储、简化测试、以及实现可复用性，使得在需要封装和可复用性的情况下非常方便。

工具

react-querybuilder

React 中的查询构建器组件

marquee

一款精美的 React 跑马灯组件

greensock/react

在 React 中使用 GSAP 的工具，比如 useGSAP()，它可以完全替代 useLayoutEffect()/useEffect() 函数

use-travel

一个用于在 React 中进行状态时间旅行的 Hook，可以实现撤销、重做、重置和归档等功能

json-to-any-web

通过 json 来转换到 TS 的定义

ios404

发现在 ios 不支持的功能

modern-errors

以简单、稳定和一致的方式处理错误

declarative-routing

这段文字主要介绍了如何在 NextJS 应用中安装和使用声明式路由系统。它详细讲解了如何初始化应用，并生成路由文件夹以及 README.md 文件，以及如何更新路由文件。文章还介绍了如何使用声明式路由系统来链接页面路由和进行 API 请求，以及如何支持 OpenAPI。此外，文章还讲解了路由系统的工作原理、API 路由的定义方式、以及如何手动编辑和自动生成路由文件。最后，文章强调了路由文件的重要性以及在@/routes 目录中的 makeRoute 文件的定制性。

• 使用声明式路由在 NextJS 上进行页面和 API 路由的类型安全定义和管理，包括生成路由和 API 文档的支持。
• 通过 makeRoute 系列函数定义页面路由和 API 路由，使用 Zod schemas 进行参数和搜索参数的类型定义，以及 HTTP 请求和响应的类型定义。
• 采用自动生成路由和手动编辑.info 文件相结合的方式，实现灵活的路由管理，并保持路由信息的统一性和可维护性。

更新

Next.js 14.2

Next.js 14.2 版本包括开发、生产和缓存改进。Turbopack for Development（发布候选版）提供了 99.8% 的测试覆盖率。此外，有关构建和生产的改进包括降低构建内存使用和 CSS 优化，以及可配置的缓存失效周期。另外，错误开发体验有所改善，包括更好的水合不匹配错误和设计更新。值得一提的是，Next.js 现在拥有超过 100 万活跃开发人员。

Next.js 14.2 带来了开发、生产和缓存方面的改进，包括 Turbopack 发展、构建和优化内存使用以及 CSS 优化。 Turbopack 发展为本地开发带来显著性能提升，例如本地服务器启动速度提升了最多 76.7%，代码更新速度提升了最多 96.3%。 缓存方面的改进包括配置可失效期间和实现持久缓存，同时还进行了错误 DX 改进，例如改善了水合不匹配错误和设计更新。

Biome v1.7

2024 年 4 月 15 日，Biome v1.7 发布，引入了易于迁移 ESLint 和 Prettier 的功能，包括机器可读报告、新的 linter 规则和修复。更新 Biome 的命令为 npm install 和 npx @biomejs/biome migrate。新子命令 biome migrate eslint 可迁移 ESLint 配置，biome migrate prettier 可迁移 Prettier 配置。Biome 还能输出 JSON 格式报告，新增--staged 选项以检查 Git 暂存文件。还增加了新的 nursery 规则，开始了 CSS、GraphQL 和 YAML 插件的初步工作。欢迎对项目进行月度捐款或 GitHub 赞助。

• Biome v1.7 提供了从 ESLint 和 Prettier 迁移的简便路径，包括新的迁移子命令和机器可读报告功能。
• 新的迁移子命令 biome migrate eslint 可以读取 ESLint 配置并尝试将其转换为 Biome 配置，同时支持插件和共享配置。
• Biome v1.7 支持输出 JSON 格式的诊断报告，同时引入了新的规则和对不同文件类型的识别和支持。

设计

My favourite animation trick: exponential smoothing

这段文字介绍了一种常用的动画技巧，通过数学公式和代码示例解释了如何使用指数平滑函数来实现动画效果，包括在 UI 元素和相机移动中的应用。作者展示了线性、立方和指数平滑函数的比较，以及如何处理小时间步长和大时间步长的情况。文章最后介绍了指数平滑函数在信号处理和数字音频中的应用，并分享了一些个人开发日志。

• 动画中的指数平滑是一种简单而有效的方法，通过数学计算和符号求解差分方程实现了对位置变化的平滑控制，适用于 UI 组件的动画效果和摄像机移动。
• 指数平滑通过使用速度参数来控制动画的速度和效果，使得动画在不同的时间间隔下也能保持平滑的运动，同时避免了对大量前期数值的维护。
• 该方法不仅适用于动画，还可以在信号处理和数字音频等领域中发挥作用，对于需要实现平滑变化的数值处理和控制具有普遍的应用和价值。

AI

其他