#14 前端月刊

React

如何使用 React Compiler

React Compiler 让我们不再需要写 useMemo 和 useCallback，这篇文章带你如何使用，以及浅浅的了解它是如何工作的。

React 19 小抄

React 19 新功能的小炒。当然具体的用法可以看访问文档：React 19

通往更干净的 React 架构（ Part8：React-Query）

第八篇，使用 react-query 处理 queries 和 mutations

实践

在 2024 年，我们如何创建一个 npm 包

这是一份 npm 包从初始化到构建到发布的过程指南，使用了 tsup、vitest、changesets 等工具。

数学符号在 JS 中如何实现计算

这是一个数学符号与 JS 计算的对应表，非常实用。

比如说：

! 阶乘符号 $$ n! $$

function factorial(n) {
  if (n == 0) return 1

  return n * factorial(n - 1)
}

好的重构与坏的重构

我们可能经常会重构自己的代码或者别的代码。这些事编写好的重构的一些原则：

1. 循序渐进：进行小的、可管理的更改，而不是全面重写。
2. 在进行重大重构或新的抽象之前，深入了解代码。
3. 匹配现有的代码风格：一致性是可维护性的关键。
4. 避免过多新的抽象：除非确实有必要增加复杂性，否则请保持简单。
5. 避免添加新的库，尤其是那些编程风格截然不同的库，除非得到团队的认可。
6. 在重构之前编写测试，并在重构过程中更新测试。这可确保您维护原始功能。
7. 让你的同事遵守这些原则。

通过Web Audio API 生成音频签名作为设备唯一标识

常见生产设备唯一标识的方式：cookie、ip、用户代理+屏幕分辨率 等等，但是各有优缺点

CSS

现代 CSS 布局：你可能不需要框架

Brecht De Ruyte 介绍了四个 css 实用工具类，分别是两组 flex 布局和两组 grid 布局。还有一个扩展的 subgrid 布局。

一个是自动填充空间的流式布局（"fluid" layouts），一个是控制行列的重复布局（"repeating" layouts）。

在这之前，还用到了 @layer 规则。

可以阅读 详解日后定会大规模使用的CSS @layer 规则 这篇文章了解 layer。

整体的结构类似这样的：

@layer reset, theme, layout;

@layer layout {
  .repeating-grid {
    //...
  }
  .repeating-flex {
    //...
  }
  .fluid-grid {
    //...
  }
  .fluid-flex {
    //...
  }

  .subgrid-rows {
    //...
  }
}