91 posts tagged with "全栈开发"

Monorepo 不需要从 pnpm / Turborepo 开始——npm 7+ 自带的 workspaces 字段就能跑，是真正零成本的入门。

1. 是什么：多项目放一个仓库，不强制任何工具
2. 第 1 档：npm workspaces（npm 7+ 内置），根 package.json 加字段
3. 第 2 档：yarn workspaces（早期方案，yarn 1 时代）
4. 第 3 档：pnpm workspace（当前事实标准，磁盘节省 50%+）
5. 第 4 档：Turborepo / Nx，只有跨包 build 依赖才需要
6. 口诀：包数 <5 npm workspaces，<10 pnpm，10+ 才上 Turborepo

Bun 是什么：把整套 JS 工具链（运行时、包管理、打包、测试）塞进一个二进制文件的 Zig 全栈运行时。

1. 本质：不只是更快的 Node.js，是整套 JS 工具链的统一入口。
2. 性能：启动比 Node 快 3-4 倍，装包比 npm 快 20 倍以上。
3. 兼容：直接 bun install / bun run 即可运行，现有 Node 项目零修改。
4. 内建：TypeScript / JSX / TSX 原生支持，无需 Babel 转译或额外配置。
5. 场景：本地开发、CI 流水线、Serverless 等对冷启动速度敏感的场景。
6. 建议：1.0 之前生产环境慎用，先用作开发工具链加速。

Tailwind 是构建时按需生成 CSS 的工具，不是预制类库。 这是它和 Bootstrap、iconfont 这类传统 class 库最本质的区别。

• 本质区别：Bootstrap 是运行时可用的预制 CSS，Tailwind 是构建时扫源码生成
• 类何时存在：Bootstrap 加载即用，Tailwind 必须被构建器扫到源码才生成
• 体积策略：Bootstrap 固定（库大小决定），Tailwind 动态（你用多少决定）
• 跨包坑点：monorepo 子包构建器只扫自己源码，看不到别的包用到的 class
• 配置关键：tailwind.config.js 的 content 必须覆盖到所有源码路径

git worktree 让多分支并行工作，一个目录 = 一个分支。

• 核心机制：所有 worktree 共享一个 .git 数据库
• 典型场景：边修 bug 边开发 feature，不切分支
• code review：独立目录看 PR，不打断当前工作
• 跑长任务：CI、build 不阻塞主工作区
• superpowers 模式：一个 worktree 一个 agent，并行的关键
• 使用注意：同一分支只能被一个 worktree checkout
• 清理规则：删目录不够，必须 git worktree remove

函数组件 re-render 的根因只有一条：引用变了。state 更新、props 变化、父组件渲染、context 值变化——本质上都是"某个引用不等于上一次的引用"。

• React.memo 决定"要不要渲染"：props 浅比较通过就跳过，不通过就走正常流程
• useCallback / useMemo 保证"引用稳定"：让 memo 的浅比较真正生效，否则每次渲染新引用，memo 形同虚设
• 三者是组合拳：只用 memo 不缓存引用 → 白用；只缓存不用 memo → 也白用
• 拆分组件 +状态下移 往往比加 memo 更治本：把频繁更新的状态隔离在小范围组件内
• 列表用 id 做 key，保证增删排序时最小 DOM 更新；纯分页无排序删除可用 index，反而更高效
• React 19 的 React Compiler 自动处理记忆化，但理解原理仍然是排查性能问题的基础

input:checked 改成父元素边框高亮、img 存在时父容器切两栏布局、表单校验状态动态联动——以前这些都需要 JS 去监听子元素状态再回头改父元素。:has() 的出现，把"子元素状态驱动父元素样式"这件事直接搬进了 CSS。

1. 核心能力：:has() 是名副其实的父选择器，根据子元素/后代/兄弟的状态反向匹配父元素或前面的兄弟。
2. 浏览器覆盖：Chrome 105+、Safari 15.4+、Firefox 121+ 已全部支持，2024 年底起可以在生产环境放心用。
3. 性能真相：锚定到具体类（.card:has(img)）的开销是微秒级；只有 div:has(...) 这种宽泛选择器 + 频繁 DOM 变更时才是问题。
4. 能用 CSS 就别用 JS：表单校验态切换、空状态检测、数量查询这些场景，:has() 替代 JS 后代码量减半、不会漏同步。

性能提醒：:has() 选择器锚定越具体越好，避免 body:has()、*:has() 这种全局监听。

for await...of 不是 async 版 for...of，而是一套"随时间产生的值流"消费模型。

1. 普通 for...of 遍历同步数组，迭代立刻拿到值；for await...of 每次迭代要等下一个值，生产者产出与消费者消费完全解耦
2. 这就是流式响应的底层逻辑：Node Stream、AsyncGenerator、LLM streaming 本质上是同一件事
3. 实现 Symbol.asyncIterator 协议就能让任意对象变成可异步遍历的流
4. Async Generator 是最简洁的生产端实现：yield 产出，for await...of 消费
5. 适用场景：分页 API、Stream、实时事件——凡是数据"不是一次性到齐"的地方

线上排查端口冲突时，查进程、杀进程、防复活是三个标准动作。

• 查端口：lsof -i :端口 一把梭，比 netstat/ss 更直观。
• 一行 kill：kill -9 $(lsof -ti :端口)，查 PID 和杀进程一条命令搞定。
• 一行 kill：lsof -ti :端口 | xargs kill -9，查 PID 和杀进程一条命令搞定。
• 杀了又活：大概率是守护程序自动拉起，先查 systemd/supervisor/pm2。
• 根本解法：直接停掉守护服务再操作，从源头控制，不跟重启赛跑。

tree 把一个目录变成终端里的一棵树。日常使用记住两个参数就够了。

1. -L N 限制展示层级，默认无限制，深层目录直接输出爆炸。
2. -a 控制隐藏文件可见性，默认不显示 . 开头的文件和目录。
3. tree -L 2 -a 是覆盖大多数日常开发场景的组合。
4. -d 只看目录骨架，跳过文件层噪音。
5. -I 'node_modules|.git' 排除指定目录，tree 输出立刻清爽。
6. macOS 不自带，brew install tree 一行安装。

sed 是 Linux / macOS 终端下最常用的 流式文本批量处理工具，不用打开文件就能完成全局修改。

1. 核心功能：逐行扫描文本，执行查找、替换、删除、插入等操作
2. 典型场景：批量修改代码/配置文件、日志过滤、文本格式转换
3. 语法模板：sed -i 's|原字符串|新字符串|g' 文件名，全程无交互
4. Mac 注意：必须加空参数 ''，否则直接报错