Hook：从前端到 Claude Code

Hook：从前端到 CLI，同一个思想

Hook 是一个贯穿软件设计的通用概念：在特定时机自动执行的回调函数，让你能”挂入”框架的生命周期或数据流，而不需要修改框架本身。核心思想是控制反转（IoC）——不是你调用框架，而是框架在恰当的时候回调你。

本文从三个层面梳理 Hook 的应用：前端开发中的 Hook、Claude Code 的 Hook 机制、以及如何实际配置 Hook。

前端中的 Hook

在前端领域，Hook 以多种形态出现，但本质相同：框架定义了”何时”，你定义”做什么”。

React Hooks

最常见的 Hook 含义。useState、useEffect、useCallback 等让函数组件拥有状态管理、副作用处理等能力。本质是 React 在渲染和提交阶段调用你的函数。

生命周期钩子

Vue 的 onMounted、onUnmounted，或 React class 组件的 componentDidMount——框架在组件的特定阶段调用你注册的函数。

构建工具钩子

Webpack 的 tapable、Vite 的 Rollup-plugin-hooks——在打包过程的特定阶段（如编译前、生成后）注入自定义逻辑。

Git Hooks

pre-commit、pre-push——在 git 操作的特定时机触发自定义脚本。

Claude Code 的 Hook 机制

Claude Code 提供了一套 Hook 系统，本质和前端 Hook 是同一个思路——在固定时机自动调用你定义的逻辑，只是这里挂入的是 Claude Code 的工具调用生命周期。

PreToolUse Hook

在工具调用之前执行。通过退出码控制行为：

退出码	行为
`0`	允许——继续执行工具
`2`	拒绝——阻止工具调用，stderr 内容会反馈给 Claude
其他	阻断并返回输出

PostToolUse Hook

在工具调用完成之后执行。拿到工具的输出结果，可以做后续处理（如自动格式化、运行测试）。

其他 Hook 类型

Notification——Claude 发通知时触发（比如任务完成）
Stop——Claude 停止响应时触发

环境变量

Hook 命令中可以访问以下环境变量：

$CLAUDE_TOOL_NAME——当前工具名
$CLAUDE_FILE_PATH——操作的文件路径
$CLAUDE_SESSION_ID——会话 ID

同时 stdin 会传入工具参数的 JSON，包含 tool_name、tool_input 等字段。

实战：配置 Claude Code Hook

配置位置

文件	作用域
`~/.claude/settings.json`	全局（所有项目）
`.claude/settings.json`	项目级（提交到 git）
`.claude/settings.local.json`	项目级（个人，不提交）

基本结构

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [{ "type": "command", "command": "你的命令" }]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [{ "type": "command", "command": "你的命令" }]
      }
    ]
  }
}

关键字段

matcher——匹配工具名：Bash、Write、Edit、Read，用 | 组合如 "Write|Edit"。不设 matcher 则对所有工具生效。
command——收到 stdin JSON，包含 tool_name、tool_input
退出码：0 = 放行，2 = 拒绝，其他 = 阻断

典型用途

写入后自动格式化——PostToolUse + "Write|Edit" matcher
拦截危险命令——PreToolUse + "Bash" matcher，检测 rm -rf 等
记录审计日志——PreToolUse，记录所有 Bash 命令
写完后跑测试——PostToolUse + "Write|Edit"，npm test / uv run pytest

小结

无论是 React 的 useEffect、Webpack 的插件钩子、Git 的 pre-commit，还是 Claude Code 的 PreToolUse/PostToolUse，Hook 的本质始终如一：框架提供挂载点，你注入自定义逻辑。 理解了这一点，面对任何新框架的 Hook 系统，都能快速上手。

Sources

No external sources for this entry.

2026-08-13 · blog