阅读视图

发现新文章,点击刷新页面。

从 0 诠释大模型 API 的本质: Tools + MCP + Skills

本文写于 2026 年 02 月 15 日.

如今 AI Agent 的各种新概念层出不穷:

  • Tools
  • MCP
  • Skills

许多人都会有这样的疑问: Tools 和 MCP 有什么区别? 我用了 MCP 还需要 Tools 吗? Skills 是取代 MCP 的吗? 本文会从 LLM API 的底层设计开始, 一步步介绍 Tools 和 MCP 的区别, 最后简单提一下 Skills.

几个重要事实

  • 大模型是无状态的, 它对你们的过往对话一点都没有记忆. 每次调用 LLM API, 都是一次全新的请求, 就像换了一个完全陌生的人说话.
  • 大模型本身的开发(或许)很难, 需要很强的数学知识. 但是大模型应用开发不难, 做纯工程开发的传统程序员也可以很快上手.
  • MCP 和 Skills 都是纯工程层面的设施, 和 AI 毫无关系. 也就是说, 在这两个概念出现以前, 你完全可以自己实现一套类似的机制, 不需要 LLM API 支持.

基于以上几个事实, 本文会选择 Anthropic API 来解释. 因为 OpenAI 的 Responses API 提供了一个叫做 previous_response_id 的参数, 很容易误导人以为 LLM 本身有记忆功能. 但实际上 LLM 是没有记忆的, 这个 previous_response_id 并不会给 LLM 使用, 而是 OpenAI 的服务层面的工程设施, 相当于 OpenAI 帮我们存了历史记录, 然后发给 LLM. Conversations API 同理.

相比之下, Anthropic API 就原生了许多, 更容易感受到 LLM API 的本质.

技术栈

请注意区分 @anthropic-ai/sdk@anthropic-ai/claude-agent-sdk. 前者是 Anthropic API 的封装, 本质上是一个 HTTP Client, 封装了大量的调用 API 的方法; 后者是对 Claude Code (Claude CLI) 的封装, 封装了大量调用 claude 命令行的方法.

本文会使用 GLM-4.7-flash 这个兼容 Anthropic API 的免费模型来节约成本, 毕竟 LLM 应用开发最大的痛点就是每次调试运行都需要花钱.

const client = new Anthropic({
  baseURL: 'https://api.z.ai/api/anthropic', // 国际版, 你也可以使用国内版, 国内版认证方式是 apiKey
  authToken: ZAI_API_KEY,
});

Hello World

首先从一个最简单的请求开始:

const resp = await client.messages.create({
  max_tokens: 1024,
  messages: [
    {
      role: 'user',
      content: '英国的首都是哪里',
    },
  ],
  model: 'glm-4.7-flash',
});

console.log(resp);

Output (省略掉不重要的字段):

{
  "id": "msg_202602151117137d34660397a4418d",
  "type": "message",
  "role": "assistant",
  "model": "glm-4.7-flash",
  "content": [
    {
      "type": "text",
      "text": "英国的首都是**伦敦**(London)。"
    }
  ],
  "stop_reason": "end_turn"
}

多轮对话

正如上面反复提到的, LLM 是无状态的, 每次调用都像是一个全新的完全陌生的人对话. 想象一下, 如果你要和一个人聊天, 每聊完一句, 对面都会换一个人, 那么对方换的人应该如何继续和你的聊天? 当然就是把你之前的聊天历史全部看一遍. 所以调用 LLM 的时候, 每次都需要把历史记录全部传过去.

// 用一个 messages 数组来维护历史记录
const messages: MessageParam[] = [
  {
    role: 'user',
    content: '英国的首都是哪里',
  },
];

const resp = await client.messages.create({
  max_tokens: 1024,
  messages,
  model: 'glm-4.7-flash',
});

// 重点: 将 LLM 的第一次回复放到数组里
messages.push({
  role: 'assistant',
  content: resp.content,
});

// 再加入第二次对话内容
messages.push({
  role: 'user',
  content: '介绍一下这个城市的污染情况',
});

console.log(inspect(messages));

const resp2 = await client.messages.create({
  max_tokens: 1024,
  messages,
  model: 'glm-4.7-flash',
});

console.log(resp2);

可以看看第二次调用 API 传入的 messages 内容是:

[
  {
    "role": "user",
    "content": "英国的首都是哪里"
  },
  {
    "role": "assistant",
    "content": [
      {
        "type": "text",
        "text": "英国的首都是**伦敦**。"
      }
    ]
  },
  {
    "role": "user",
    "content": "介绍一下这个城市的污染情况"
  }
]

而 resp2 成功返回了伦敦的污染情况, 说明 LLM 确实感知到了上一次对话内容的城市是伦敦.

{
  "id": "msg_20260215115536fd125b1bca954cf6",
  "type": "message",
  "role": "assistant",
  "model": "glm-4.7-flash",
  "content": [
    {
      "type": "text",
      "text": "伦敦作为全球国际化大都市和前工业革命中心,其污染历史可以追溯到维多利亚时代,且至今仍是全球空气质量治理的“典型样本”..." // 我手动省略, 减少篇幅, 并非 LLM 省略
    }
  ],
  "stop_reason": "end_turn"
}

所以你应该也知道了, 所谓的 context windows, 其实可以简单理解为 messages 数组的文本长度, 而不是单条消息的长度.

Tools

原始方法

LLM 就像一个很聪明(虽然有时候会很蠢, 但是我们先假定 LLM 很聪明)的大脑, 但是它只有大脑, 没有眼睛 - 意味着它无法接收外界的信息(除了手动传入的 messages), 比如读一个文件; 没有手 - 意味着它无法做出任何行为, 比如修改一个文件. (可以把 LLM 想象成一个遮住眼睛的霍金).

Tools 就相当于给一个大脑安装了外置眼睛和手. 我们先用最朴素的方式让 LLM 调用工具: 直接在 prompt 里写, 有哪些工具, params 分别是什么, 然后让 LLM 选择一个使用, 并提供 params.

const messages: MessageParam[] = [
  {
    role: 'user',
    content: `写一句话介绍中国农历马年.
      你有以下 tools 可以调用:
      1. { name: "write", description: "write content to a file", params: 
        { "content": {"type": "string", description: "content"} },
        { "path": {"type": "string", description: "the path of the file to write"} },
       }

      2. { name: "read", description: "read content of a file", params: 
        { "path": {"type": "string", description: "the path of the file to read"} }
       }

       请你选择一个工具使用, 并且提供正确的 params. 你需要输出一个 JSON
    `,
  },
];

Output:

{
  "id": "msg_202602151218464370b8983c6c474d",
  "type": "message",
  "role": "assistant",
  "model": "glm-4.7-flash",
  "content": [
    {
      "type": "text",
      "text": "```json\n{\n  \"tool\": \"write\",\n  \"params\": {\n    \"content\": \"中国农历马年象征着奔腾不息的活力与豪迈,寓意着奋进、自由与驰骋。\",\n    \"path\": \"/马年介绍.txt\"\n  }\n}\n```"
    }
  ],
  "stop_reason": "end_turn"
}

可以看到, LLM 做到了选择正确的工具, 提供的参数内容倒是没问题, 但是存在以下几个巨大的问题:

  1. 返回的 text 本质上是个字符串. 虽然在 prompt 里明确要求了需要返回一个 JSON, 但是 LLM 依然返回了一个 JSON markdown, 而不是纯 JSON 字符串.
  2. prompt 并不可靠. LLM 无法做到 100% 遵循 prompt, 尤其是能力比较差的模型, 它可能会输出"好的, 下面是我调用工具的 JSON: xxx". 也就是说, 并不能保证输出一定是一个 JSON markdown.
  3. 就算输出是一个 JSON markdown, 我们还需要去解析这个 markdown, 一旦涉及到嵌套, 也就是 params 里也包含反引号, 会更加复杂.
  4. 无法保证输出的 JSON 100% 遵循了 prompt 里的格式, 比如我在调用的时候就出现过返回了 arguments 字段, 而不是 params.

基于以上问题, Tool Use (或者叫 Tool Call, Function Call, 一个意思. Anthropic 的官方术语是 Tool Use) 被内置进了 LLM, 成为了 LLM 自身的一个能力. 也就是说, 如果一个 LLM 不支持 Tool Use, 那么我们基本是没法在工程层面去做 polyfill, 也就无法实现调用 tool.

标准方法

上面的例子, 换标准的 Tool Use 方法:

const messages: MessageParam[] = [
  {
    role: 'user',
    content: `写一个关于中国农历马年的一句话介绍, 写入 test.txt 里`,
  },
];

const resp = await client.messages.create({
  max_tokens: 1024,
  messages,
  model: 'glm-4.7-flash',
  tools: [
    {
      name: 'write',
      description: 'write content to a file',
      input_schema: {
        type: 'object',
        properties: {
          content: {
            type: 'string',
            description: 'content',
          },
          path: {
            type: 'string',
            description: 'the path of the file to write',
          },
        },
      },
    },
    // read 同理, 省略掉
  ],
});

Output:

{
  "id": "msg_20260215123307fffbbd1b9fd84652",
  "type": "message",
  "role": "assistant",
  "model": "glm-4.7-flash",
  "content": [
    {
      "type": "text",
      "text": "我来写一句关于中国农历马年的介绍并保存到文件中。"
    },
    {
      "type": "tool_use",
      "id": "call_49f0c1dbe920406192ce9347",
      "name": "write",
      "input": {
        "content": "中国农历马年象征着活力、热情与自由,是充满朝气与拼搏精神的吉祥年份。",
        "path": "test.txt"
      }
    }
  ],
  "stop_reason": "tool_use"
}

可以看到这次的 content 里多了一个 tool_use 的 block, 里面写明了需要调用的 tool 的名字和参数. 这个 block 的类型是结构化的, 也就是说可以 100% 保证格式是正确, 符合预期的 (但是不能保证 100% 有这个 block, 取决于 LLM 的能力, 太蠢的 LLM 可能无法决策到底用哪个 tool). 这样我们就可以根据这个结构化的 tool_use block, 去执行对于的函数调用.

结果回传

考虑一个场景: 让 LLM 阅读一个文件并分析内容. 经过上面的内容, 你应该知道具体的流程是:

  1. User 要求 LLM 阅读某个文件并分析内容, 并且传入 read tool schema
  2. LLM 决定使用 read tool, 参数是文件路径
  3. User 根据路径读取文件内容, 然后传给 LLM
  4. LLM 成功输出分析结果
const tools: ToolUnion[] = [
  // 本文省略具体内容, read 和 write 两个 tools
];

const messages: MessageParam[] = [
  {
    role: 'user',
    content: `分析一下 package.json`,
  },
];

// 初始请求
const resp = await client.messages.create({
  max_tokens: 1024,
  messages,
  model: 'glm-4.7-flash',
  tools,
});

// 把 LLM 的第一次返回加入到 messages 里
messages.push({
  role: 'assistant',
  content: resp.content,
});

// 第一次返回大概率会包含 tool_use block
// content 是一个数组, 可能额外包含一个 text, 也可能直接就是一个 tool_use
// content 可能包含多个 tool_use, 用户需要把所有的都调用, 然后根据 tool_use_id 去匹配结果
const toolUseResults: ContentBlockParam[] = [];
for (const block of resp.content) {
  if (block.type === 'tool_use') {
    switch (block.name) {
      case 'read':
        try {
          const content = await readFile(block.input.path, 'utf-8');
          toolUseResults.push({ tool_use_id: block.id, type: 'tool_result', content, is_error: false }); // is_error 告诉 LLM 这个调用是否成功
        } catch (err) {
          toolUseResults.push({
            tool_use_id: block.id,
            type: 'tool_result',
            content: JSON.stringify(err),
            is_error: true,
          });
        }

        break;

      case 'write':
        try {
          await writeFile(block.input.path, block.input.content);

          toolUseResults.push({ tool_use_id: block.id, type: 'tool_result', content: 'success', is_error: false });
        } catch (err) {
          toolUseResults.push({
            tool_use_id: block.id,
            type: 'tool_result',
            content: JSON.stringify(err),
            is_error: true,
          });
        }
        break;
    }
  }
}
// 将 tool use results 传给 LLM
messages.push({ role: 'user', content: toolUseResults });

console.log(inspect(messages));

const resp2 = await client.messages.create({
  max_tokens: 1024,
  messages,
  model: 'glm-4.7-flash',
  tools,
});
console.log(resp2);

第二次传给 LLM 的 messages 为:

[
  {
    "role": "user",
    "content": "分析一下 package.json"
  },
  {
    "role": "assistant",
    "content": [
      {
        "type": "text",
        "text": "我来帮你分析 package.json 文件。首先,我需要读取这个文件来查看它的内容。"
      },
      {
        "type": "tool_use",
        "id": "call_eeb390dfe8f345269ff95f42",
        "name": "read",
        "input": {
          "path": "package.json"
        }
      }
    ]
  },
  {
    "role": "user",
    "content": [
      {
        "tool_use_id": "call_eeb390dfe8f345269ff95f42",
        "type": "tool_result",
        "content": "{\n  \"name\": \"gh-scout\",\n  \"module\": \"index.tsx\",\n  \"type\": \"module\",\n  \"private\": true,\n  \"devDependencies\": {\n    \"@types/bun\": \"latest\"\n  },\n  \"peerDependencies\": {\n    \"typescript\": \"^5\"\n  },\n  \"dependencies\": {\n    \"@anthropic-ai/sdk\": \"^0.74.0\"\n  }\n}\n",
        "is_error": false
      }
    ]
  }
]

第二次从 LLM 返回的结果为:

{
  "id": "msg_2026021512452122fcf4da65474784",
  "type": "message",
  "role": "assistant",
  "model": "glm-4.7-flash",
  "content": [
    {
      "type": "text",
      "text": "## 📦 `package.json` 文件分析\n\n### 基本信息\n\n| 字段 | 值 | 说明 |\n|------|-----|------|\n| **name** | `\"gh-scout\"` | 项目名称,用于 npm 包标识 |\n| **module** | `\"index.tsx\"` | ES 模块入口文件 |\n| **type** | `\"module\"` | 使用 ES6 模块语法 |\n| **private** | `true` | 标记为私有项目,防止误发布到 npm |\n\n### 依赖管理\n\n#### 🔧 开发依赖 (`devDependencies`)\n```json\n\"@types/bun\": \"latest\"\n```\n- 类型定义包,用于 Bun 运行时的 TypeScript 类型支持\n- `\"latest\"` 表示使用最新版本\n\n#### 🤝 对等依赖 (`peerDependencies`)\n```json\n\"typescript\": \"^5\"\n```\n- **关键点**:`typescript` 被标记为对等依赖\n- 这意味着**项目不直接依赖 TypeScript**,而是期望用户环境中已安装 TypeScript\n- 适用于插件/工具类项目,让用户自己选择 TS 版本\n\n#### ⚡ 运行时依赖 (`dependencies`)\n```json\n\"@anthropic-ai/sdk\": \"^0.74.0\"\n```\n- Anthropic AI 的官方 SDK\n- 版本范围 `^0.74.0` 表示安装 0.74.0 或更高版本(不超过主版本号)\n\n---\n\n### 📝 总结\n\n这是一个**轻量级的 TypeScript 工具项目**(`gh-scout`),主要特点:\n\n1. **无运行时依赖**:除了 Anthropic SDK 外,没有其他运行时依赖\n2. **依赖 TypeScript**:用户自己提供 TS 环境\n3. **使用 Bun**:通过 `@types/bun` 表明使用 Bun 运行环境\n4. **模块化设计**:ES 模块类型,入口为 `index.tsx`\n\n项目看起来是一个与 GitHub 相关的工具(从名字 \"gh-scout\" 推测),可能用于分析或监控 GitHub 相关的操作。"
    }
  ],
  "stop_reason": "end_turn"
}

可以看到, LLM 第一次告诉我们需要调用 read tool 来读取文件内容. 我们调用完毕后把结果传给 LLM, LLM 第二次就成功分析出了内容.

插个题外话: 看到这里, 你应该也觉得原生 LLM 的方式实在是太繁琐了.

  • messages 要手动维护
  • tool_use 要手动解析 LLM 的返回, 手动调用, 然后手动把结果传到 messages 数组里
  • 如果 LLM 后续还要调用其他 tools, 还需要手动写一个循环

这正是现在各种 AI Agent 框架的意义, 比如 LangChain, LangGraph, Agno 等, 它们底层其实也都是做这种事情, 和传统领域的框架一样, 把繁琐的步骤都封装好了, 就像写 React 就不需要手动去操作 DOM 一样.

MCP

上面的方式虽然繁琐, 但也完全覆盖了所有场景了. 任何 tool use 都可以用上面的方式去实现. 那么为什么还需要 MCP 呢?

MCP 是什么

MCP (model context protocol) 是一个协议, 定义了 MCP Client 和 MCP Server 的通信方式. MCP 的原理和 AI/LLM 没有任何关系, 只是定义了 tools/resources/prompt 三种信息的通信格式.

MCP 解决了什么问题

假设现在没有 MCP 这个概念.

众所周知, LLM 非常擅长写文档类的东西, 比如 PR description. 所以现在你想让 LLM 帮你在 github 提一个 PR. 你需要先定义一个 tool:

const tools: ToolUnion[] = [
  {
    name: 'github_create_pr',
    description: 'create a PR on github',
    input_schema: {
      type: 'object',
      properties: {
        repo: {
          type: 'string',
          description: 'The repo name. Format: {owner}/{repo_name}',
        },
        source_branch: {
          type: 'string',
          description: 'The source branch name',
        },
        target_branch: {
          type: 'string',
          description: 'The target branch name',
        },
        title: {
          type: 'string',
          description: 'The title of the PR',
        },
        description: {
          type: 'string',
          description: 'The description body of the PR',
        },
      },
    },
  },
];

然后实现这个 tool 的调用过程:

case 'github_create_pr':
  const { repo, source_branch, target_branch, title, description } = block.input;
  const [owner_name, repo_name] = repo.split('/');

  try {
    // 也可以用 gh cli
    const resp = await fetch(`https://api.github.com/repos/${owner_name}/${repo_name}/pulls`, {
      method: 'post',
      headers: {
        accept: 'application/vnd.github+json',
        authorization: 'Bearer GITHUB_TOKEN',
      },
      body: JSON.stringify({
        title,
        body: description,
        base: source_branch,
        head: target_branch,
      }),
    });

    toolUseResults.push({
      tool_use_id: block.id,
      type: 'tool_result',
      content: await resp.text(),
      is_error: false,
    });
  } catch (err) {
    toolUseResults.push({
      tool_use_id: block.id,
      type: 'tool_result',
      content: JSON.stringify(err),
      is_error: true,
    });
  }
  break;

每加一个这样的 tool, 都需要花费大量的精力. 但实际上这些 tools 是高度通用的, 调用 github 是一个很普遍的需求.

此时你可能想到, 那我封装一个 github_tools 不就可以了?

于是你行动力拉满, 自己(或者让 AI)封装了一个 github_tools, 发布到了 npm 上, 其他用户可以像这样使用你的库:

import { tools as githubTools, callTool } from '@arc/github_tools';

const tools = [...myTools, ...githubTools];

for (const block of resp.content) {
  if (block.type === 'tool_use') {
    if (block.name.startsWith('github')) {
      const result = await callTool(block);
    }
  }
}

但是此时又有了两个新的问题:

  1. 你的新项目使用了 Go/Rust, 用不了 npm 包.
  2. 由于 Anthropic API 太贵, 你决定迁移到 DeepSeek API, 但是 DeepSeek 对 Anthropic 的兼容性不是很好(假设), 有些格式不匹配, 导致你的库调用失败.

MCP 的出现就是为了解决上面的问题. MCP 本质上是把 tools 的定义和执行都外置出去了. MCP 分为 Client 和 Server, 其中 Server 就是外置出去的部分, 负责 tools 的定义和执行. 而 Client 就是留在 AI 应用的部分, 负责和 Server 通信:

  • Hi Server, 告诉我有哪些 tools 可以用?
  • Hi Server, 我现在要调用 github_create_pr 这个 tool, 参数是 { xxx }

最简易的 MCP 实现

知道了 MCP 的设计思想, 那么我们完全可以写一个最简易的实现:

const server = async ({ type, body }: { type: string; body?: any }): Promise<string> => {
  if (type === 'list_tools') {
    return JSON.stringify([
      {
        name: 'github_create_pr',
        description: 'create a PR on github',
        input_schema: {
          type: 'object',
          properties: {
            repo: {
              type: 'string',
              description: 'The repo name. Format: {owner}/{repo_name}',
            },
            source_branch: {
              type: 'string',
              description: 'The source branch name',
            },
            target_branch: {
              type: 'string',
              description: 'The target branch name',
            },
            title: {
              type: 'string',
              description: 'The title of the PR',
            },
            description: {
              type: 'string',
              description: 'The description body of the PR',
            },
          },
        },
      },
    ]);
  }

  if (type === 'call_tool') {
    switch (body.name) {
      case 'github_create_pr':
        const { repo, source_branch, target_branch, title, description } = body.input;
        const [owner_name, repo_name] = repo.split('/');
        try {
          const resp = await fetch(`https://api.github.com/repos/${owner_name}/${repo_name}/pulls`, {
            method: 'post',
            headers: {
              accept: 'application/vnd.github+json',
              authorization: 'Bearer GITHUB_TOKEN',
            },
            body: JSON.stringify({
              title,
              body: description,
              base: source_branch,
              head: target_branch,
            }),
          });
          return await resp.text();
        } catch (err) {
          return JSON.stringify(err);
        }
    }
  }

  return 'Unknown type';
};

为了简单起见, 我直接写的是一个函数. 你完全可以将其做成一个 HTTP server, 因为反正这个函数的返回类型是 string, 可以作为 HTTP Response.

然后再写一个 client:

class McpClient {
  async listTools() {
    const tools = await server({ type: 'list_tools' });
    return JSON.parse(tools) as ToolUnion[];
  }

  async callTool(name: string, params: any) {
    const res = await server({ type: 'call_tool', body: params });
    return res;
  }
}

发现了吗? 上面的代码和 LLM 一点关系都没有, 这也是我一直在强调的重点: MCP 是工程设计, 不是 LLM 自身能力. 你完全可以脱离 AI, 直接使用 github 的官方 mcp server, 手动调用里面提供的方法. AI 在这里面唯一做的事情只是帮你决定调用的 tool_name + params.

用我们自己实现的 MCP Client 和 Server 改写上面的代码:

const messages: MessageParam[] = [
  {
    role: 'user',
    content: `分析一下 package.json`,
  },
];

const mcpClient = new McpClient();
const resp = await client.messages.create({
  max_tokens: 1024,
  messages,
  model: 'glm-4.7-flash',
  tools: await mcpClient.listTools(),
});

const toolUseResults: ContentBlockParam[] = [];
for (const block of resp.content) {
  if (block.type === 'tool_use') {
    if (block.name.startsWith('github')) {
      try {
        const result = await mcpClient.callTool(block.name, block.input);
        toolUseResults.push({ tool_use_id: block.id, type: 'tool_result', content: result, is_error: false });
      } catch (err) {
        toolUseResults.push({
          tool_use_id: block.id,
          type: 'tool_result',
          content: JSON.stringify(err),
          is_error: true,
        });
      }
    }
  }
}
messages.push({ role: 'user', content: toolUseResults });

const resp2 = await client.messages.create({
  max_tokens: 1024,
  messages,
  model: 'glm-4.7-flash',
  tools,
});
console.log(resp2);

瞬间简洁了不少. github 相关的 tools 定义和实现都外置到了 MCP Server 上, 这样就做了两层解耦:

  1. 具体语言解耦 - 你可以用任何语言实现 MCP Server, 只要它能处理字符串.
  2. LLM 解耦 - 你可以用任何支持 tool use 的 LLM, MCP 协议里单独定义了字段, 和 LLM 自己的字段无关.

Skills

现在你已经了解到了:

  1. Tool Use 是 LLM 自身的能力.
  2. MCP 不是 LLM 自身的能力, 而是工程设计, 辅助 Tool Use 用的.

那么最近很火的 Skills 又是什么呢? 是取代 MCP 的吗? 当然不是.

LLM 的 context 是非常宝贵的. 如果在系统提示词里放入太多的内容, 会导致系统提示词本身就占据大量 context. 举个例子, 假设你在开发一个 Coding Agent, 你集成了 github MCP Server, 那么每次 LLM API 调用, 都会把完整的 github MCP 相关的 tools 定义全部发给 LLM. 如果绝大部分用户根本就不会用 github 的能力, 那你就平白无故浪费了大量 context.

这就是 Skills 解决的问题: 渐进式披露, 或者叫按需加载.

我个人猜测 Skills 应该也是工程设计, 也不是 LLM 的能力, 因为我们完全可以自己实现一套机制, 用下面的系统提示词:

你是一个全能专家. 你拥有以下技能:

1. 做饭: 川菜, 粤菜, 日料, 英国美食.
2. 旅游: 规划旅游路线, 选择最佳景点, 解说历史遗迹.
3. 写代码: Typescript, Rust, Go, Python.
...
99. 视频制作: 制作爆款视频, 通过制造各种对立吸引流量.
100. Slides 制作: 制作精美的, 吸引领导眼光的 Slides.

所有的技能都被单独放到了 .skills 目录里. 当用户的问题与某个技能相关时, 你需要使用 Read tool 来读取对应技能的全部文档.

看到了吗? 系统提示词里只放了最基本的技能名字和简介(也就是 SKILL.md 开头的 name + description), 没有放具体技能的内容 (比如具体怎么做菜, 具体怎么写代码, 具体制造哪种对立更符合当下的热点), 大幅节约了 context.

如果此时用户问"帮我用 Rust 写个基本的 HTTP Server", 那么 LLM 第一条返回的消息应该就包含一个 read 的 tool_use, 读取 .skills/coding 里所有的内容, 里面就会包含具体的细节, 比如 "不要用 unwrap", "优先使用 axum 框架" 等. 用户把这些内容通过 tool_use_result 发给 LLM 后, LLM 再去写最终的代码给用户.

所以 Skills 也并不是什么神奇的事情, 并不是说 Skills 赋予了 AI 大量额外的能力, 只是单纯地通过按需加载, 节约了 context, 从而可以放大量的 Skills 在目录里. 毕竟在 Skills 出现之前, 你完全也可以把具体的写代码能力写到系统提示词里, LLM 照样会拥有完整的写代码的能力.

总结

本文从 0 开始一步步讲述了 LLM API 的设计, 多轮对话, 原生 Tool Use 的方式, MCP 的原理, Skills 的思想. 让我们回顾一下几个核心要点:

Tool Use - LLM 的核心能力

Tool Use 是 LLM 模型本身的能力, 需要模型在训练时就支持. 它让 LLM 能够:

  • 理解工具的定义和参数
  • 根据用户意图决策应该调用哪个工具
  • 结构化的格式输出工具调用信息

如果一个 LLM 不支持 Tool Use, 我们几乎无法通过工程手段来弥补, 因为用 prompt 的方式既不可靠, 又难以解析.

MCP - 工程层面的协议

MCP 是纯粹的工程设计, 和 AI 完全无关. 它解决的是工程问题:

  • 跨语言: 用任何语言都可以实现 MCP Server, 不局限于某个生态
  • 解耦: tools 的定义和实现从应用代码中分离出去
  • 复用: 同一个 MCP Server 可以被多个应用、多个 LLM 使用
  • 标准化: 统一了工具的通信协议, 避免了各自为政

MCP 的价值在于降低了集成成本, 让开发者可以专注于业务逻辑, 而不是重复造轮子.

Skills - 优化 Context 的策略

Skills 同样是工程层面的优化, 核心思想是:

  • 按需加载: 不把所有能力都塞进系统提示词
  • 渐进式披露: 需要什么能力才加载什么内容
  • 节约 Context: 让有限的 context window 发挥更大价值

Skills 不是新技术, 而是一种最佳实践模式, 在 Skills 概念出现之前我们就可以自己实现类似机制.

三者的关系

Tool Use, MCP, Skills 并不是互相取代的关系, 而是相辅相成:

┌─────────────────────────────────────────┐
│          AI Application                 │
│  ┌────────────────────────────────┐     │
│  │  Skills (按需加载能力)          │     │
│  │  - 系统提示词优化                │     │
│  │  - Context 管理                 │     │
│  └────────────────────────────────┘     │
│                                         │
│  ┌────────────────────────────────┐     │
│  │  MCP Client (工具集成层)        │     │
│  │  - 从 MCP Server 获取工具定义    │     │
│  │  - 调用 MCP Server 执行工具     │     │
│  └────────────────────────────────┘     │
│                    ↓                    │
│  ┌────────────────────────────────┐     │
│  │  LLM with Tool Use (AI 能力层) │     │
│  │  - 理解工具                      │     │
│  │  - 决策调用                      │     │
│  └────────────────────────────────┘     │
└─────────────────────────────────────────┘
                    ↕
        ┌──────────────────────┐
        │   MCP Server (外部)   │
        │   - github tools      │
        │   - filesystem tools  │
        │   - database tools    │
        └──────────────────────┘
  • Tool Use 是基础, 没有它其他都无从谈起
  • MCP 让工具的集成变得简单和标准化
  • Skills 让能力的组织变得高效

实践建议

在实际开发 AI 应用时:

  1. 选择支持 Tool Use 的 LLM: 这是硬性要求, 没有商量余地
  2. 优先使用现有的 MCP Server: 不要重复造轮子, github/filesystem 等常用工具都有官方 MCP Server
  3. 合理组织 Skills: 如果你的系统提示词超过几千 tokens, 考虑用 Skills 模式进行按需加载
  4. 理解工程本质: MCP 和 Skills 都是工程问题, 理解其原理后完全可以根据需求自己实现或调整

最后

希望本文帮助你厘清了 Tool Use, MCP, Skills 三者的关系. 记住核心观点: Tool Use 是 AI 能力, MCP 和 Skills 是工程设计. 它们各司其职, 共同构建了现代 AI Agent 的能力体系.

当你在开发 AI 应用时遇到问题, 先问自己: 这是 LLM 能力的问题, 还是工程设计的问题? 如果是 LLM 能力的问题, 我们就没法自己解决了, 只能换 LLM; 如果是工程设计的问题, 在这个极高速发展的行业, 如果还没有解决方案, 那我们是完全有能力去解决的.

【翻译】Rolldown 工作原理解析:符号关联、CJS/ESM 模块解析与导出分析

原文链接:www.atriiy.dev/blog/rolldo…

作者:Atriiy

引言

Rolldown 是一款基于 Rust 开发的高性能 JavaScript 打包工具。它在完全兼容 Rollup API 的前提下,实现了 10 至 30 倍的打包速度提升。出于对开发与生产环境统一引擎的需求,Vite 团队正将 Rolldown 打造为当前基于 esbuild + Rollup 的打包架构的继任者。

在现代前端项目中,成百上千的模块构成了复杂的依赖图谱。打包工具的理解不能仅停留在 “文件级导入” 层面:它必须深入分析,判断 featureA.js 中导入的 useState 是否与 featureB.js 中的 useState 为同一个实体。这一关键的解析过程被称为链接(linking)

链接阶段(link stage)正是为解决这一问题而生:它处理那些会在模块图谱中传播的宏观属性(例如顶层 await 的 “传染性”);搭建不同模块系统(CJS/ESM)之间的通信桥梁;最终将每一个导入的符号追溯到其唯一的原始定义。

为揭开这一过程的神秘面纱,我们将通过三级心智模型拆解链接阶段的内部机制,从宏观到微观逐步剖析其工作原理。

三级心智模型

扫描阶段输出的是一份基础的模块依赖图谱,但仅停留在文件级别。而链接阶段会通过一系列数据结构和算法细化这份图谱,最终生成精准的「符号级依赖映射」。

  • 基础与固有属性。扫描阶段生成的初始图谱存储在 ModuleTable 中,记录了所有模块的依赖关系。链接阶段会对该图谱执行深度优先遍历,计算并传播诸如顶层 await(TLA)这类具有 “传染性” 的属性。这些属性可能通过间接依赖影响整个模块链,因此这一分析是代码生成阶段的关键前提。

  • 标准化与模块通信协议。JavaScript 对多模块系统(主要是 CommonJS 即 CJS、ES 模块即 ESM)的支持带来了复杂度。在核心链接逻辑执行前,必须先规范化这些不同的模块格式,处理命名空间对象、垫片化导出(shimmed exports)等细节。这种标准化构建了统一的处理环境,让符号链接算法能专注于核心的解析逻辑,而非大量边缘情况。

  • 万物互联:符号谱系。在最细粒度层面,该阶段会将符号与其对应的导入、导出语句建立关联。它借助并查集(Disjoint Set Union,DSU) 数据结构高效建立跨模块的等价关系,确保每个符号都能解析到唯一、无歧义的原始定义。

示例项目

为了梳理链接阶段复杂的数据结构与算法逻辑,我们将以一个具体的示例项目展开讲解。这种方式能让底层逻辑变得更具象、更易理解。该项目是特意设计的,旨在展现链接阶段必须处理的多个关键场景:

  • CJS 与 ESM 混合使用
  • 顶层 await(TLA)
  • 具名导出与星号重导出
  • 潜在歧义符号
  • 外部依赖
  • 副作用

完整源码可在这份 GitHub Gist 中查看,项目的文件结构如下:

📁 .
├── api.js                # (1) Fetches data, uses Top-Level Await (ESM)
├── helpers.js            # (2) Re-exports modules, creating linking complexity (ESM)
├── legacy-formatter.cjs  # (3) An old formatting utility (CJS)
├── main.js               # (4) The application entry point (ESM)
└── polyfill.js           # (5) A simulated polyfill to demonstrate side effects (ESM)

若你想自行运行这个示例,需将这些文件放置到 Rolldown 代码仓库的 crates/rolldown/examples/basic 目录下。随后,修改 basic.rs 文件,把 main.js 配置为入口点:

// ...
input: Some(vec![
  "./main.js".to_string().into(),
]),

完成调试环境配置后,建议你结合断点运行这款打包工具。通过单步执行代码、实时查看数据结构的方式,能让你更深入地理解整个处理流程。

基础与固有属性

扫描阶段会生成一份基础的模块依赖图谱。在这张有向图中,节点代表单个模块,边表示模块间的导入关系;为了实现高效遍历,该结构通常基于邻接表实现。链接阶段基础环节的核心任务,是遍历这张图谱并计算那些会沿导入链传播的宏观属性 —— 例如顶层 await(TLA)的 “传染性”。想要理解这些算法的工作原理,扎实掌握核心模块的数据结构是必不可少的前提。

图谱设计

图谱设计的核心是 ModuleIdx(模块索引)—— 一种用于指向特定模块的类型化索引。模块分为两类:NormalModuleExternalModule,不过我们的分析将主要聚焦前者。每个NormalModule都会封装其 ECMAScript 解析结果,其中最关键的是 import_records 字段(该字段会列出模块中所有的导入语句)。以下类图展示了这一数据结构的设计思路。

classDiagram
note for ModuleIdx "Typed Index of Module"
class ModuleIdx { 
  TypeAlias for u32
}

note for ModuleTable "Global Module Table" 
class ModuleTable { 
  +modules: IndexVec< ModuleIdx, Module >
}
ModuleIdx -- ModuleTable : used_as_index_for 

class Module { 
  <<enumeration>> 
  +Normal: Box~NormalModule~
  +External: Box~ExternalModule~
  +idx() : ModuleIdx 
  +import_records() : IndexVec< ImportRecordIdx, ResolvedImportRecord >
} 
ModuleTable "1" o-- "0..*" Module : contains

class ExternalModule { 
  +idx: ModuleIdx
  +import_records: IndexVec<...> 
} 
Module -- ExternalModule : can_be_a 

class NormalModule { 
  +idx: ModuleIdx 
  +ecma_view: EcmaView 
} 
Module -- NormalModule : can_be_a 

class ImportRecordIdx { 
  TypeAlias for u32
}

class EcmaView { 
  import_records: IndexVec< ImportRecordIdx, ResolvedImportRecord > 
}
NormalModule "1" *-- "1" EcmaView : own
ImportRecordIdx -- EcmaView : used_as_index_for 

class ImportRecord~State~ { 
  +kind: ImportKind 
}
EcmaView "1" o-- "0..*" ImportRecord~State~ : contains

class ImportRecordStateResolved { 
  +resolved_module: ModuleIdx 
}
ImportRecord~State~ *-- ImportRecordStateResolved : holds

遍历依赖图时,需要逐一迭代处理每个模块的依赖项。这些依赖项可通过 import_records 字段访问。为了简化这一高频操作,Module 枚举类型专门实现了一个便捷的 import_records() 访问器方法。这一设计选择简化了依赖图的遍历流程,Rolldown 源码中下述常见代码模式即可印证这一点:

module_table.modules[module_idx]
.import_records()
.iter()
.map(|rec| {
  // do something...
})

核心数据结构:LinkingMetadata

链接阶段(link stage)的最终输出封装在 LinkStageOutput 结构体中。其定义如下:

pub struct LinkStageOutput {
  pub module_table: ModuleTable,
  pub metas: LinkingMetadataVec,
  pub symbol_db: SymbolRefDb,
  // ...
}

总结这些字段的作用:ModuleTable 是扫描阶段(scan stage)的主要输入,而 LinkingMetadataVecSymbolRefDb 是核心输出 —— 前者存储在模块层面新计算出的信息,后者则存储符号层面的相关信息。这三个结构体共同从宏观到微观的维度,完整、多层级地描述了模块间的依赖关系。

ModuleTable 类似,LinkingMetadataVec 是一个带索引的向量(indexed vector),可通过 ModuleIdx 访问每个具体模块的元数据。而绝大多数这类新增的模块层面信息,均记录在 LinkingMetadata 结构体内部。

classDiagram
note for ModuleIdx "Typed Index of Module"
class ModuleIdx {
  TypeAlias for u32
}
class LinkStage {
  +metas: IndexVec< ModuleIdx, LinkingMetadata >
}
ModuleIdx -- LinkStage : used_as_index_for
class LinkingMetadata {
  +wrap_kind: WrapKind
  +resolved_exports: FxHashMap
  +has_dynamic_exports: bool
  +is_tla_or_contains_tla_dependency: bool
}
LinkStage "1" o-- "0..*" LinkingMetadata : contains

顶层 await(TLA)的处理逻辑

顶层 await(Top-level await,简称 TLA),顾名思义,允许开发者在 ES 模块的顶层作用域中使用 await 关键字,无需将异步代码包裹在 async 函数中。该特性极大简化了异步初始化任务的编写,相比传统的立即调用函数表达式(Immediately Invoked Function Expression,IIFE)模式,代码逻辑更清晰。我们示例项目中的 api.js 文件就体现了这一用法:

console.log('API module evaluation starts.')
// Use top-level await to make the entire dependency chain async
const response = await fetch('https://api.example.com/items/1')
const item = await response.json()

// Export a processed data
export const fetchedItem = { id: item.id, value: item.value * 100 }

// Export a normal variable, we will use it to create confusion
export const source = 'API'

console.log('API module evaluation finished.')

TLA 的一个核心特性是其 “传染性”:若某个模块使用了 TLA,所有直接或间接导入该模块的其他模块都会受到影响,且必须被当作异步模块处理。每个模块的 LinkingMetadata 中都包含一个 is_tla_or_contains_tla_dependency 标记,用于追踪这一状态。在我们的示例中,main.js 依赖 helpers.js,而 helpers.js 又依赖使用了 TLA 的 api.js;因此 Rolldown 会对依赖图执行深度优先遍历,并将这三个模块的该标记均设为 true

该标记的计算逻辑完全贴合 TLA 的行为特征:Rolldown 采用递归的深度优先搜索(DFS)算法,并通过哈希表做记忆化处理(memoization),避免对同一模块重复计算。算法核心通过检查两个条件,判断模块是否受 TLA 影响:

  • 模块自身是否包含顶层 await?(这一信息来自扫描阶段计算得到的 ast_usage 字段)
  • 模块是否导入了任何受 TLA 影响的其他模块?

这种递归检查确保了 TLA 的 “传染性” 能从源头沿整个依赖链向上正确传播。

副作用的判定逻辑

简单来说,若一个模块在被导入时,除了导出变量、函数或类之外还执行了其他操作,则称该模块具有 “副作用”。具体而言,它会执行影响全局环境或修改自身作用域之外对象的代码。Polyfill(兼容性补丁)是典型应用场景 —— 这类代码通常会扩展全局对象,以使老旧浏览器能够支持新的 API。

我们示例项目中的 polyfill.js 就是绝佳例证:尽管 main.js 仅通过 import './polyfill.js' 导入该模块,并未引用任何符号,但由于它修改了全局的 globalThis 对象,该模块仍被判定为具有副作用。因此 Rolldown 必须确保该模块的代码被包含在最终的打包产物中。

由于打包工具无法通过编程方式判断副作用是否 “有益”,只能保守地保留所有被标记为含副作用的模块。识别这类模块的流程与计算 TLA 类似:该属性同样具有传染性,若一个模块存在副作用,所有直接 / 间接导入它的模块都会被认定为受影响。其底层算法也基本一致:通过递归的深度优先搜索(DFS)检查每个 Module 上的 side_effects() 信息,并借助记忆化处理避免重复检查。

至此,我们的模块图已标注了顶层 await、副作用等宏观属性,但这仍不够。在精准链接符号之前,我们必须先解决一个问题:模块可能使用不同的模块系统(如 CJS 和 ESM),它们需要一套统一的交互协议 —— 这正是我们下一步要实现的目标。

标准化处理与模块交互协议

尽管扫描阶段已梳理出模块依赖图,但该阶段仅捕获了 “文件级” 的依赖关系。这份原始依赖图并未考虑一个关键问题:模块可能采用不同的模块系统(如 CommonJS(CJS)和 ES 模块(ESM)),而这些系统本身并不具备互操作性。为解决这一问题,在执行更深层的链接逻辑前,必须先完成标准化处理流程。

该标准化处理在链接阶段执行:Rolldown 遍历模块依赖图,为每个模块计算所需的标准化信息,并将其记录到对应的 LinkingMetadata 结构体中。正如我们此前所述,该结构体存储在 LinkStageOutputmetas 字段内。

模块系统与包装器(Wrapper)

现代 JavaScript 生态中主流的模块系统有两种:CommonJS(CJS)和 ES 模块(ESM)。

  • CommonJS(CJS) :主要应用于 Node.js 生态,是一种同步模块系统。依赖通过阻塞式的 require() 调用加载,模块则通过向 module.exportsexports 对象赋值的方式暴露自身 API。
  • ES 模块(ESM) :ECMAScript 推出的官方标准,同时适配浏览器和 Node.js 环境。其静态结构(使用 importexport 语句)专为编译期分析设计,而浏览器端的加载机制本身是异步、非阻塞的。

这两种系统常出现在同一代码库中 —— 尤其是现代基于 ESM 的项目依赖仅提供 CJS 分发包的老旧第三方库时。为处理这种混合使用场景,Rolldown 会判定模块是否需要 “包装器(Wrapper)”。尽管具体算法将在后续详述,但其核心思路十分简单:包装器是一个函数闭包,能够模拟特定的模块运行环境,从而让不兼容的模块系统实现交互。

以下简化示例阐释了这一核心思想:

// Code storage
const __modules = {
  './utils.js': exports => {
    exports.add = (a, b) => a + b
  },
  './data.js': (exports, module) => {
    module.exports = { value: 42 }
  },
}

// Runtime
function __require(moduleId) {
  const module = { exports: {} }
  __modules[moduleId](module.exports, module)

  return module.exports
}

尽管实际生成的代码更为复杂,但其核心原理始终不变:将模块代码包裹在函数中,以在运行时为其提供所需的执行环境。我们示例项目中的 legacy-formatter.cjs 正是如此 ——Rolldown 检测到这个 CJS 文件被一个 ESM 模块(helpers.js)导入,因此会对其进行对应的包装处理(使用 WrapKind::Cjs 类型的包装器)。该包装器模拟了 module.exports 执行环境,确保不同模块系统间实现无缝互操作。你可以查看 basic/dist 目录下的打包产物,直观看到这一处理逻辑的实际效果。

模块类型判定与包装器选择

为确保 CJS 与 ESM 之间的无缝互操作,Rolldown 必须为每个模块选择合适的包装器。这一决策不仅取决于模块自身的格式,还与其他模块导入该模块的方式相关。

首先,在扫描阶段,Rolldown 会根据模块的语法特征识别出每个模块的 ExportsKind(导出类型),并将其存储在该模块的 EcmaView 中:

pub struct EcmaView {
  pub exports_kind: ExportsKind,
  // ...
}

接下来,Rolldown 会考量导入方模块所使用的 ImportKind(导入类型)。该枚举类型涵盖了 JavaScript 中引用其他文件的所有方式:

pub enum ImportKind {
  /// import foo from 'foo'
  Import,
  /// `import('foo')`
  DynamicImport,
  /// `require('foo')`
  Require,
  // ... (other kinds like AtImport, UrlImport, etc.)
}

pub enum ExportsKind {
  Esm,
  CommonJs,
  None,
}

核心逻辑在于导入方的 ImportKind(导入类型)与被导入方的 ExportsKind(导出类型)的组合判定。二者的匹配关系决定了被导入方所需的 WrapKind(包装器类型)。例如,当一个模块通过 require() 方式加载(对应 ImportKind::Require 类型)时,其 WrapKind 由自身的 ExportsKind 决定。这一逻辑确保了被导入模块在运行时能获得适配的执行环境。

// ...
ImportKind::Require => match importee.exports_kind {
  ExportsKind::Esm => {
    self.metas[importee.idx].wrap_kind = WrapKind::Esm;
  }
  ExportsKind::CommonJs => {
    self.metas[importee.idx].wrap_kind = WrapKind::Cjs;
  }
}
// ...

递归应用包装器

在确定了不同交互场景下所需的 WrapKind(包装器类型)后,wrap_modules 函数会遍历模块依赖图,应用这些包装器并处理相关的复杂逻辑。

其中一个核心难点是 CommonJS 模块中的 “星号导出”(export * from './dep')。由于 CJS 模块的完整导出列表无法在编译期确定,这类导出会被视为动态导出,需要特殊处理。

此外,包装过程本身是递归的:当一个模块需要包装器时(例如被 ESM 模块导入的 CJS 模块),仅包装该单个模块是不够的 —— 包装器可能引入新的异步行为。因此 Rolldown 必须递归向上遍历整个导入链,确保所有依赖这个新包装模块的模块都被正确处理。这种递归传播机制能保证所有依赖在运行时就绪,并维持正确的执行顺序。

整合所有环节:符号溯源

在完成依赖图基础属性的标注、模块格式的标准化后,我们终于来到链接阶段的核心任务:处理导入的符号。最终目标是将每个符号追溯到其唯一、明确的原始定义。

以示例项目中的场景为例:main.jshelpers.js 导入名为 source 的符号,而 helpers.js 又会将 api.js 中的所有内容重新导出。打包工具如何确认 main.js 中使用的 source,就是 api.js 中定义的那个完全相同的变量?

这本质上是一个 “等价性判定” 问题。为高效解决该问题,Rolldown 采用了并查集(Disjoint Set Union,DSU) 数据结构 —— 这是一种专为这类等价性问题设计的算法。在该模型中,每个符号引用都被视为一个元素,核心目标是将所有指向同一原始定义的引用归并到同一个集合中。

并查集(DSU)

并查集(Disjoint Set Union,DSU)也被称为 “联合 - 查找(union-find)” 数据结构,是一种高效的数据结构:每个集合以树的形式表示,树的根节点作为该集合的 “标准代表元”。并查集主要支持两种操作:

  • 查找(Find) :确定某个元素所属集合的标准代表元;
  • 合并(Union) :将两个不相交的集合合并为一个集合。

经典的并查集实现会使用一个简单的数组(我们称之为 parent),其中 parent[i] 存储元素 i 的父节点。若 parent[i] == i,则 i 是其所在树的根节点。以下伪代码展示了一个未做优化的基础实现:

parent = []

def find(x):
return x if parent[x] == x else find(parent[x])

def union(x, y):
root_x = find(x)
root_y = find(y)
if root_x != root_y:
# Link the root of x's tree to the root of y's tree
parent[root_x] = root_y

Rolldown 沿用了这一核心思路,但实现方式更健壮且具备类型安全性。它并未使用原生数组,而是采用 IndexVec—— 一种类向量结构,通过 SymbolId 这类带类型的 ID 进行索引。父指针的作用则由 SymbolRefDataClassic 结构体中的 link 字段来实现,如下图所示。

classDiagram
note for ModuleIdx "Typed Index of Module"
class ModuleIdx {
  TypeAlias for u32
}
class SymbolRefDb {
  +inner: IndexVec< ModuleIdx, Option~SymbolRefDbForModule~>
  link(&mut self, base: SymbolRef, target: SymbolRef)
  find_mut(&mut self, target: SymbolRef) : SymbolRef
}
ModuleIdx -- SymbolRefDb : used_as_index_for
class SymbolRefDbForModule {
  owner_idx: ModuleIdx
  root_scope_id: ScopeId
  +ast_scopes: AstScopes
  +flags: FxHashMap< SymbolId, SymbolRefFlags>
  +classic_data: IndexVec< SymbolId, SymbolRefDataClassic>
  create_facade_root_symbol_ref(&mut self, name: &str) : SymbolRef
  get_classic_data(&self, symbol_id: SymbolId) : &SymbolRefDataClassic
}
SymbolRefDb "1" o-- "0..*" SymbolRefDbForModule : contains
class SymbolRefDataClassic {
  +namespace_alias: Option~NamespaceAlias~
  +link: Option~SymbolRef~
  +chunk_id: Option~ChunkIdx~
}
SymbolRefDbForModule "1" o-- "0..*" SymbolRefDataClassic : contains

如图所示,每个符号的等价性信息都存储在 SymbolRefDataClassic 结构体中。可选的 link 字段指向其父符号 —— 这一点与经典并查集实现中的 parent 数组完全对应。

Rolldown 将并查集的两个核心操作实现为 find_mutlink 方法。

find_mut 方法(带路径压缩的查找操作)

Rolldown 的 find_mut 方法不仅能找到根节点,还会执行一项关键优化:路径压缩(path compression)

pub fn find_mut(&mut self, target: SymbolRef) -> SymbolRef {
  let mut canonical = target;
  while let Some(parent) = self.get_mut(canonical).link {
    // Path compression: Point the current node to its grandparent
    self.get_mut(canonical).link = self.get_mut(parent).link;
    canonical = parent;
  }
  canonical
}

当 while 循环沿着树结构向上遍历至根节点(即 link 字段为 None 的元素)时,会将遍历过程中访问到的每个节点重新关联,使其直接指向自身的祖父节点(self.get_mut(parent).link)。这一操作能高效地 “扁平化” 树结构,大幅提升后续对该路径上任意节点执行查找(find)操作的速度。最终返回的 “标准符号” 即为该集合的根节点代表元。

link 方法(合并操作)

link 方法实现了并查集的合并(union)操作。

/// Make `base` point to `target`
pub fn link(&mut self, base: SymbolRef, target: SymbolRef) {
  let base_root = self.find_mut(base);
  let target_root = self.find_mut(target);
  if base_root == target_root {
    // Already linked
    return;
  }
  self.get_mut(base_root).link = Some(target_root);
}

该方法首先找到基准符号(base)目标符号(target) 各自的根节点代表元。若二者根节点相同,说明这些符号已属于同一集合,无需执行任何操作;反之,则通过将基准符号根节点的 link 字段指向目标符号的根节点,完成两个集合的合并。

绑定导入与导出(Bind imports and exports)

符号解析流程始于 bind_imports_and_exports 函数。初始步骤是遍历所有模块,提取其中的显式命名导出;这些导出信息会被存储在一个哈希映射(hash map)中 —— 键为导出的字符串名称,值则是 ResolvedExport 结构体实例。

pub struct ResolvedExport {
  pub symbol_ref: SymbolRef,
  pub potentially_ambiguous_symbol_refs: Option<Vec<SymbolRef>>,
}

但这一流程会因 ES 模块的星号导出(export * from './dep' 变得复杂 —— 该语法会将另一个模块的所有命名导出重新导出。我们示例中的 helpers.js 就使用了这一语法:export * from './api.js'

星号导出可能引入歧义,必须在最终链接前解决。因此,对于任何包含星号导出的模块,Rolldown 都会调用一个专用函数 add_exports_for_export_star。该函数通过递归深度优先搜索(DFS) 遍历星号导出的依赖图;为检测循环依赖并管理导出优先级,它采用经典的回溯模式维护一个 module_stack(模块栈):递归调用前将模块 ID 压入栈中,递归返回后再将其弹出。

这一递归遍历主要承担两项核心职责:

  • 遮蔽(Shadowing) :模块内的显式命名导出始终拥有最高优先级,会 “遮蔽” 所有通过星号导出从深层依赖导入的同名导出。module_stack 可根据导入链中的 “就近原则” 判定这种优先级关系。
  • 歧义检测:当一个模块试图从多个 “优先级相同” 的不同来源导出同名符号时(例如通过两个不同的星号导出:export * from 'a'export * from 'b'),就会产生歧义。若一个新引入的星号导出符号与已存在的符号同名、且未被遮蔽,则会被记录到 potentially_ambiguous_symbol_refs 字段中,留待后续解析。

在整个过程中,该函数会操作一个由调用方传入的、可变的 resolve_exports 哈希表(FxHashMap 类型),逐步构建出该模块完整的已解析导出集合。

匹配导入与导出(Match imports with exports)

完成所有模块导出的解析后,下一步是将每个导入项匹配到对应的导出项。这一完整流程由封装在 BindImportsAndExportsContext 中的数据和结构体统一管理。

struct BindImportsAndExportsContext<'a> {
  pub index_modules: &'a IndexModules,
  pub metas: &'a mut LinkingMetadataVec,
  pub symbol_db: &'a mut SymbolRefDb,
  pub external_import_binding_merger:
    FxHashMap<ModuleIdx, FxHashMap<CompactStr, IndexSet<SymbolRef>>>,
  // ... fields omitted for brevity
}

这一环节的最终目标是填充 symbol_db(符号数据库)—— 借助并查集(DSU)逻辑,将每个导入符号关联到其真正的定义源头。具体流程为:遍历所有 NormalModule(普通模块),并对模块中的每一个命名导入项(每个导入项由 NamedImport 结构体表示,例如 import { foo } from 'foo' 这类语法)执行匹配函数。

但在关联内部符号之前,外部导入项会先经过一套特殊的预处理流程。当某个导入项来自外部模块(例如 import react from 'react' 中的 react)时,并不会立即解析该导入,而是将其收集起来,并归类到 external_import_binding_merger(外部导入绑定合并器)中。

该数据结构是一个嵌套哈希映射,其设计目的是聚合所有 “引用同一外部模块中同名导出” 的导入项。

classDiagram
class ExternalImportBindingMerger {
  +FxHashMapᐸModuleIdx, ModuleExportsᐳ
}
class ModuleExports {
  +FxHashMapᐸCompactStr, SymbolSetᐳ
}
ExternalImportBindingMerger o-- ModuleExports : uses as value
class ModuleIdx
ExternalImportBindingMerger o-- ModuleIdx : uses as key
class SymbolSet {
  +IndexSetᐸSymbolRefᐳ
}
ModuleExports o-- SymbolSet : uses as value
class CompactStr
ModuleExports o-- CompactStr : uses as key
class SymbolRef
SymbolSet "1" o-- "0..*" SymbolRef : contains

我们以示例项目中的 main.js 文件为例来具体说明:

// ...
// (2) Import from external dependencies, this will be handled by external_import_binding_merger
import { useState } from 'react'

// ...

由于 react 是外部模块,Rolldown 会更新 external_import_binding_merger(外部导入绑定合并器)。假设 react 对应的模块索引(ModuleIdx)为 react_module_idx,最终生成的数据结构如下所示:

graph TD
param1["external_import_binding_merger\n (FxHashMap)"]
param2["FxHashMapᐸCompactStr,\n IndexSetᐸSymbolRefᐳᐳ"]
param3["IndexSetᐸSymbolRefᐳ:\n {sym_useState_main}"]
param1 -->|key: react_module_idx| param2
param2 -->|"key: 'useState' (CompactStr)"| param3

若另有一个文件(例如 featureB.js)也从 react 导入 useState,则其对应的 SymbolRef(符号引用)会被添加到同一个 IndexSet 集合中。这也是该结构被恰如其分地命名为 “合并器(merger)” 的原因:它将指向同一个外部符号(react.useState)的所有本地引用汇总到一处。这种聚合方式支持后续的统一处理,确保所有对 useState 的引用最终都指向唯一、统一的外部符号。

遍历完所有模块及其导入项后,Rolldown 会迭代这个已完全填充的合并器映射表(merger map),完成所有外部符号的绑定操作。

追溯导入项的定义源头

符号解析的核心执行函数是递归函数 match_import_with_export。该函数的使命是:根据 ImportTracker(导入追踪器)描述的单个导入项,一路追溯到其原始定义。

struct ImportTracker {
  pub importer: ModuleIdx,      // The module performing the import.
  pub importee: ModuleIdx,      // The module being imported from.
  pub imported: Specifier,      // The name of the imported symbol (e.g., "useState").
  pub imported_as: SymbolRef,   // The local SymbolRef for the import in the importer module.
}

该函数的返回值 MatchImportKind(导入匹配类型)会封装本次追溯的结果。整个解析流程可拆解为三个阶段:

阶段 1:循环检测与初始状态判定

该函数采用带循环检测的递归深度优先搜索(DFS) 实现。MatchingContext(匹配上下文)会维护一个 “追踪器栈(tracker stack)”,用于检测同一导入方模块是否试图解析 “正在处理中的、同名的 imported_as 符号引用”。若检测到这种情况,则无需继续执行,直接返回 MatchImportKind::Cycle(循环)即可。

接下来,一个辅助函数 advance_import_tracker 会对直接被导入方(direct importee) 执行快速的非递归分析,检查简单场景并返回初始状态:

  • 若被导入方是外部模块,返回 ImportStatus::External(外部模块);
  • 若被导入方是 CommonJS 模块,返回 ImportStatus::CommonJS(CJS 模块);
  • 若该导入是星号导入(import * as ns),判定为 ImportStatus::Found(已找到);
  • 对于 ES 模块的命名导入,会检查直接被导入方的 “已解析导出集合”:若找到匹配的导出项,返回 ImportStatus::Found;否则返回 ImportStatus::NoMatch(无匹配)或 ImportStatus::DynamicFallback(动态降级)。

阶段 2:重新导出链遍历

真正的复杂度在于重新导出链(re-export chain) 的遍历。当返回 ImportStatus::Found 时,函数会进一步检查:找到的这个符号本身是否是从另一个模块导入的:

let owner = &index_modules[symbol.owner];
if let Some(another_named_import) = owner.as_normal().unwrap().named_imports.get(&symbol) {
  // This symbol is re-exported from another module
  // Update tracker and continue the loop to follow the chain
  tracker.importee = importee.idx;
  tracker.importer = owner.idx();
  tracker.imported = another_named_import.imported.clone();
  tracker.imported_as = another_named_import.imported_as;
  reexports.push(another_named_import.imported_as);
  continue;
}

这一过程会以迭代方式持续进行,同时构建用于副作用依赖追踪的重新导出链(reexports chain),直至追溯到符号的原始定义为止。

阶段 3:歧义消解与后置处理

在阶段 2 中,若某个导出项包含 potentially_ambiguous_export_star_refs(由 export * 语句导致的潜在歧义星号导出引用),函数会递归解析每一条歧义路径。收集到所有 ambiguous_results(歧义结果)后,函数会将其与主结果对比:若存在任何不一致,便返回 MatchImportKind::Ambiguous(存在歧义)。

而针对 NoMatch(无匹配)的结果,函数会检查垫片(shimming)功能是否启用(对应配置项 options.shim_missing_exports 或空模块场景)。垫片可为遗留代码提供兼容性降级方案:

let shimmed_symbol_ref = self.metas[tracker.importee]
  .shimmed_missing_exports
  .entry(imported.clone())
  .or_insert_with(|| {
    self.symbol_db.create_facade_root_symbol_ref(tracker.importee, imported.as_str())
  });

完成绑定操作(Finalizing bindings)

在针对所有内部导入项的核心匹配逻辑执行完毕后,Rolldown 会执行两项最终的批量处理步骤。

1. 合并外部导入项(Merging external imports)

如前文所述,所有来自外部模块的导入项会先被收集到 external_import_binding_merger(外部导入绑定合并器)中。现在,Rolldown 会处理这个映射表:对于每个外部模块及其命名导出(例如 react 中的 useState),Rolldown 会创建一个单一的门面符号(facade symbol) ;随后遍历所有导入了 useState 的本地符号集合(来自 featureA.jsfeatureB.js 等文件),并通过并查集(DSU)的 link 操作将这些本地符号全部合并,使其均指向这个唯一的门面符号。这一操作确保了对同一外部实体的所有导入项都被视为一个整体。

2. 处理歧义导出(Addressing ambiguous exports)

星号导出可能导致真正的歧义。请看以下场景:

// moduleA.js
export const foo = 1;

// moduleB.js
export const foo = 2;

// main.js
export * from './moduleA'; // Exports a `foo`
export * from './moduleB'; // Also exports a `foo`

Rolldown 采取保守策略:若某个导出名称对应多个不同的原始定义,该名称会被直接忽略,且不会被纳入模块的公共 API 中。这一设计能避免运行时出现不稳定或不可预测的行为。

但并非所有潜在冲突都会导致真正的歧义。在我们的示例项目中,main.jshelpers.js 导入 source 符号时,虽会沿重新导出链(export * from './api.js')追溯,但由于 source 仅有唯一的原始定义,match_import_with_export 函数能无冲突地完成解析。

链接阶段的输出结果

链接阶段会将扫描阶段生成的 “基础文件级依赖图”,转化为一个信息丰富、可深度解析的结构化数据。最终输出结果被封装在 LinkStageOutput 结构体中:

pub struct LinkStageOutput {
  pub module_table: ModuleTable,
  pub metas: LinkingMetadataVec,
  pub symbol_db: SymbolRefDb,
  // ... fields omitted for clarity
}

该结构体既包含原始的 ModuleTable(模块表),更重要的是,还包含链接阶段生成的全新产物。其中两个核心产物如下:

  1. LinkingMetadataVec:一个按 ModuleIdx(模块索引)索引的向量,存储每个模块对应的 LinkingMetadata(链接元数据)。它包含已解析的模块级信息 —— 例如最终的导出映射表(resolved_exports)、以及图遍历结果(如 is_tla_or_contains_tla_dependency 标记,即 “是否含顶层 await 或依赖含顶层 await 的模块”)。该向量为后续阶段提供了对每个模块属性和关联关系的语义级理解
  2. SymbolRefDb:符号关联关系数据库。它基于并查集(DSU)结构维护所有内部符号的等价类,借助这个数据库,可通过 find_mut 方法将任意导入符号追溯到其唯一的原始定义。

本质上,链接阶段是对模块依赖图的一次高效优化与解析过程。阶段结束时,所有模块和符号均已完全解析,且所有歧义都已消除。这为后续的代码生成、摇树优化(Tree Shaking)和代码分割阶段奠定了稳定、可预测的基础 —— 而这正是这些阶段能够正确且高效执行的关键。

总结

链接阶段是一个复杂的处理流程,它将扫描阶段生成的基础依赖图转化为一份完全解析、无歧义的符号映射表。我们详细梳理了其核心逻辑:如何系统性地遍历依赖图,传播 “顶层 await(TLA)”“副作用” 等属性;如何标准化不同的模块格式以确保互操作性。该阶段的核心支撑是一系列高效的数据结构(如 IndexVecFxHashMap)和强大的算法(深度优先搜索、并查集)。正是这些精心选择的数据结构与算法的组合,构成了 Rolldown 卓越性能的底层基石。

希望本次深度解析能帮助你扎实理解链接阶段的原理,并建立起对其内部工作机制的清晰认知。若你发现任何错误或有改进建议,欢迎在下方留言 —— 你的反馈至关重要!

在下一篇文章中,我们将探索打包流程的最后一个阶段:代码生成。敬请期待!

Transform 提高了渲染性能,但是代价是什么?

一旦父级元素应用了 transform(即使是 transform: translate(0, 0);),它就会变成其子级 position: fixed 元素的包含块(Containing Block)。这意味着该子元素将相对于这个父元素定位,而不是相对于传统的浏览器视口(Viewport)。


为什么会这样?

根据 W3C 的规范,当一个元素的 transform 属性值不为 none 时:

  1. 它会为 position: fixed 的后代创建一个包含块
  2. 它会创建一个新的堆叠上下文(Stacking Context)

这种情况下的表现:

  • 定位参考点变化:普通的 fixed 元素参考的是屏幕。而在 transform 容器内部,top: 0; left: 0; 会对齐到该容器的左上角。
  • 滚动同步:通常 fixed 元素不随页面滚动,但如果它被限制在了一个 transform 容器里,它会随着这个容器一起滚动。

除了 transform,还有哪些属性会“坑”掉 fixed?

不仅仅是 transform,以下属性也会导致子元素的 position: fixed 失效(将其“降级”为类似于 absolute 的表现):

  • filter 不为 none
  • perspective 不为 none
  • backdrop-filter 不为 none
  • will-change 设置为上述属性
  • contain 属性设置为 paintlayout

有什么解决办法吗?

如果你必须在经过变换的容器里实现“真正的”视口定位,通常有以下几种方案:

  1. 移动 DOM 结构(最常用): 将需要 fixed 的元素移出 transform 容器,直接放在 <body> 下。这也是为什么很多 UI 组件库(如 React 的 Ant Design 或 Vue 的 Element Plus)的 Modal/Tooltip 都会使用 Portal (传送门) 技术将弹窗挂载到 body 上的原因。
  2. 避免在祖先元素上使用 transform: 如果只是为了位移,考虑使用 marginleft/top(虽然性能略低);或者检查是否真的需要在那个层级使用动画。
  3. 使用 position: sticky (特定场景): 在某些简单的吸顶场景下,sticky 可能比 fixed 更符合预期,且受 transform 的限制较小(虽然它参考的是最近的滚动父级)。

一句话总结:只要祖先开了 transformfixed 就变成了“局部的 fixed”,不再是“全局的 fixed”。

你不知道的JS(中):程序性能与测试

你不知道的JS(中):程序性能与测试

本文是《你不知道的JavaScript(中卷)》的阅读笔记,第四部分:程序性能与测试。 供自己以后查漏补缺,也欢迎同道朋友交流学习。

程序性能

异步对 JavaScript 来说真的很重要,最显而易见的原因就是性能。如果要发出两个 Ajax 请求,并且它们之间是彼此独立的,但是需要等待两个请求都完成才能执行下一步的任务,那么为这个交互建模有两种选择:顺序与并发。 通常后一种模式会比前一种更高效。而更高的性能通常也会带来更好的用户体验。

Web Worker

我们已经详细介绍了 JavaScript 是如何单线程运作的。但是,单线程并不是组织程序执行的唯一方式。 设想一下,把你的程序分为两个部分:一部分运行在主 UI 线程下,另外一部分运行在另一个完全独立的线程中。

你的浏览器这样的环境,很容易提供多个 JavaScript 引擎实例,各自运行在自己的线程上,这样你可以在每个线程上运行不同的程序。程序中每一个这样的独立的多线程部分被称为一个(Web)Worker。这种类型的并行化被称为任务并行,因为其重点在于把程序划分为多个块来并发运行。

从 JavaScript 主程序(或另一个 Worker)中,可以这样实例化一个 Worker:

// 主程序
var w1 = new Worker( "http://some.url.1/mycoolworker.js" );
// 监听事件
w1.addEventListener( "message", function(evt){ 
    // evt.data 
} );
// 发送事件
w1.postMessage( "something cool to say" );

worker内部,收发消息是完全对称的:

// "mycoolworker.js" 
addEventListener( "message", function(evt){ 
    // evt.data 
} ); 
postMessage( "a really cool reply" );

1. Worker环境 在 Worker 内部是无法访问主程序的任何资源的。这意味着你不能访问它的任何全局变量,也不能访问页面的 DOM 或者其他资源。记住,这是一个完全独立的线程。

但你可以执行网络操作Ajax、WebSockets以及设定定时器。还有Worker可以访问几个重要的全局变量和功能的本地复本,包括 navigator、location、JSON 和 applicationCache。

你还可以通过 importScripts(..) 向 Worker 加载额外的 JavaScript 脚本:

// 在Worker内部
importScripts( "foo.js", "bar.js" );

这些脚本加载是同步的。也就是说,importScripts(..) 调用会阻塞余下 Worker 的执行,直到文件加载和执行完成。

Web Worker 通常应用于哪些方面呢?

  • 处理密集型数学计算
  • 大数据集排序
  • 数据处理(压缩、音频分析、图像处理等)
  • 高流量网络通信

2. 数据传递 在线程之间通过事件机制传递大量的信息,可能是双向的。 特别是对于大数据集而言,就是使用 Transferable 对象。这时发生的是对象所有权的转移,数据本身并没有移动。一旦你把对象传递到一个 Worker 中,在原来的位置上,它就变为空的或者是不可访问的,这样就消除了多线程编程作用域共享带来的混乱。当然,所有权传递是可以双向进行的。

// 比如foo是一个Uint8Array 
postMessage( foo.buffer, [ foo.buffer ] );

3. 共享Worker 创建一个整个站点或 app 的所有页面实例都可以共享的中心 Worker 就非常有用了。这称为 SharedWorker,可通过下面的方式创建(只有 Firefox 和 Chrome 支持这一功能):

var w1 = new SharedWorker( "http://some.url.1/mycoolworker.js" );

在共享 Worker 内部,必须要处理额外的一个事件:"connect"。这个事件为这个特定的连接提供了端口对象。保持多个连接独立的最简单办法就是使用 port 上的闭包:

// 在共享Worker内部
addEventListener( "connect", function(evt){ 
    // 这个连接分配的端口
    var port = evt.ports[0]; 
    port.addEventListener( "message", function(evt){ 
        // .. 
        port.postMessage( .. ); 
        // .. 
    } ); 
    // 初始化端口连接
    port.start(); 
} );

SIMD

单指令多数据(SIMD)是一种数据并行(data parallelism)方式,与 Web Worker 的任务并行(task parallelism)相对,因为这里的重点实际上不再是把程序逻辑分成并行的块,而是并行处理数据的多个位。

asm.js

asm.js这个标签是指 JavaScript 语言中可以高度优化的一个子集。通过小心避免某些难以优化的机制和模式(垃圾收集、类型强制转换,等等),asm.js 风格的代码可以被 JavaScript 引擎识别并进行特别激进的底层优化。

1. 如何使用

var a = 42;
var b = a | 0;

此处我们使用了与 0 的 |(二进制或)运算,除了确保这个值是 32 位整型之外,对于值没有任何效果。这样的代码在一般的 JavaScript 引擎上都可以正常工作。 而对支持 asm.js 的JavaScript 引擎来说,这段代码就发出这样的信号,b 应该总是被当作 32位整型来处理,这样就可以省略强制类型转换追踪。

2. asm.js 模块 对一个 asm.js 模块来说,你需要明确地导入一个严格规范的命名空间——规范将之称为stdlib,因为它应该代表所需的标准库。 你还需要声明一个堆(heap)并将其传入。这个术语用于表示内存中一块保留的位置,变量可以直接使用而不需要额外的内存请求或释放之前使用的内存。这样,asm.js 模块就不需要任何可能导致内存扰动的动作了,只需使用预先保留的空间即可。

var heap = new ArrayBuffer( 0x10000 ); // 64k堆

var arr = new Float64Array( heap );

asm.js 代码如此高度可优化的那些限制的特性显著降低了这类代码的使用范围。asm.js 并不是对任意程序都适用的通用优化手段。它的目标是对特定的任务处理提供一种优化方法,比如数学运算(如游戏中的图形处理)。

程序性能小结

异步编码模式使我们能够编写更高效的代码,通常能够带来非常大的改进。但是,异步特性只能让你走这么远,因为它本质上还是绑定在一个单事件循环线程上。 因此,在这一章里,我们介绍了几种能够进一步提高性能的程序级别的机制。

性能测试与调优

性能测试

如果被问到如何测试某个运算的速度(执行时间),绝大多数 JavaScript 开发者都会从类似下面的代码开始:

var start = (new Date()).getTime(); // 或者Date.now() 
// 进行一些操作
var end = (new Date()).getTime(); 
console.log( "Duration:", (end - start) );

这样低可信度的测试几乎无力支持你的任何决策。这个性能测试基本上是无用的。更坏的是它是危险的,因为它可能提供了错误的可信度。

1. 重复 你可以不以固定次数执行运算,转而循环运行测试,直到达到某个固定的时间。这可能会更可靠一些。

2. Benchmark.js 一个统计学上有效的性能测试工具,名为 Benchmark.js,我们使用这个工具就好了。

环境为王

对特定的性能测试来说,不要忘了检查测试环境,特别是比较任务 X 和 Y 这样的比对测试。仅仅因为你的测试显示 X 比 Y 快,并不能说明结论 X 比 Y 快就有实际的意义。

引擎优化 现代引擎要比我们凭直觉进行的推导复杂得多。它们会实现各种技巧,比如跟踪记录代码在一小段时期内或针对特别有限的输入集的行为。

jsPerf.com

如果想要在不止一个环境下得出像“X 比 Y 快”这样的有意义的结论成立,那你需要在尽可能多的真实环境下进行实际测试。仅仅因为在 Chrome 上某个 X 运算比 Y 快并不意味着这在所有的浏览器中都成立。当然你可能还想要交叉引用多个浏览器上的测试运行结果,并有用户的图形展示。 有一个很棒的网站正是因这样的需求而诞生的,名为 jsPerf (jsperf.com)。它使用我们前面介绍的 Benchmark.js 库来运行统计上精确可靠的测试,并把测试结果放在一个公开可得的 URL 上,你可以把这个 URL 转发给别人。

写好测试

编写更好更清晰的测试。

微性能

var x = [ .. ]; 
// 选择1 
for (var i=0; i < x.length; i++) { 
    // .. 
} 
// 选择2 
for (var i=0, len = x.length; i < len; i++) { 
    // .. 
}

理论上说,这里应该在变量 len 中缓存 x 数组的长度,因为表面上它不会改变,来避免在每个循环迭代中计算 x.length 的代价。

如下是 v8 的一些经常提到的例子:

  • 不要从一个函数到另外一个函数传递 arguments 变量,因为这样的泄漏会降低函数实现速度.
  • 把 try..catch 分离到单独的函数里。浏览器对任何有 try..catch 的函数实行优化都有一些困难,所以把这部分移到独立的函数中意味着你控制了反优化的害处,并让其包含的代码可以优化。

尾调用优化

ES6 包含了一个性能领域的特殊要求。这与一个涉及函数调用的特定优化形式相关:尾调用优化(Tail Call Optimization,TCO)。

function foo(x) { 
    return x; 
} 
function bar(y) { 
    return foo( y + 1 ); // 尾调用
} 
function bar(y) { 
    return foo( y + 1 ); // 尾调用
} 
function baz() { 
    return 1 + bar( 40 ); // 非尾调用
} 
baz(); // 42

调用一个新的函数需要额外的一块预留内存来管理调用栈,称为栈帧。所以前面的代码一般会同时需要为每个 baz()、bar(..) 和 foo(..) 保留一个栈帧。 然而,如果支持 TCO 的引擎能够意识到 foo(y+1) 调用位于尾部,这意味着 bar(..) 基本上已经完成了,那么在调用 foo(..) 时,它就不需要创建一个新的栈帧,而是可以重用已有的 bar(..) 的栈帧。这样不仅速度更快,也更节省内存。

性能测试与调优小结

尾调用优化是 ES6 要求的一种优化方法。它使 JavaScript 中原本不可能的一些递归模式变得实际。TCO 允许一个函数在结尾处调用另外一个函数来执行,不需要任何额外资源。这意味着,对递归算法来说,引擎不再需要限制栈深度。

原文地址

墨渊书肆/你不知道的JS(中):程序性能与测试

你不知道的JS(中):Promise与生成器

你不知道的JS(中):Promise与生成器

本文是《你不知道的JavaScript(中卷)》的阅读笔记,第三部分:Promise与生成器。 供自己以后查漏补缺,也欢迎同道朋友交流学习。

Promise

什么是Promise

未来值 在具体解释 Promise 的 工作方式之前,先来推导通过我们已经理解的方式——回调——如何处理未来值。为了统一处理现在和将来,我们把它们都变成了将来,即所有的操作都成了异步的。

Promise值

function add(xPromise,yPromise) { 
    // Promise.all([ .. ])接受一个promise数组并返回一个新的promise,
    // 这个新promise等待数组中的所有promise完成
    return Promise.all( [xPromise, yPromise] ) 
    // 这个promise决议之后,我们取得收到的X和Y值并加在一起
    .then( function(values){ 
        // values是来自于之前决议的promisei的消息数组
        return values[0] + values[1]; 
    } ); 
} 
// fetchX()和fetchY()返回相应值的promise,可能已经就绪,
// 也可能以后就绪 
add( fetchX(), fetchY() ) 
// 我们得到一个这两个数组的和的promise
// 现在链式调用 then(..)来等待返回promise的决议
.then( function(sum){ 
    console.log( sum ); // 这更简单!
} );

完成事件 在典型的 JavaScript 风格中,如果需要侦听某个通知,你可能就会想到事件。因此,可以把对通知的需求重新组织为对 foo 发出的一个完成事件(completion event,或continuation 事件)的侦听。

function foo(x) { 
    // 开始做点可能耗时的工作
    // 构造一个listener事件通知处理对象来返回
    return listener; 
} 
var evt = foo( 42 ); 
evt.on( "completion", function(){ 
    // 可以进行下一步了!
} ); 
evt.on( "failure", function(err){ 
    // 啊,foo(..)中出错了
} );

promise中监听回调事件:

function foo(x) { 
    // 可是做一些可能耗时的工作
    // 构造并返回一个promise
    return new Promise( function(resolve,reject){ 
        // 最终调用resolve(..)或者reject(..)
        // 这是这个promise的决议回调
    } ); 
} 
var p = foo( 42 ); 
bar( p ); 
baz( p );

具有then方法的鸭子类型

识别 Promise(或者行为类似于 Promise 的东西)就是定义某种称为 thenable 的东西,将其定义为任何具有 then 方法的对象 and 函数。我们认为,任何这样的值就是Promise 一致的 thenable。thenable值的鸭子类型检测就大致类似于:

if ( 
 p !== null && 
 ( 
 typeof p === "object" || 
 typeof p === "function" 
 ) && 
 typeof p.then === "function" 
) { 
 // 假定这是一个thenable! 
} 
else { 
 // 不是thenable 
}

Promise信任问题

先回顾一下只用回调编码的信任问题。把一个回调传入工具 foo(..) 时可能出现如下问题:

  • 调用回调过早;
  • 调用回调过晚(或不被调用);
  • 调用回调次数过少或过多;
  • 未能传递所需的环境和参数;
  • 吞掉可能出现的错误和异常;

1. 调用过早 Promise 就不必担心这种问题,因为即使是立即完成的 Promise(类似于 new Promise(function(resolve){ resolve(42); }))也无法被同步观察到。

2. 调用过晚 Promise 创建对象调用 resolve 或 reject 时,这个 Promise 的then 注册的观察回调就会被自动调度。可以确信,这些被调度的回调在下一个异步事件点上一定会被触发。

3. 回调未调用 如果你对一个 Promise 注册了一个完成回调和一个拒绝回调,那么 Promise在决议时总是会调用其中的一个。 但是,如果 Promise 本身永远不被决议呢?即使这样,Promise 也提供了解决方案,其使用了一种称为竞态的高级抽象机制:

// 用于超时一个Promise的工具
function timeoutPromise(delay) { 
    return new Promise( function(resolve,reject){ 
        setTimeout( function(){ 
            reject( "Timeout!" ); 
        }, delay ); 
    } ); 
} 
// 设置foo()超时
Promise.race( [ 
    foo(), // 试着开始foo() 
    timeoutPromise( 3000 ) // 给它3秒钟
] ) 
.then( 
     function(){ 
         // foo(..)及时完成!
     },
    function(err){ 
        // 或者foo()被拒绝,或者只是没能按时完成
        // 查看err来了解是哪种情况
    } 
);

4. 调用次数过少或过多 如果你把同一个回调注册了不止一次(比如 p.then(f); p.then(f);),那它被调用的次数就会和注册次数相同。响应函数只会被调用一次。

5. 未能传递参数/环境值 Promise 至多只能有一个决议值(完成或拒绝)。 如果你没有用任何值显式决议,那么这个值就是 undefined,这是 JavaScript 常见的处理方式。但不管这个值是什么,无论当前或未来,它都会被传给所有注册的(且适当的完成或拒绝)回调。

6. 吞掉错误或异常 如果在 Promise 的创建过程中或在查看其决议结果过程中的任何时间点上出现了一个 JavaScript 异常错误,比如一个 TypeError 或ReferenceError,那这个异常就会被捕捉,并且会使这个 Promise 被拒绝。

var p = new Promise( function(resolve,reject){ 
    foo.bar(); // foo未定义,所以会出错!
    resolve( 42 ); // 永远不会到达这里
} ); 
p.then( 
    function fulfilled(){ 
        // 永远不会到达这里 :( 
    }, 
    function rejected(err){ 
        // err将会是一个TypeError异常对象来自foo.bar()这一行
    } 
);

链式流

这种方式可以实现的关键在于以下两个 Promise 固有行为特性:

  • 每次你对 Promise 调用 then,它都会创建并返回一个新的 Promise,我们可以将其链接起来;
  • 不管从 then 调用的完成回调(第一个参数)返回的值是什么,它都会被自动设置为被链接 Promise的完成。
var p = Promise.resolve( 21 ); 
var p2 = p.then( function(v){ 
    console.log( v ); // 21 
    // 用值42填充p2
    return v * 2; 
} ); 
// 连接p2 
p2.then( function(v){ 
    console.log( v ); // 42 
} );

术语:决议、完成以及拒绝 对于术语决议(resolve)、完成(fulfill)和拒绝(reject),在更深入学习 Promise 之前,我们还有一些模糊之处需要澄清。先来研究一下构造器 Promise(..):

var p = new Promise( function(X,Y){ 
    // X()用于完成
    // Y()用于拒绝
} );

错误处理

错误处理最自然的形式就是同步的 try..catch 结构。遗憾的是,它只能是同步的,无法用于异步代码模式:

function foo() { 
    setTimeout( function(){ 
        baz.bar(); 
    }, 100 ); 
} 
try {
    foo(); 
    // 后面从 `baz.bar()` 抛出全局错误
} catch (err) { 
    // 永远不会到达这里
}

Promise 使用了分离回调风格。一个回调用于完成情况,一个回调用于拒绝情况:

var p = Promise.reject( "Oops" ); 
p.then( 
    function fulfilled(){ 
        // 永远不会到达这里
    }, 
    function rejected(err){ 
        console.log( err ); // "Oops" 
    } 
);

处理未捕获的情况 浏览器有一个特有的功能是我们的代码所没有的:它们可以跟踪并了解所有对象被丢弃以及被垃圾回收的时机。所以,浏览器可以追踪 Promise 对象。如果在它被垃圾回收的时候其中有拒绝,浏览器就能够确保这是一个真正的未捕获错误,进而可以确定应该将其报告到开发者终端。

Promise模式

1. Promise.all Promise.all 需要一个参数,是一个数组,通常由 Promise 实例组成。从 Promise.all([ .. ]) 调用返回的 promise 会收到一个完成消息。这是一个由所有传入 promise 的完成消息组成的数组,与指定的顺序一致(与完成顺序无关)。

// request(..)是一个Promise-aware Ajax工具
// 就像我们在本章前面定义的一样
var p1 = request( "http://some.url.1/" ); 
var p2 = request( "http://some.url.2/" ); 
Promise.all( [p1,p2] ) 
.then( function(msgs){ 
    // 这里,p1和p2完成并把它们的消息传入
    return request("http://some.url.3/?v=" + msgs.join(",")); 
}) 
.then( function(msg){ 
    console.log( msg ); 
});

2. Promise.race Promise.race也接受单个数组参数。这个数组由一个或多个 Promise、thenable 或立即值组成。一旦有任何一个 Promise 决议为完成,Promise.race就会完成;一旦有任何一个 Promise 决议为拒绝,它就会拒绝。

// request(..)是一个Promise-aware Ajax工具
// 就像我们在本章前面定义的一样
var p1 = request( "http://some.url.1/" ); 
var p2 = request( "http://some.url.2/" ); 
Promise.race( [p1,p2] ) 
.then( function(msg){ 
    // p1或者p2将赢得这场竞赛
    return request("http://some.url.3/?v=" + msg); 
}) 
.then( function(msg){ 
    console.log( msg ); 
});

all和race的变体

  • none([ .. ]) 这个模式类似于 all([ .. ]),不过完成和拒绝的情况互换了。所有的 Promise 都要被 拒绝,即拒绝转化为完成值,反之亦然。
  • any([ .. ]) 这个模式与 all([ .. ]) 类似,但是会忽略拒绝,所以只需要完成一个而不是全部。
  • first([ .. ]) 这个模式类似于与 any([ .. ]) 的竞争,即只要第一个 Promise 完成,它就会忽略后续的任何拒绝和完成。
  • last([ .. ]) 这个模式类似于 first([ .. ]),但却是只有最后一个完成胜出。

Promise API概述

new Promise构造器 有启示性的构造器 Promise(..) 必须和 new 一起使用,并且必须提供一个函数回调。这个回调是同步的或立即调用的。这个函数接受两个函数回调,用以支持 promise 的决议。通常我们把这两个函数称为 resolve(..) 和 reject(..):

var p = new Promise( function(resolve,reject){ 
    // resolve(..)用于决议/完成这个promise
    // reject(..)用于拒绝这个promise
} );

Promise.resolve和 Promise.reject 创建一个已被拒绝的 Promise 的快捷方式是使用 Promise.reject(..),所以以下两个promise 是等价的:

var p1 = new Promise( function(resolve,reject){ 
    reject( "Oops" ); 
} ); 
var p2 = Promise.reject( "Oops" );

then和catch then接受一个或两个参数:第一个用于完成回调,第二个用于拒绝回调。如果两者中的任何一个被省略或者作为非函数值传入的话,就会替换为相应的默认回调。默认完成回调只是把消息传递下去,而默认拒绝回调则只是重新抛出其接收到的出错原因。 catch只接受一个拒绝回调作为参数,并自动替换默认完成回调。 then 和 catch 也会创建并返回一个新的 promise,这个 promise 可以用于实现Promise 链式流程控制。

Promise局限性

顺序错误处理 很多时候并没有为 Promise 链序列的中间步骤保留的引用。因此,没有这样的引用,你就无法关联错误处理函数来可靠地检查错误。

单一值 根据定义,Promise 只能有一个完成值或一个拒绝理由。在简单的例子中,这不是什么问题,但是在更复杂的场景中,你可能就会发现这是一种局限了。

  1. 分裂值: 这种方法更符合 Promise 的设计理念。如果以后需要重构代码把对 x 和 y 的计算分开,这种方法就简单得多。由调用代码来决定如何安排这两个 promise,而不是把这种细节放在 foo(..) 内部抽象,这样更整洁也更灵活。
function foo(bar,baz) { 
    var x = bar * baz; 
    // 返回两个promise
    return [ 
        Promise.resolve( x ), 
        getY( x ) 
    ]; 
} 
Promise.all( foo( 10, 20 ) ) 
.then( function(msgs){ 
    var x = msgs[0]; 
    var y = msgs[1]; 
    console.log( x, y ); 
} );
  1. 展开/传递参数:

ES6 提供了数组参数解构形式

Promise.all( foo( 10, 20 ) ) 
.then( function([x,y]){ 
    console.log( x, y ); // 200 599 
} );

单决议 Promise 最本质的一个特征是:Promise 只能被决议一次(完成或拒绝)。在许多异步情况中,你只会获取一个值一次,所以这可以工作良好。

无法取消的Promise 一旦创建了一个 Promise 并为其注册了完成或拒绝处理函数,如果出现某种情况使得这个任务悬而未决的话,你也没有办法从外部停止它的进程。

Promise的性能 Promise 使所有一切都成为异步的了,即有一些立即(同步)完成的步骤仍然会延迟到任务的下一步。这意味着一个 Promise 任务序列可能比完全通过回调连接的同样的任务序列运行得稍慢一点。

Promise小结

Promise 非常好,请使用。它们解决了我们因只用回调的代码而备受困扰的控制反转问题。 Promise 链也开始 provide 以顺序的方式表达异步流的一个更好的方法,这有助于我们的大脑更好地计划和维护异步 JavaScript 代码。

生成器

JS 开发者在代码中几乎普遍依赖的一个假定:一个函数一旦开始执行,就会运行到结束,期间不会有其他代码能够打断它并插入其间。不过 ES6 引入了一个新的函数类型,它并不符合这种运行到结束的特性。这类新的函数被称为生成器。

打破完整运行

如果foo自身可以通过某种形式在代码的这个位置指示暂停的话,那就仍然可以以一种合作式的方式实现这样的中断(并发)。

var x = 1; 
function *foo() { 
    x++; 
    yield; // 暂停!
    console.log( "x:", x ); 
} 
function bar() { 
    x++; 
} 

// 构造一个迭代器it来控制这个生成器
var it = foo(); 

// 这里启动foo()!
it.next(); 
x; // 2 
bar(); 
x; // 3 
it.next(); // x: 3

解释 ES6 生成器的不同机制和语法之前,我们先来看看运行过程。

  1. it = foo() 运算并没有执行生成器 *foo(),而只是构造了一个迭代器(iterator),这个迭代器会控制它的执行。后面会介绍迭代器。
  2. 第一个 it.next() 启动了生成器 *foo(),并运行了 *foo() 第一行的 x++。
  3. *foo() 在 yield 语句处暂停,在这一点上第一个 it.next() 调用结束。此时 *foo() 仍在运行并且是活跃的,但处于暂停状态。
  4. 我们查看 x 的值,此时为 2。
  5. 我们调用 bar(),它通过 x++ 再次递增 x。
  6. 我们再次查看 x 的值,此时为 3。
  7. 最后的 it.next() 调用从暂停处恢复了生成器 *foo() 的执行,并运行 console.log(..)语句,这条语句使用当前 x 的值 3。

显然,foo() 启动了,但是没有完整运行,它在 yield 处暂停了。后面恢复了 foo() 并让它运行到结束,但这不是必需的。

输入和输出 生成器函数是一个特殊的函数,具有前面我们展示的新的执行模式。但是,它仍然是一个函数,这意味着它仍然有一些基本的特性没有改变。比如,它仍然可以接受参数(即输入),也能够返回值(即输出)。

function *foo(x,y) { 
    return x * y; 
} 
var it = foo( 6, 7 );

var res = it.next();
res.value; // 42

多个迭代器 同一个生成器的多个实例可以同时运行,它们甚至可以彼此交互:

function *foo() { 
    var x = yield 2; 
    z++; 
    var y = yield (x * z); 
    console.log( x, y, z ); 
} 
var z = 1; 
var it1 = foo(); 
var it2 = foo(); 
var val1 = it1.next().value; // 2 <-- yield 2 
var val2 = it2.next().value; // 2 <-- yield 2 
val1 = it1.next( val2 * 10 ).value; // 40 <-- x:20, z:2 
val2 = it2.next( val1 * 5 ).value; // 600 <-- x:200, z:3 
it1.next( val2 / 2 ); // y:300 
 // 20 300 3 
it2.next( val1 / 4 ); // y:10 
 // 200 10 3

我们简单梳理一下执行流程。

  1. *foo() 的两个实例同时启动,两个 next() 分别从 yield 2 语句得到值 2。
  2. val2 * 10 也就是 2 * 10,发送到第一个生成器实例 it1,因此 x 得到值 20. z 从 1 增加到 2,然后 20 * 2 通过 yield 发出,将 val1 设置为 40。
  3. val1 * 5 也就是 40 * 5,发送到第二个生成器实例 it2,因此 x 得到值 200. z 再次从 2递增到 3,然后 200 * 3 通过 yield 发出,将 val2 设置为 600。
  4. val2 / 2 也就是 600 / 2,发送到第一个生成器实例 it1,因此 y 得到值 300,然后打印出 x y z 的值分别是 20 300 3。
  5. val1 / 4 也就是 40 / 4,发送到第二个生成器实例 it2,因此 y 得到值 10,然后打印出x y z 的值分别为 200 10 3。

生成器产生值

我们提到生成器的一种有趣用法是作为一种产生值的方式。

生产者与迭代器 假定你要产生一系列值,其中每个值都与前面一个有特定的关系。要实现这一点,需要一个有状态的生产者能够记住其生成的最后一个值。

var gimmeSomething = (function(){ 
    var nextVal; 
    return function(){ 
        if (nextVal === undefined) { 
            nextVal = 1; 
        } 
        else { 
            nextVal = (3 * nextVal) +6; 
        } 
        return nextVal; 
    }; 
})(); 
gimmeSomething(); // 1 
gimmeSomething(); // 9 
gimmeSomething(); // 33 
gimmeSomething(); // 105

实际上,这个任务是一个非常通用的设计模式,通常通过迭代器来解决。迭代器是一个定义良好的接口,用于从一个生产者一步步得到一系列值。JavaScript 迭代器的接口,与多数语言类似,就是每次想要从生产者得到下一个值的时候调用 next()。

var something = (function(){ 
    var nextVal; 
    return { 
        // for..of循环需要
        [Symbol.iterator]: function(){ return this; }, 
        // 标准迭代器接口方法
        next: function(){ 
            if (nextVal === undefined) { 
                nextVal = 1; 
            } 
            else { 
                nextVal = (3 * nextVal) + 6; 
            } 
            return { done:false, value:nextVal }; 
        } 
    }; 
})(); 
something.next().value; // 1 
something.next().value; // 9 
something.next().value; // 33
something.next().value; // 105

ES6 还新增了一个 for..of 循环,这意味着可以通过原生循环语法自动迭代标准迭代器:

for (var v of something) { 
    console.log( v ); 
    // 不要死循环!
    if (v > 500) { 
        break; 
    } 
} 
// 1 9 33 105 321 969

iterable 可迭代 下面代码片段中的 a 就是一个 iterable。for..of 循环自动调用它的 Symbol.iterator 函数来构建一个迭代器。我们当然也可以手工调用这个函数,然后使用它返回的迭代器:

var a = [1,3,5,7,9]; 
var it = a[Symbol.iterator](); 
it.next().value; // 1 
it.next().value; // 3 
it.next().value; // 5

生成器迭代器 严格说来,生成器本身并不是 iterable,尽管非常类似——当你执行一个生成器,就得到了一个迭代器:

function *something() { 
    var nextVal; 
    while (true) { 
        if (nextVal === undefined) { 
            nextVal = 1; 
        } 
        else { 
            nextVal = (3 * nextVal) + 6; 
        } 
        yield nextVal; 
    } 
}

停止生成器 for..of 循环的“异常结束”(也就是“提前终止”),通常由 break、return 或者未捕获异常引起,会向生成器的迭代器发送一个信号使其终止。

var it = something(); 
for (var v of it) { 
    console.log( v ); 
    // 不要死循环!
    if (v > 500) { 
        console.log( 
            // 完成生成器的迭代器
            it.return( "Hello World" ).value 
        ); 
        // 这里不需要break 
    } 
} 
// 1 9 33 105 321 969 
// 清理!
// Hello World

异步迭代生成器

同步错误处理 我们可以把错误抛入生成器中:

function *main() { 
    var x = yield "Hello World"; 
    yield x.toLowerCase(); // 引发一个异常!
} 
var it = main(); 
it.next().value; // Hello World 
try { 
    it.next( 42 ); 
} 
catch (err) { 
    console.error( err ); // TypeError 
}

生成器 + Promise

首先,把支持 Promise 的 foo(..) 和生成器 *main() 放在一起:

function foo(x,y) { 
    return request( 
        "http://some.url.1/?x=" + x + "&y=" + y 
    ); 
} 
function *main() { 
    try { 
        var text = yield foo( 11, 31 ); 
        console.log( text ); 
    } catch (err) { 
        console.error( err ); 
    } 
}

var it = main(); 
var p = it.next().value; 
// 等待promise p决议
p.then( 
    function(text){ 
        it.next( text ); 
    }, 
    function(err){ 
        it.throw( err ); 
    } 
);

ES7: async与await

function foo(x,y) { 
    return request( 
        "http://some.url.1/?x=" + x + "&y=" + y 
    ); 
} 
async function main() { 
    try { 
        var text = await foo( 11, 31 ); 
        console.log( text ); 
    } catch (err) { 
        console.error( err ); 
    } 
} 
main();

生成器委托

yield * 暂停了迭代控制,而不是生成器控制。当你调用 *foo() 生成器时,现在 yield 委托到了它的迭代器。但实际上,你可以 yield 委托到任意iterable,yield *[1,2,3] 会消耗数组值 [1,2,3] 的默认迭代器。

function *foo() { 
    var r2 = yield request( "http://some.url.2" ); 
    var r3 = yield request( "http://some.url.3/?v=" + r2 ); 
    return r3; 
} 
function *bar() { 
    var r1 = yield request( "http://some.url.1" );
    // 通过 yeild* "委托"给*foo()
    var r3 = yield *foo(); 
    console.log( r3 ); 
} 
run( bar );

为什么用委托 yield 委托的主要目的是代码组织,以达到与普通函数调用的对称。

生成器并发

两个同时运行的进程可以合作式地交替运作,而很多时候这可以产生非常强大的异步表示。 回想一下之前给出的一个场景:其中两个不同并发 Ajax 响应处理函数需要彼此协调,以确保数据交流不会出现竞态条件。我们把响应插入到 res 数组中,就像这样:

function response(data) { 
    if (data.url == "http://some.url.1") { 
        res[0] = data; 
    } 
    else if (data.url == "http://some.url.2") { 
        res[1] = data; 
    } 
}

但是这种场景下如何使用多个并发生成器呢?

// request(..)是一个支持Promise of Ajax工具
var res = []; 
function *reqData(url) { 
    res.push( 
        yield request( url ) 
    ); 
}

形实转换程序

你用一个函数定义封装函数调用,包括需要的任何参数,来定义这个调用的执行,那么这个封装函数就是一个形实转换程序。之后在执行这个 thunk 时,最终就是调用了原始的函数。

function foo(x,y,cb) { 
    setTimeout( function(){ 
        cb( x + y ); 
    }, 1000 ); 
} 
function fooThunk(cb) { 
    foo( 3, 4, cb ); 
} 
// 将来
fooThunk( function(sum){ 
    console.log( sum ); // 7 
} );

ES6之前的生成器

function foo(url) { 
    // .. 
    // 构造并返回一个迭代器
    return { 
        next: function(v) { 
        // .. 
        }, 
        throw: function(e) { 
            // .. 
        } 
    }; 
}

var it = foo( "http://some.url.1" );

生成器小结

生成器为异步代码保持了顺序、同步、阻塞的代码模式,这使得大脑可以更自然地追踪代码,解决了基于回调的异步的两个关键缺陷之一。

原文地址

墨渊书肆/你不知道的JS(中):Promise与生成器

你不知道的JS(中):强制类型转换与异步基础

你不知道的JS(中):强制类型转换与异步基础

本文是《你不知道的JavaScript(中卷)》的阅读笔记,第二部分:强制类型转换与异步基础。 供自己以后查漏补缺,也欢迎同道朋友交流学习。

强制类型转换

值类型转换

将值从一种类型转换为另一种类型通常称为类型转换(type casting),这是显式的情况;隐式的情况称为强制类型转换(coercion)。

var a = 42;
var b = a + ""; // 隐式强制类型转换
var c = String( a ); // 显式强制类型转换

抽象值操作

ToString 基本类型值的字符串化规则为:null转换为"null",undefined转换为"undefined",true转换为 "true"。数字的字符串化则遵循通用规则,不过那些极小和极大的数字使用指数形式:

// 1.07 连续乘以七个 1000
var a = 1.07 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000;
// 七个1000一共21位数字
a.toString(); // "1.07e21"

JSON字符串化 工具函数 JSON.stringify 在将 JSON 对象序列化为字符串时也用到了 ToString。但JSON.stringify(..) 在对象中遇到 undefined、function 和 symbol 时会自动将其忽略,在数组中则会返回 null(以保证单元位置不变)。

JSON.stringify(undefined); // undefined
JSON.stringify(function(){}); // undefined
JSON.stringify([1,undefined,function(){},4]); // "[1,null,null,4]"
JSON.stringify({ a:2, b:function(){} }); // "{"a":2}"

ToNumber 其中 true 转换为 1,false 转换为 0。undefined 转换为 NaN,null 转换为 0。

ToBoolean JS中的值可以分为俩类:

  1. 可以被强制类型转换为false的值
  2. 其他

以下是假值,假值的布尔强制类型转换结果为false:

  • undefined
  • null
  • false
  • +0、-0和NaN
  • ""

假值对象是真值

var a = new Boolean( false );
var b = new Number( 0 );
var c = new String( "" );

Boolean( a && b && c ); // true

真值:假值列表之外的就是真值

var a = "false";
var b = "0";
var c = "''";
Boolean( a && b && c ); // true

var a = []; // 空数组——是真值还是假值?
var b = {}; // 空对象——是真值还是假值?
var c = function(){}; // 空函数——是真值还是假值?
Boolean( a && b && c ); // true

显式强制类型转换

日期显式转换为数字

var d = new Date( "Mon, 18 Aug 2014 08:53:06 CDT" );
+d; // 1408369986000

奇特的~运算符 ~,它首先将值强制类型转换为 32 位数字,然后执行字位操作“非”(对每一个字位进行反转)。 ~ 返回 2 的补码

~42; // -(42+1) ==> -43

~ 的神奇之处在于进行检查字符串中是否有包含指定的字符串:

var a = "Hello World";
~a.indexOf( "lo" ); // -4 <-- 真值!
if (~a.indexOf( "lo" )) { // true
 // 找到匹配!
}
~a.indexOf( "ol" ); // 0 <-- 假值!
!~a.indexOf( "ol" ); // true
if (!~a.indexOf( "ol" )) { // true
 // 没有找到匹配!
}

显式解析数字字符串 解析字符串中的数字和将字符串强制类型转换为数字的返回结果都是数字。但解析和转换两者之间还是有明显的差别。

var a = "42";
var b = "42px";
Number( a ); // 42
parseInt( a ); // 42
Number( b ); // NaN
parseInt( b ); // 42

解析允许字符串中含有非数字字符,解析按从左到右的顺序,如果遇到非数字字符就停止。而转换不允许出现非数字字符,否则会失败bing返回 NaN。

解析非字符串

parseInt( 1/0, 19 ); // 18

很多人想当然地以为“如果第一个参数值为 Infinity,解析结果也应该是 Infinity”,返回 18 也太无厘头了。实际的 JavaScript 代码中不会用到基数 19,它的有效数字字符范围是 0-9 和 a-i(区分大小写)。parseInt(1/0, 19) 实际上是 parseInt("Infinity", 19)。第一个字符是 "I",以 19 为基数时值为 18。第二个字符 "n" 不是一个有效的数字字符,解析到此为止。 此外还有一些看起来奇怪但实际上解释得通的例子:

parseInt( 0.000008 ); // 0 ("0" 来自于 "0.000008")
parseInt( 0.0000008 ); // 8 ("8" 来自于 "8e-7")
parseInt( false, 16 ); // 250 ("fa" 来自于 "false")
parseInt( parseInt, 16 ); // 15 ("f" 来自于 "function..")
parseInt( "0x10" ); // 16
parseInt( "103", 2 ); // 2

显式转换为布尔值 显式强制类型转换为布尔值最常用的方法是!!。

隐式强制类型转换

字符串和数字之间的隐式强制类型转换 通过+运算符进行字符串拼接

var a = "42";
var b = "0";
var c = 42;
var d = 0;
a + b; // "420"
c + d; // 42

因为数组的valueOf() 操作无法得到简单基本类型值,于是它转而调用 toString()。因此下面例子中的两个数组变成了 "1,2" 和 "3,4"。+ 将它们拼接后返回 "1,23,4"。

var a = [1,2];
var b = [3,4];
a + b; // "1,23,4"

a + ""(隐式)和 String(a)(显式)之间有一个细微的差别需要注意。根据ToPrimitive 抽象操作规则,a + "" 会对 a 调用 valueOf() 方法,然后通过 ToString 抽象操作将返回值转换为字符串。而 String(a) 则是直接调用 ToString()。

var a = {
    valueOf: function() { return 42; },
    toString: function() { return 4; }
};
a + ""; // "42"
String( a ); // "4"

再来看看从字符串强制类型转换为数字的情况。- 是数字减法运算符,因此 a - 0 会将 a 强制类型转换为数字。

var a = "3.14";
var b = a - 0;
b; // 3.14

隐式强制类型转换为布尔值 相对布尔值,数字和字符串操作中的隐式强制类型转换还算比较明显。下面的情况会发生布尔值隐式强制类型转换。 (1) if (..) 语句中的条件判断表达式。 (2) for ( .. ; .. ; .. ) 语句中的条件判断表达式(第二个)。 (3) while (..) 和 do..while(..) 循环中的条件判断表达式。 (4) ? : 中的条件判断表达式。 (5) 逻辑运算符 ||(逻辑或)和 &&(逻辑与)左边的操作数(作为条件判断表达式)。

|| 和 && && 和 || 运算符的返回值并不一定是布尔类型,而是两个操作数其中一个的值。

var a = 42;
var b = "abc";
var c = null;

a || b; // 42 
a && b; // "abc"

c || b; // "abc" 
c && b; // null

|| 和 && 首先会对第一个操作数(a 和 c)执行条件判断,如果其不是布尔值(如上例)就先进行 ToBoolean 强制类型转换,然后再执行条件判断。 对于 || 来说,如果条件判断结果为 true 就返回第一个操作数(a 和 c)的值,如果为false 就返回第二个操作数(b)的值。 && 则相反,如果条件判断结果为 true 就返回第二个操作数(b)的值,如果为 false 就返回第一个操作数(a 和 c)的值。

符号的强制类型转换 ES6 中引入了符号类型,它的强制类型转换有一个坑,在这里有必要提一下。ES6 允许从符号到字符串的显式强制类型转换,然而隐式强制类型转换会产生错误:

var s1 = Symbol( "cool" );
String( s1 ); // "Symbol(cool)"
var s2 = Symbol( "not cool" );
s2 + ""; // TypeError

宽松相等和严格相等

常见的误区是“== 检查值是否相等,=== 检查值和类型是否相等”。听起来蛮有道理,然而 还不够准确。很多 JavaScript 的书籍和博客也是这样来解释的,但是很遗憾他们都错了。

正确的解释是:“== 允许在相等比较中进行强制类型转换,而 === 不允许。”

抽象相等 == 在比较两个不同类型的值时会发生隐式强制类型转换,会将其中之一或两者都转换为相同的类型后再进行比较。

  • 字符串和数字之间的相等比较: (1) 如果 Type(x) 是数字,Type(y) 是字符串,则返回 x == ToNumber(y) 的结果。 (2) 如果 Type(x) 是字符串,Type(y) 是数字,则返回 ToNumber(x) == y 的结果
var a = 42;
var b = "42";
a === b; // false
a == b; // true
  • 其他类型和布尔类型之间的相等比较: (1) 如果 Type(x) 是布尔类型,则返回 ToNumber(x) == y 的结果; (2) 如果 Type(y) 是布尔类型,则返回 x == ToNumber(y) 的结果。
var a = "42";
var b = true;
a == b; // false
  • null 和 undefined 之间的相等比较 (1) 如果 x 为 null,y 为 undefined,则结果为 true。 (2) 如果 x 为 undefined,y 为 null,则结果为 true。
var a = null;
var b;
a == b; // true
a == null; // true
b == null; // true

a == false; // false
b == false; // false
a == ""; // false
b == ""; // false
a == 0; // false
b == 0; // false
  • 对象 and 非对象之间的相等比较 (1) 如果 Type(x) 是字符串或数字,Type(y) 是对象,则返回 x == ToPrimitive(y) 的结果; (2) 如果 Type(x) 是对象,Type(y) 是字符串或数字,则返回 ToPromitive(x) == y 的结果。
var a = 42;
var b = [ 42 ];
a == b; // true

比较少见的情况

  1. 返回其他数字:
Number.prototype.valueOf = function() {
 return 3;
};
new Number( 2 ) == 3; // true
  1. 假值的相等比较:
"0" == null; // false
"0" == undefined; // false
"0" == false; // true
"0" == NaN; // false
"0" == 0; // true
"0" == ""; // false

false == null; // false
false == undefined; // false
false == NaN; // false
false == 0; // true
false == ""; // true
false == []; // true
false == {}; // false

"" == null; // false
"" == undefined; // false
"" == NaN; // false
"" == 0; // true
"" == []; // true
"" == {}; // false

0 == null; // false
0 == undefined; // false
0 == NaN; // false
0 == []; // true
0 == {}; // false
  1. 极端情况

根据 ToBoolean 规则,它会进行布尔值的显式强制类型转换。所以 [] == ![] 变成了 [] == false。前面介绍 of false == [],最后的结果就顺理成章了

[] == ![] // true

安全运用隐式强制类型转换

  • 如果两边的值中有 true 或者 false,千万不要使用 ==。
  • 如果两边的值中有 []、"" 或者 0,尽量不要使用 ==。 这时最好用 === 来避免不经意的强制类型转换。这两个原则可以让我们避开几乎所有强制类型转换的坑

抽象关系比较

a < b 中涉及的隐式强制类型转换: 比较双方首先调用 ToPrimitive,如果结果出现非字符串,就根据 ToNumber 规则将双方强制类型转换为数字来进行比较。

var a = [ 42 ];
var b = [ "43" ];
a < b; // true
b < a; // false

如果比较双方都是字符串,则按字母顺序来进行比较:

var a = [ "42" ];
var b = [ "043" ];
a < b; // false

var a = [ 4, 2 ];
var b = [ 0, 4, 3 ];
a < b; // false

还有个特殊情况:

var a = { b: 42 };
var b = { b: 43 };
a < b; // false
a == b; // false
a > b; // false
a <= b; // true
a >= b; // true

因为 a 是 [object Object],b 也是 [object Object],所以按照字母顺序a < b 并不成立。

为什么 a == b 的结果不是 true ?它们的字符串值相同(同为 "[object Object]"),按道理应该相等才对?实际上不是这样,你可以回忆一下前面讲过的对象的相等比较。

但是 if a < b 和 a == b 结果为 false,为什么 a <= b 和 a >= b 的结果会是 true 呢?因为根据规范 a <= b 被处理为 b < a,然后将结果反转。因为 b < a 的结果是 false,所以 a <= b 的结果是 true。

这可能与我们设想的大相径庭,即 <= 应该是“小于或者等于”。实际上 JavaScript 中 <= 是“不大于”的意思(即 !(a > b),处理为 !(b < a))。同理 a >= b 处理为 b <= a。

强制类型转换小结

JS 的数据类型之间的转换,即强制类型转换:包括显式和隐式。

显式强制类型转换明确告诉我们哪里发生了类型转换,有助于提高代码可读性和可维护性。

隐式强制类型转换则没有那么明显,是其他操作的副作用。实际上隐式强制类型转换也有助于提高代码的可读性。在处理强制类型转换的时候要十分小心,尤其是隐式强制类型转换。

语法

语句和表达式

JS中语句相当于句子,表达式相当于短语,运算符则相当于标点符号和连接词。

语句的结果值 代码块的结果值就如同一个隐式的返回,即返回最后一个语句的结果值。

var b;
if (true) {
    b = 4 + 38;
}

表达式的副作用 函数调用的副作用:

function foo() {
 a = a + 1;
}
var a = 1;
foo(); // 结果值:undefined。副作用:a的值被改变

= 赋值运算符:

var a;
a = 42; // 42
a; // 42

运算符优先级

&& 先执行,然后是 ||:

(false && true) || true; // true
false && (true || true); // false

false && true || true; // true

那执行顺序是否就一定是从左到右呢?不妨将运算符颠倒一下看看:

true || false && false; // true
(true || false) && false; // false
true || (false && false); // true

这说明 && 运算符先于 || 执行,而且执行顺序并非我们所设想的从左到右。原因就在于运算符优先级。

短路 对于 && 和 || 来说,如果从左边的操作数能够得出结果,就可以忽略右边的操作数。我们将这种现象称为“短路”(即执行最短路径)。

更强的绑定 因为 && 运算符的优先级高于 ||,而 || 的优先级又高于 ? :。

a && b || c ? c || b ? a : c && b : a
// 等同于
(a && b || c) ? (c || b) ? a : (c && b) : a

关联 一般多个&&和||执行顺序是从左到右,也被称为左关联,但? : 是右关联

a ? b : c ? d : e;
// 等同于
a ? b : (c ? d : e)

另一个右关联组合的例子是 = 运算符:

var a, b, c;
a = b = c = 42;
// 等同于
a = (b = (c = 42))

自动分号

JS会自动为代码行补上缺失的分号,即自动分号插入(Automatic Semicolon Insertion,ASI)。

错误

JS不仅有各种类型的运行时错误(TypeError、ReferenceError、SyntaxError 等),它的语法中也定义了一些编译时错误。

提前使用变量 ES6 规范定义了一个新概念,叫作 TDZ(Temporal Dead Zone,暂时性死区)。TDZ 指的是由于代码中的变量还没有初始化而不能被引用的情况。

{
    a = 2; // ReferenceError!
    let a; 
}

函数参数

在 ES6 中,如果参数被省略或者值为 undefined,则取该参数的默认值:

function foo( a = 42, b = a + 1 ) {
    console.log( a, b );
}
foo(); // 42 43
foo( undefined ); // 42 43
foo( 5 ); // 5 6
foo( void 0, 7 ); // 42 7
foo( null ); // null 1

try finally

finally 中的代码总是会在 try 之后执行,如果有 catch 的话则在 catch 之后执行。也可以将 finally 中的代码看作一个回调函数,即无论出现什么情况最后一定会被调用。

function foo() {
    try {
        return 42;
    } 
    finally {
        console.log( "Hello" );
    }
    console.log( "never runs" );
}
console.log( foo() );
// Hello
// 42

这里 return 42 先执行,并将 foo() 函数的返回值设置为 42。然后 try 执行完毕,接着执行 finally。最后 foo() 函数执行完毕,console.log(..) 显示返回值。 try 中的 throw 也是如此:

function foo() {
    try {
        throw 42; 
    }
    finally {
        console.log( "Hello" );
    }
    console.log( "never runs" );
}
console.log( foo() );
// Hello
// Uncaught Exception: 42

switch

switch,可以把它看作 if..else if..else.. 的简化版本:

switch (a) {
    case 2:
    // 执行一些代码
    break;
    case 42:
    // 执行另外一些代码
    break;
    default:
    // 执行缺省代码
}

a 和 case 表达式的匹配算法与 === 相同。通常case语句中switch都是简单值,但有时可能会需要通过强制类型转换来进行相等比较,这时就需要做一些特殊处理:

var a = "42";
switch (true) {
    case a == 10:
        console.log( "10 or '10'" );
        break;
    case a == 42;
        console.log( "42 or '42'" );
        break;
    default:
        // 永远执行不到这里
}
// 42 or '42'

尽管可以使用 ==,但 switch 中 true and true 之间仍然是严格相等比较。即 if case 表达式的结果为真值,但不是严格意义上的 true,则条件不成立。

var a = "hello world";
var b = 10;
switch (true) {
    case (a || b == 10):
        // 永远执行不到这里
        break;
    default:
        console.log( "Oops" );
}
// Oops

最后,default 是可选的,并非必不可少。break 相关规则对 default 仍然适用:

var a = 10;
switch (a) {
    case 1:
    case 2:
        // 永远执行不到这里
    default:
        console.log( "default" );
    case 3:
        console.log( "3" );
        break;
    case 4:
        console.log( "4" );
}
// default
// 3

上例中的代码是这样执行的,首先遍历并找到所有匹配的 case,如果没有匹配则执行default 中的代码。因为其中没有 break,所以继续执行已经遍历过的 case 3 代码块,直到 break 为止。

语法小结

JS的语法规则之上是语义规则,也称上下文。 JS还详细定义了运算符的优先级和关联。

异步:现在与将来

程序中现在运行的部分和将来运行的部分之间的关系就是异步编程的核心。

分块的程序

可以把 JavaScript 程序写在单个 .js 文件中,但是这个程序几乎一定是由多个块构成的。这些块中只有一个是现在执行,其余的则会在将来执行。最常见的块单位是函数。 大多数 JS 新手程序员都会遇到的问题是:程序中将来执行的部分并不一定在现在运行的部分执行完之后就立即执行。 从现在到将来的“等待”,最简单的方法是使用一个通常称为回调函数的函数:

// ajax(..)是某个库中提供的某个Ajax函数
ajax( "http://some.url.1", function myCallbackFunction(data){
    console.log( data ); // 耶!这里得到了一些数据!
});

异步控制台 在某些条件下,某些浏览器的 console.log 并不会把传入的内容立即输出。出现这种情况的主要原因是,在许多程序(不只是 JS)中,I/O 是非常低速的阻塞部分。所以浏览器在后台异步处理控制台 I/O 能够提高性能,这时用户甚至可能根本意识不到其发生。

事件循环

所有这些环境都有一个共同“点”(thread,也指线程。),即它们都提供了一种机制来处理程序中多个块的执行,且执行每块时调用 JS 引擎,这种机制被称为事件循环。 先通过一段伪代码了解一下这个概念 :

// eventLoop是一个用作队列的数组
// (先进,先出)
var eventLoop = [ ];
var event;
// “永远”执行
while (true) {
    // 一次tick
    if (eventLoop.length > 0) {
        // 拿到队列中的下一个事件
        event = eventLoop.shift();
        // 现在,执行下一个事件
        try {
            event();
        } catch (err) {
            reportError(err);
        }
    }
}

可以看到,有一个用 while 循环实现的持续运行的循环,循环的每一轮称为一个 tick。对每个 tick 而言,如果在队列中有等待事件,那么就会从队列中摘下一个事件并执行。这些事件就是你的回调函数。

并行线程

术语“异步”和“并行”常常被混为一谈,但实际上它们的意义完全不同。记住,异步是关于现在和将来的时间间隙,而并行是关于能够同时发生的事情。 并行计算最常见的工具就是进程和线程. 进程和线程独立运行,并可能同时运行:在不同的处理器,甚至不同的计算机上,但多个线程能够共享单个进程的内存。

并发

两个或多个“进程”同时执行就出现了并发,不管组成它们的单个运算是否并行执行(在独立的处理器或处理器核心上同时运行)。可以把并发看作“进程”级(或者任务级)的并行,与运算级的并行(不同处理器上的线程)相对。

非交互 如果进程间没有相互影响的话,不确定性是完全可以接受的。

交互 并发的“进程”需要相互交流,通过作用域或 DOM 间接交互。正如前面介绍的,如果出现这样的交互,就需要对它们的交互进行协调以避免竞态的出现。

协作 还有一种并发合作方式,称为并发协作(cooperative concurrency)。这里的重点不再是通过共享作用域中的值进行交互。这里的目标是取到一个长期运行的“进程”,并将其分割成多个步骤或多批任务,使得其他并发“进程”有机会将自己的运算插入到事件循环队列中交替运行。

任务

在 ES6 中,有一个新的概念建立在事件循环队列之上,叫作任务队列(job queue)。对于任务队列最好的理解方式就是,它是挂在事件循环队列的每个 tick 之后的一个队列。在事件循环的每个 tick 中,可能出现的异步动作不会导致一个完整的新事件添加到事件循环队列中,而会在当前 tick 的任务队列末尾添加一个项目(一个任务)。

语句顺序

代码中语句的顺序和js引擎执行语句的顺序并不一定要一致。

异步小结

JS 程序总是至少分为两个块:第一块现在运行;下一块将来运行,以响应某个事件。尽管程序是一块一块执行的,但是所有这些块共享对程序作用域和状态的访问,所以对状态的修改都是在之前累积的修改之上进行的。 一旦有事件需要运行,事件循环就会运行,直到队列清空。事件循环的每一轮称为一个tick。用户交互、IO 和定时器会向事件队列中加入事件。

回调

到目前为止,回调是编写和处理 JavaScript 程序异步逻辑的最常用方式。确实,回调是这门语言中最基础的异步模式。

延续(continuation)

回调函数包裹或者说封装了程序的延续(continuation)。

// A 
setTimeout( function(){ 
    // C 
}, 1000 ); 
// B

执行 A,设定延时 1000 毫秒,然后执行 B,然后定时到时后执行C

顺序的大脑

执行与计划 我们的大脑可以看作类似于单线程运行的事件循环队列,就像 JavaScript 引擎那样。这个比喻看起来很贴切。但是,我们的分析还需要比这更加深入细致一些。显而易见的是,在我们如何计划各种任务和我们的大脑如何实际执行这些计划之间,还存在着很大的差别。

嵌套回调和链式回调

listen( "click", function handler(evt){ 
    setTimeout( function request(){ 
        ajax( "http://some.url.1", function response(text){ 
            if (text == "hello") { 
                handler(); 
            } 
            else if (text == "world") { 
                request(); 
            } 
        } ); 
    }, 500) ; 
} );

这种代码常常被称为回调地狱(callback hell),有时也被称为毁灭金字塔。 让我们不用嵌套再把前面的嵌套事件 / 超时 /Ajax 的例子重写一遍吧:

listen( "click", handler ); 
function handler() { 
    setTimeout( request, 500 ); 
} 
function request(){ 
    ajax( "http://some.url.1", response ); 
} 
function response(text){ 
    if (text == "hello") { 
        handler(); 
    } 
    else if (text == "world") { 
        request(); 
    } 
}

信任问题

// A 
ajax( "..", function(..){ 
    // C 
} ); 
// B

在 JS 主程序的直接控制之下。而 // C 会延迟到将来发生,并且是在第三方的控制下——在本例中就是函数 ajax。从根本上来说,这种控制的转移通常不会给程序带来很多问题。 但是,请不要被这个小概率迷惑而认为这种控制切换不是什么大问题。实际上,这是回调驱动设计最严重(也是最微妙)的问题。它以这样一个思路为中心:有时候 ajax 不是你编写的代码,也不在你的直接控制下。多数情况下,它是某个第三方提供的工具。 我们把这称为控制反转,也就是把自己程序一部分的执行控制交给某个第三方。在你的代码和第三方工具之间有一份并没有明确表达的契约。

省点回调

为了更优雅地处理错误,有些 API 设计提供了分离回调(一个用于成功通知,一个用于出错通知):

function success(data) { 
    console.log( data ); 
} 
function failure(err) { 
    console.error( err ); 
} 
ajax( "http://some.url.1", success, failure );

在这种设计下,API 的出错处理函数 failure() 常常是可选的,如果没有提供的话,就是假定这个错误可以吞掉。

回调小结

回调函数是 JavaScript 异步的基本单元。但是随着 JavaScript 越来越成熟,对于异步编程领域的发展,回调已经不够用了。

原文地址

墨渊书肆/你不知道的JS(中):强制类型转换与异步基础

你不知道的JS(中):类型与值

你不知道的JS(中):类型与值

本文是《你不知道的JavaScript(中卷)》的阅读笔记,第一部分:类型与值。 供自己以后查漏补缺,也欢迎同道朋友交流学习。

类型

对语言引擎和开发人员来说,类型是值的内部特征,它定义了值的行为,以使其区别于其他值。

内置类型

JavaScript 有七种内置类型:

  • 空值(null)
  • 未定义(undefined)
  • 布尔值( boolean)
  • 数字(number)
  • 字符串(string)
  • 对象(object)
  • 符号(symbol,ES6 中新增)

对于类型, we 一般使用typeof来判断,但有一些特殊情况无法准确判断,如下:

// null的类型不是null
typeof null === "object"; // true
(!a && typeof a === "object"); // null需要复合条件来判断

// function的类型不是object
typeof function a(){} === "function"; // true

// 数组也是object
typeof [1,2,3] === "object"; // true

值和类型

JS中的变量是没有类型的,只有值才有。JS不做“类型强制”;

undefined 和 undeclared 已在作用域中声明但还没有赋值的变量,是 undefined 的。相反,还没有在作用域中声明过的变量,是 undeclared 的。

内置类型小结

JS中有其中内置类型:null、undefined、boolean、number、string、object和symbol,可以使用typeof运算符来查看。但对于null、function和数组要特殊处理。

变量没有类型,但它们持有的值 have 类型。类型定义了值的行为特征。 在 JS 中它们是两码事,undefined 是值的一种,undeclared 则表示变量还没有被声明过。

数组(array)、字符串(string)和数字(number)是一个程序最基本的组成部分。

数组

与其他强类型语言不同,在JS中数组可以容纳任何类型的值,可以是字符串、数字、对象,甚至是其他数组(多维数组就是这么实现的):

var a = [1, '2', [3]];

a.length; // 3
a[0] === 1; // true
a[2][0] === 3; // true

数组声明可以不预先设定大小,但使用delete删除时要注意length不会被改变。还有在创建稀疏数组时,长度会变化,没有设置的位置的值为undefined。

var a = [];
a[0] = 1;
a[2] = 3;

a[1]; // undefined
a.length; // 3

同时数组也是对象,可以使用字符串的key去获取属性

var a = [0, 1, 2];
a['2']; // 2

但也需要注意如果把字符串的数字作为索引赋值处理,会被强制转换为十进制的数字,且长度也会改变:

var a = [];
a['13'] = 22;
a.length; // 14

类数组 有时需要将类数组转换为真正的数组,一般通过数组工具函数(如indexOf、concat、forEach等)来实现; 还有函数的参数arguments也可以进行数组转化:

function foo() {
 var arr = Array.prototype.slice.call( arguments );
 arr.push( "bam" );
 console.log( arr );
}
foo( "bar", "baz" ); // ["bar","baz","bam"]

ES6也可以使用Array.from去处理:

var arr = Array.from( arguments );

字符串

字符串和数组的确很相似,它们都是类数组,都有length属性以及indexOf和concat方法。 但字符串是不可变的,数组是可变的。

数字

JS只有一种数值类型:number,包括“整数”和带小数的十进制数。JS没有真正意义上的整数。JS中的数字类型是基于IEEE754标准来实现的,该标准通常也被称为“浮点数”。JS使用的是“双精度”格式。 特别大或者特别小的数字默认使用指数格式显示:

var a = 5E10;
a; // 50000000000
a.toExponential(); // "5e+10"
var b = a * a;
b; // 2.5e+21
var c = 1 / a;
c; // 2e-11

较小的数值 二进制浮点数最大的问题就是较小的数值运算不精确:

0.1+0.2 === 0.3; // false
// 因为相加等于0.30000000000000004

如何来判断相等呢?最常见的方法是设置一个误差范围,通常为称为“机器精度”。JS是2^-52 (2.220446049250313e-16)。 在ES6中使用Number.EPSILON,ES6之前使用polyfill:

if (!Number.EPSILON) {
 Number.EPSILON = Math.pow(2,-52);
}

使用 Number.EPSILON 来比较两个数字是否相等

function numbersCloseEnoughToEqual(n1,n2) {
 return Math.abs( n1 - n2 ) < Number.EPSILON;
}
var a = 0.1 + 0.2;
var b = 0.3;
numbersCloseEnoughToEqual( a, b ); // true
numbersCloseEnoughToEqual( 0.0000001, 0.0000002 ); // false

整数的安全范围:

数字的呈现方式决定了“整数”的安全值范围远远小于 Number.MAX_VALUE。 能够被“安全”呈现的最大整数是 2^53 - 1,即 9007199254740991,在 ES6 中 被定义为Number.MAX_SAFE_INTEGER。最小整数是 -9007199254740991,在 ES6 中被定义为Number.MIN_SAFE_INTEGER。

特殊数值

不是值的值:

  • null指空值
  • undefined指没有值

undefined 在非严格模式可以给undefined赋值:

function foo() {
    undefined = 2; // very bad
}

在非严格和严格模式可以把undefined命名变量:

function foo() {
    "use strict";
    var undefined = 2; // very bad
    console.log(undefined); // 2
}
foo();

void运算符 表达式void xxx没有返回值,因此返回的结果是undefined。

特殊的数字 NaN:不是一个数字。

var a = 2 / 'foo'; // NaN
typeof a === 'number'; // true

NaN 是一个“警戒值”,用于指出数字类型中的错误情况,即“执行数学运算没有成功,这是失败后返回的结果”。 NaN ≠ NaN为true,它和自己不相等,是唯一一个非自反。

var a = 2 / "foo";
a == NaN; // false
a === NaN; // false

如果要判断是否是NaN,需要使用全局工具函数isNaN来判断:

var a = 2 / "foo";
isNaN(a); // true

但isNaN有个缺陷,就是检查参数是否不是NaN,也不是数字:

isNaN('foo'); // true

很明显‘foo’不是数字也不是NaN,这是一个很久的bug。 ES6中我们可以使用Number.isNaN,ES6之前可以使用polyfill:

// 方法1:
if (!Number.isNaN) {
    Number.isNaN = function (n) {
        return typeof n === 'number' && window.isNaN(n)
    }
}

// 方法2:
if (!Number.isNaN) {
    Number.isNaN = function (n) {
        return n !== n
    }
}

无穷数 正无穷: Infinity 负无穷:-Infinity

零值 JS有0 and -0,-0也是有意义的,对负数的乘法和除法可以出现-0,加减法不行;-0的判断:

function isNegZero(n) {
    n = Number(n);
    return (n === 0) && (1/n === -Infinity)
}

isNegZero( -0 ); // true
isNegZero( 0 / -3 ); // true
isNegZero( 0 ); // false

特殊等式 ES6中新加入一个工具方法Object.is来判断俩个值是否绝对相等。

Object.is(2 / 'foo', NaN); // true
Object.is(-3*0, -0); // true
Object.is(-3*0, 00); // false

polyfill:

if (!Object.is) {
    Object.is = function(v1, v2) {
        // 判断是否是-0
        if (v1 === 0 && v2 === 0) {
            return 1 / v1 === 1 / v2;
        }
        // 判断是否是NaN
        if (v1 !== v1) {
            return v2 !== v2;
        }
        // 其他情况
        return v1 === v2;
    };
}

值和引用

JS引用指向的是值,根据值得类型来决定。基本类型是通过值复制的方式来赋值/传递,包括null、undefined、字符串、数字、布尔和ES6中的symbol。复合值(对象:数组和封装对象、函数)则是通过引用复制的方式来赋值/传递。

由于引用指向的是值本身而非变量,所以一个引用无法更改另一个引用的指向.

var a = [1,2,3];
var b = a;
a; // [1,2,3]
b; // [1,2,3]
// 然后
b = [4,5,6];
a; // [1,2,3]
b; // [4,5,6]

函数参数就经常让人产生这样的困惑:

function foo(x) {
    x.push( 4 );
    x; // [1,2,3,4]
    // 然后
    x = [4,5,6];
    x.push( 7 );
    x; // [4,5,6,7]
}
var a = [1,2,3];
foo( a );
a; // 是[1,2,3,4],不是[4,5,6,7]

我们向函数传递 a 的时候,实际是将引用 a 的一个复本赋值给 x,而 a 仍然指向 [1,2,3]。在函数中我们可以通过引用 x 来更改数组的值(push(4) 之后变为 [1,2,3,4])。但 x = [4,5,6] 并不影响 a 的指向,所以 a 仍然指向 [1,2,3,4]。 我们不能通过引用 x 来更改引用 a 的指向,只能更改 a 和 x 共同指向的值。 如果要将 a 的值变为 [4,5,6,7],必须更改 x 指向的数组,而不是为 x 赋值一个新的数组。

function foo(x) {
    x.push( 4 );
    x; // [1,2,3,4]
    // 然后
    x.length = 0; // 清空数组
    x.push( 4, 5, 6, 7 );
    x; // [4,5,6,7]
}
var a = [1,2,3];
foo( a );
a; // 是[4,5,6,7],不是[1,2,3,4]

如果通过值复制的方式来传递复合值(如数组),就需要为其创建一个复本,这样传递的就不再是原始值。例如:

foo( a.slice() )

值小结

JavaScript 中的数字包括“整数”和“浮点型”。 null 类型只有一个值 null,undefined 类型也只有一个值 undefined。所有变量在赋值之前默认值都是 undefined。void 运算符返回 undefined。 数字类型有几个特殊值,包括NaN(意指“not a number”,更确切地说是“invalid number”)、+Infinity、-Infinity 和 -0。

原生函数

JS的内建函数,也叫原生函数。常用的原生函数有:

  • String()
  • Number()
  • Boolean()
  • Array()
  • Object()
  • Function()
  • RegExp()
  • Date()
  • Error()
  • Symbol()——ES6 中新加入的!

原生函数可以被当作构造函数来使用,但其构造出来的对象可能会和我们设想的有所出入:

var a = new String( "abc" );
typeof a; // 是"object",不是"String"
a instanceof String; // true
Object.prototype.toString.call( a ); // "[object String]"

内部属性[[Class]]

所有 typeof 返回值为 "object" 的对象(如数组)都包含一个内部属性 [[Class]]。这个属性无法直接访问,一般通过 Object.prototype.toString(..) 来查看。例如:

Object.prototype.toString.call( [1,2,3] );
// "[object Array]"
Object.prototype.toString.call( /regex-literal/i );
// "[object RegExp]"

封装对象包装

使用封装对象时有些地方需要特别注意。比如 Boolean:

var a = new Boolean( false );
if (!a) {
    console.log( "Oops" ); // 执行不到这里
}

拆分

如果想要得到封装对象中的基本类型值,可以使用 valueOf() 函数:

var a = new String( "abc" );
var b = new Number( 42 );
var c = new Boolean( true );
a.valueOf(); // "abc"
b.valueOf(); // 42
c.valueOf(); // true

原生函数作为构造函

Array

var a = new Array( 1, 2, 3 );
a; // [1, 2, 3]
var b = [1, 2, 3];
b; // [1, 2, 3]

Array 构造函数只带一个数字参数的时候,该参数会被作为数组的预设长度(length),而非只充当数组中的一个元素。这实非明智之举:一是容易忘记,二是容易出错。

var a = new Array( 3 );
a.length; // 3
a;

Object/Function/RegExp 万不得已,不要使用这些构造函数。在实际情况中没有必要使用 new Object() 来创建对象,因为这样就无法像常量形式那样一次设定多个属性,而必须逐一设定。

Date和Error 相较于其他原生构造函数,Date(..) 和 Error(..) 的用处要大很多,因为没有对应的常量形式来作为它们的替代。 创建日期对象必须使用 new Date()。Date可以带参数,用来指定日期和时间,而不带参数的话则使用当前的日期和时间。Date主要用来获得当前的 Unix 时间戳(从 1970 年 1 月 1 日开始计算,以秒为单位)。该值可以通过日期对象中的 getTime() 来获得。 从 ES5 开始引入了一个更简单的方法,即Date.now()。对 ES5 之前我们可以使用polyfill:

if (!Date.now) {
     Date.now = function(){
         return (new Date()).getTime();
     };
}

构造函数 Error带不带 new 关键字都可。错误对象通常与 throw 一起使用:

function foo(x) {
    if (!x) {
        throw new Error( "x wasn’t provided" );
    }
    // ... 
}

Symbol ES6 中新加入了一个基本数据类型 ——符号(Symbol)。符号是具有唯一性的特殊值(并非绝对),用它来命名对象属性不容易导致重名。该类型的引入主要源于 ES6 的一些特殊构造,此外符号也可以自行定义。 ES6中有一些预定义符号,以Symbol的静态属性形式出现,如 Symbol.create、Symbol.iterator 等,可以这样来使用:

obj[Symbol.iterator] = function(){ /*..*/ };

我们可以使用Symbol原生构造函数来自定义符号。但它比较特殊,不能new关键字,否则会出错:

var mysym = Symbol( "my own symbol" );
mysym; // Symbol(my own symbol)
mysym.toString(); // "Symbol(my own symbol)"
typeof mysym; // "symbol"
var a = { };
a[mysym] = "foobar";
Object.getOwnPropertySymbols( a );
// [ Symbol(my own symbol) ]

原生原型

原生构造函数有自己的 .prototype 对象,如 Array.prototype、String.prototype 等。这些对象包含其对应子类型所特有的行为特征。

  • String#indexOf 在字符串中找到指定子字符串的位置。
  • String#charAt 获得字符串指定位置上的字符。
  • String#substr、String#substring 和 String#slice 获得字符串的指定部分。
  • String#toUpperCase 和 String#toLowerCase 将字符串转换为大写 or 小写。
  • String#trim 去掉字符串前后的空格,返回新的字符串。以上方法并不改变原字符串的值,而是返回一个新字符串。

原生函数小结

JavaScript 为基本数据类型值提供了封装对象,称为原生函数(如 String、Number、Boolean等)。它们为基本数据类型值提供了该子类型所特有的方法和属性。

原文地址

墨渊书肆/你不知道的JS(中):类型与值

2025–2030 前端登录技术展望:Passkey 之后是什么?

上一章我们聊了“密码正在死亡”(2020–2026):从 MFA/TOTP 的普及,到 WebAuthn/FIDO2 的基础,再到 2026 年 Passkey 真正爆发的临界点。密码体系的崩塌已成定局,但前端登录技术不会止步于“无密码”——它将进一步融合隐私、去中心化、AI 和零信任,演变成一个更智能、更安全的“身份意图”系统。

这一篇(系列终章),我们展望 2025–2030 年的前端登录趋势。作为 2026 年 2 月的现在,Passkey 已从“可选”转为“默认”,但未来 5 年将面临采用率瓶颈、兼容性挑战和新兴范式冲击。我们将讨论 Passkey 的终局可能性、Web3 DID 的潜力、AI Agent 身份的出现、隐私计算 + 零信任的融合,以及可能的“终局猜想”。

1. Passkey 是否真的会取代密码?(2026–2028 的关键期)

到 2026 年初(当前),Passkey 的全球采用率已达 70% 以上(FIDO Alliance 数据),但距离“完全取代”还有三大障碍:

  • 采用率天花板:低端设备(功能机、旧 Android/iOS)、新兴市场(非洲/东南亚)的兼容性问题。预计 2027 年覆盖率达 90%,但 10% 的“长尾”用户仍需 fallback 到密码 + TOTP。
  • 用户教育与信任成本:许多用户仍习惯“输入密码”,Passkey 的“生物 + 设备”模式需教育(如“你的指纹就是钥匙”)。2026–2027 年,巨头(如 Google/Apple)将通过系统级弹窗 + 教程推动,但隐私担忧(“我的生物数据被存云端?”)会引发反弹。
  • 企业 vs 消费者分化:ToC(如电商/社交)已 80% 转向 Passkey;ToB(如银行/企业内网)更保守,预计 2028 年才达 70%(需合规审计)。

前端变化(2026–2028):

  • 混合模式主流:前端库(如 @simplewebauthn、Clerk、Auth0)内置“Passkey first + fallback”逻辑。
  • 恢复机制标准化:邮箱魔法链接 + 恢复码 + 多设备绑定(FIDO 跨平台规范迭代)。
  • 实际难度:接入 Passkey 成本已降到“几行代码”,但测试跨设备/跨平台(iOS + Android + Windows)仍需 1–2 周开发时间。

预测:到 2028 年,Passkey 将取代 85% 的密码登录,但不会“完全死亡”——高安全场景(如政府/医疗)会保留“密码 + Passkey”双因素。

2. Web3 与去中心化身份(DID)的融合(2026–2030)

Web3 的 DID(Decentralized Identifier,W3C 标准)从 2023–2025 年的“概念”转为 2026 年后的“实用”。核心:用户自持身份(区块链 + 钱包),无需中心化服务器。

前端角色演进:

  • SIWE(Sign-In with Ethereum)扩展:2026 年起,Wallet 登录(如 MetaMask、Rainbow)成为标配。流程:前端调用 ethereum.request({ method: 'personal_sign' }) → 用户签名消息 → 后端验证 → 发 session token。
  • DID + Passkey 混合:2027–2028 年,FIDO 与 DID 融合(如 DID:Web + WebAuthn)。用户用钱包生成 Passkey,跨 DApp 无缝登录。
  • 代表案例:DeFi / NFT 平台(如 OpenSea 2.0、Uniswap)已用 Wallet 取代传统登录;社交(如 Lens Protocol)用 DID 实现“永久身份”。

痛点与前端挑战:

  • 用户门槛:Gas fee + 钱包管理仍高,2028 年后“零 Gas” L2 链(如 zk-rollups)普及。
  • 安全性:私钥丢失 = 身份永失,前端需集成“社交恢复”(多签名守护者)。
  • 兼容 Web2:OIDC + DID 桥接库(如 did-session)让传统前端无缝接入。

预测:到 2030 年,30% 的前端应用(尤其是 ToC / 游戏 / 社交)会支持 DID 作为“可选无密码”方案,但不会取代 Passkey(后者更易用)。

3. AI Agent 时代的身份认证(2027–2030)

AI Agent(自主代理,如 Auto-GPT 衍生品)从 2025 年实验转为 2027 年主流,用户会说:“帮我登录银行,查余额”。

前端 / 身份系统的变化:

  • Agent 代表用户登录:Agent 用用户授权的“委托凭证”(OAuth 2.1 + DPoP,Device-Bound Proof of Possession)访问 API。前端需支持“意图确认” UI(如“允许 Agent X 代表你登录?” + 生物验证)。
  • 零交互登录:Agent 预先获取 refresh token,前端用 WebAuthn 的“驻留密钥”自动认证。
  • 风控升级:AI 检测异常(如“Agent 行为不像用户”),前端集成浏览器指纹 + 行为分析(fingerprintjs + ML 模型)。

挑战:

  • 隐私与滥用:Agent 泄露 token 风险高,2028 年起“零知识证明”(ZKP)普及:证明“我有权限”而不露 token。
  • 前端框架适配:React/Vue/Next.js 将内置 Agent SDK(如 OpenAI Auth Kit),简化“意图-based 登录”。

预测:到 2030 年,50% 的高频登录(如电商/支付)将由 Agent 代理,但人类确认仍必备(法规要求)。

4. 隐私计算 + 零信任在前端登录中的潜在应用(2026–2030)

零信任(Zero Trust)从企业扩展到消费者:假设所有请求都可疑,前端需实时证明“可信”。

关键技术:

  • 隐私计算:前端用 Homomorphic Encryption 或 MPC(Multi-Party Computation)加密凭证,只在服务端解密部分信息。2027 年起,库如 tfhe.js 让前端“零泄露”处理 Passkey。
  • 零信任前端:每个请求带“证明”(如 DPoP token + 设备 attestation)。浏览器原生支持(如 Chrome 的 Device Bound Session Credentials,DBSC)。
  • 应用:跨境电商 / 医疗登录:前端不传明文生物数据,只传“验证通过”的证明。

前端影响:

  • 复杂度升:需集成 crypto 库,但框架(如 Next.js Auth)会抽象。
  • 性能优化:Wasm + WebGPU 加速计算。

预测:到 2030 年,零信任将成为高安全前端的默认范式,隐私计算覆盖 40% 的登录场景。

5. 可能的终局猜想:以“意图 + 上下文”为主的身份系统

2030 年的前端登录,可能不再是“输入/验证凭证”,而是“意图确认”:

  • 终局形态:设备/生物 + AI 上下文推断(“你在家用常用设备?直接通过”) + ZKP 证明。
  • 密码的最后一搏:前端加密密码(Argon2 + PAKE)仍有小众存活,但占比 <5%。
  • 整体趋势:从“状态管理”到“意图管理”——前端框架将内置“Identity Layer”(如 Solid.js 的身份插件)。

系列回顾:从 Cookie/Session 的远古(1994–2012),到 Token/JWT 的崛起(2012–2023),再到 OAuth/SSO 的深化(2010–至今),以及无密码的现在(2020–2026),前端登录技术始终在追逐“安全 + 便利 + 隐私”的平衡。

密码正在死亡 —— 从 MFA 到无密码登录(2020–2026)

上一章我们聊了单点登录(SSO)在前端的落地形态:从 Cookie 域共享到基于 OIDC + Refresh Token 的集中式认证,再到微前端下的同步挑战。但无论 Token 再怎么优化、SSO 再怎么无缝,密码 这个人类最古老的数字身份载体,始终是整个体系最脆弱的一环:易忘、易猜、易钓鱼、易泄露、易重用。

从 2020 年开始,行业集体意识到:最好的密码,就是没有密码。这一篇,我们聚焦密码的“死亡过程”——从传统 MFA 的普及,到 TOTP/HOTP 的辅助,再到 WebAuthn/FIDO2 的崛起,最终到 2025–2026 年 Passkey(通行密钥)成为主流的无密码方案。前端工程师的角色,也从“表单 + 验证码校验”进化到“调用 navigator.credentials API + 处理跨设备同步”。

1. 2020–2022:MFA 成为标配,但密码仍是“根”

2020 年疫情加速数字化,远程办公 + 电商爆发,钓鱼攻击激增。密码 + 短信/邮箱 OTP 的组合被大规模强制。

典型前端实现(2020–2022):

  • 登录页:用户名 + 密码 + “发送验证码”按钮
  • 后端发短信/邮件 → 前端输入 6 位码
  • 框架:React/Vue + axios 轮询 / 长连接 polling

但问题很快暴露:

  • 短信劫持(SIM swapping)泛滥
  • 钓鱼网站实时中转 OTP
  • 用户疲劳 → 关闭 MFA 或用弱密码

统计:2021–2022 年,短信 OTP 仍是主流,但 FIDO Alliance 开始大力推 FIDO2(WebAuthn + CTAP)作为 phishing-resistant MFA。

前端接入 WebAuthn(早期):

// 注册(navigator.credentials.create)
async function register() {
  const publicKey = await fetch('/webauthn/register/challenge').then(r => r.json());
  const credential = await navigator.credentials.create({ publicKey });
  await fetch('/webauthn/register', {
    method: 'POST',
    body: JSON.stringify(credential)
  });
}

但 2020–2022 年,WebAuthn 普及慢:浏览器支持不全、用户教育成本高、设备兼容性差。

2. 2022–2024:Passkey 概念诞生 + 巨头推动(Apple/Google/Microsoft 三巨头联盟)

2022 年 5 月,Apple 在 WWDC 推出 iOS 16 的 Passkeys(基于 FIDO2 的同步凭证)。

核心卖点:

  • 私钥存设备 Secure Enclave / TPM
  • 公钥注册到服务端
  • 跨设备同步(iCloud Keychain / Google Password Manager / Microsoft 的实现)
  • 生物识别(指纹/面容)或 PIN 验证
  • Phishing-resistant(origin binding)

2023 年 Google 跟进:Chrome + Android 全面支持 Passkey,默认推动。

2024 年 Microsoft:新账户默认无密码 + Passkey。

前端变化:

  • 使用 @simplewebauthn/browser 或原生 navigator.credentials
  • 支持 autofill(浏览器自动提示 Passkey)
  • 条件 UI(conditional mediation):mediation: 'conditional' 让 Passkey 像密码一样自动填充

典型注册/认证代码(2024 现代写法):

// 认证(登录)
async function authenticate() {
  const options = await fetch('/webauthn/auth/options').then(r => r.json());
  options.mediation = 'conditional';  // 自动提示
  const assertion = await navigator.credentials.get({ publicKey: options });
  const res = await fetch('/webauthn/auth', {
    method: 'POST',
    body: JSON.stringify(assertion)
  });
  if (res.ok) console.log('登录成功');
}

这一阶段,Passkey 从“实验”变成“可选默认”。

3. 2025–2026:Passkey 真正爆发 + 密码死亡的临界点(2026 年现状)

到 2026 年 2 月,数据已非常清晰:

  • 设备就绪率:96% 的设备支持 Passkey(state-of-passkeys.io 数据,桌面 +68%、移动 +3% 增长)
  • 用户拥有率:69% 用户至少有一个 Passkey(从 2023 年的 39% 认知率暴涨)
  • 顶级网站支持率:48% 的前 100 网站支持 Passkey(2022 年仅 20% 多)
  • 登录成功率:Passkey 93% vs 传统 63%
  • 企业部署:87% 组织已部署或正在部署 Passkey(HID/FIDO 数据)
  • 认证量:Dashlane 数据显示月认证量达 130 万(同比翻倍),Google 增长 352%、Roblox 856%

巨头强制默认:

  • Google:2023 年起默认 Passkey
  • Microsoft:2025 年 5 月新账户默认无密码
  • Amazon、PayPal、TikTok 等电商/社交平台大规模跟进

前端接入难度(2026 年):

  • 极低:成熟库(@simplewebauthn、@auth0/auth0-spa-js、Clerk、Supabase Auth)屏蔽细节
  • 跨设备同步:依赖平台(iCloud/Google/MS),前端只需调用 API
  • 回退机制:仍支持密码 + TOTP 作为备用(恢复码、邮箱魔法链接)
  • 一键登录融合:Passkey + Apple/Google 一键 + 本机号码识别

典型组合拳(ToC 高频场景):

  1. 首选:Passkey(生物/设备验证)
  2. 备用:魔法链接(邮箱点击)
  3. 恢复:一次性恢复码 + 手机号验证
  4. 高危操作:Passkey + 二次确认(金额/敏感数据)

4. 前端工程师的实际落地 Checklist(2026 版)

  • 使用 navigator.credentials + mediation: 'conditional' 实现 autofill
  • 支持跨平台 RP ID(related-origin-requests for 多域)
  • 处理 user verification:userVerification: 'preferred' | 'required'
  • 兼容旧浏览器:polyfill 或 fallback 到 TOTP
  • 测试场景:Incognito、无网络、设备切换
  • 隐私考虑:不存储敏感 claims,前端只管传输 raw credential

小结 & 过渡

2020–2026 年,密码从“必须” → “可选” → “即将灭绝”的过程,核心驱动力是:

  • 安全:phishing-resistant(FIDO2)
  • 体验:生物识别 + 跨设备同步
  • 经济:减少重置支持票(降 50–80%)

到 2026 年,Passkey 已不是“未来技术”,而是消费者预期:用户开始问“为什么你们还不支持 Passkey?”

但密码完全死亡还需要时间:遗留系统、合规要求、低端设备、用户教育仍存阻力。

《this、箭头函数与普通函数:后台项目里最容易写错的几种场景》

前言

无论你是刚学 JavaScript 的小白,还是已经写了几年代码的前端,只要在写后台管理系统,大概率都踩过 this 和箭头函数的坑。

这篇文章不讲特别玄学的底层原理,只回答三个问题:

  1. 日常写代码该怎么选?(普通函数 vs 箭头函数)
  2. 为什么这么选?
  3. 坑最容易出在哪里?

一、一个真实的报错场景

先看一段后台管理系统里常见的代码:

// 表格操作列有个「删除」按钮
methods: {
  handleDelete(id) {
    this.$confirm('确定删除吗?').then(() => {
      this.deleteApi(id);  // ❌ 报错:Cannot read property 'deleteApi' of undefined
    });
  }
}

很多人会疑惑:我明明在 methods 里写的,this 怎么会是 undefined

问题在于:this 不是由「你在哪写的」决定的,而是由「谁在调用这个函数」决定的。$confirm().then() 里的回调,是 Promise 内部在调用,普通函数不会自动带上 Vue 实例的 this

如果把 .then() 里的回调改成箭头函数,就不会报错了。后面会详细说明原因。

二、基础扫盲:this 到底是谁决定的

核心结论:this 由「调用方式」决定,而不是由「定义位置」决定。

调用方式 this 指向 典型场景
作为对象方法调用 该对象 obj.fn() → this 是 obj
直接调用 fn() 严格模式:undefined;非严格:window 孤立的函数调用
new 调用 新创建的对象 new Foo()
call/apply/bind 传入的第一个参数 显式指定 this
作为回调传入 谁调就指向谁,通常丢 this setTimeout(fn)、Promise.then(fn)

关键点:当函数被当作回调传给别人时,谁调这个函数,this 就由谁决定。 比如 setTimeout(fn) 里,是浏览器在调 fn,所以 this 通常是 windowundefined,而不是你组件里的 this

三、箭头函数 vs 普通函数:本质区别

对比项 普通函数 箭头函数
this 有属于自己的 this,由调用方式决定 没有自己的 this,使用外层作用域的 this
arguments 没有(可用 ...args 替代)
能否 new 可以 不可以
能否作为构造函数 可以 不可以

一句话区分:

  • 普通函数:有「自己的」this,谁调我,this 就指向谁。
  • 箭头函数:没有「自己的」this,用的是「定义时所在作用域」的 this

因此,在需要「继承」外层 this 的场景(例如 PromisesetTimeout 回调),用箭头函数;在对象方法、构造函数等需要「自己的」this 的场景,用普通函数。

四、后台项目里最容易写错的 5 种场景

场景 1:Element UI / Ant Design 表格里的回调

// ❌ 错误写法:在模板里用箭头函数包装,可能拿不到正确的 this
<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="() => this.handleEdit(scope.row)">编辑</el-button>
  </template>
</el-table-column>

// ✅ 正确写法:直接传方法引用,Vue 会帮你绑定 this
<el-button @click="handleEdit(scope.row)">编辑</el-button>

原因: 模板里的事件绑定,Vue 会自动把组件的 this 绑定到方法上。用箭头函数包装后,this 会在定义时就固定,可能指向 windowundefined,反而拿不到组件实例。

结论: 模板事件尽量直接写方法名,或写 (arg) => this.method(arg),不要在模板里随便包箭头函数。

场景 2:Promise / async 里的 this

// ❌ 错误:.then 里用普通函数,this 丢失
handleSubmit() {
  this.validateForm().then(function(res) {
    this.submitForm();  // this 是 undefined!
  });
}

// ✅ 正确:用箭头函数,继承外层的 this
handleSubmit() {
  this.validateForm().then((res) => {
    this.submitForm();  // this 正确指向组件实例
  });
}

原因: .then() 的回调是 Promise 内部调用的,普通函数不会自动绑定组件 this。用箭头函数可以继承 handleSubmit 所在作用域的 this,即组件实例。

结论:Promiseasync/awaitsetTimeout 等异步回调里,需要访问组件/外层 this 时,用箭头函数。

场景 3:对象方法 / API 封装

// ❌ 错误:箭头函数作为对象方法,this 指向外层(window)
const api = {
  baseUrl: '/api',
  getList: () => {
    return axios.get(this.baseUrl + '/list');  // this.baseUrl 是 undefined!
  }
};

// ✅ 正确:用普通函数
const api = {
  baseUrl: '/api',
  getList() {
    return axios.get(this.baseUrl + '/list');
  }
};

原因: 箭头函数没有自己的 this,会去外层找。这里的 getList 定义在对象字面量里,外层是全局,this 就是 window(或 undefined),自然拿不到 baseUrl

结论: 对象方法、Class 方法需要用到 this 时,用普通函数,不要用箭头函数。

场景 4:事件监听器(addEventListener)

// 场景:监听 window 滚动,组件销毁时需要移除监听

// ❌ 错误:箭头函数每次都是新引用,无法正确 removeEventListener
mounted() {
  window.addEventListener('scroll', () => this.handleScroll());
},
beforeDestroy() {
  window.removeEventListener('scroll', () => this.handleScroll());  // 移除失败!引用不同
}

// ✅ 正确:保存同一个函数引用
mounted() {
  this.boundHandleScroll = this.handleScroll.bind(this);
  window.addEventListener('scroll', this.boundHandleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.boundHandleScroll);
}

原因: removeEventListener 必须传入和 addEventListener 时完全相同的函数引用。每次写 () => this.handleScroll() 都会生成新函数,所以无法正确移除。

结论: 需要手动移除监听时,用 bind 或普通函数,并把引用存到实例上,保证添加和移除用的是同一个函数。

场景 5:数组方法的回调(forEachmapfilter 等)

// 在 Vue 组件里
methods: {
  processList() {
    const list = [1, 2, 3];
    
    // ❌ 错误:普通函数作为 forEach 回调,this 会丢
    list.forEach(function(item) {
      this.doSomething(item);  // this 是 undefined
    });
    
    // ✅ 正确:箭头函数继承外层的 this
    list.forEach((item) => {
      this.doSomething(item);
    });
  }
}

原因: forEach 等方法的回调是由数组方法内部调用的,普通函数不会绑定组件 this。用箭头函数可以继承 processListthis

结论:forEachmapfilterreduce 等回调里需要访问外层 this 时,用箭头函数;不需要 this 时,两者都可以。

五、决策清单:什么时候用谁

可以按下面几条来选:

  1. 对象方法、Class 方法、构造函数 → 用普通函数。
  2. Promise、setTimeout、数组方法等回调里要访问外层 this → 用箭头函数。
  3. Vue 模板事件 → 直接写方法名,或 (arg) => this.method(arg),避免乱包箭头函数。
  4. 需要 arguments → 用普通函数,或箭头函数 + ...args
  5. addEventListener / removeEventListener → 用 bind 或保存同一引用,保证添加和移除是同一个函数。

六、一句话口诀

  • 普通函数:有自己的 this,谁调我,this 就指向谁。
  • 箭头函数:没有自己的 this,用的是「定义时所在外层」的 this

需要「动态 this」用普通函数,需要「固定外层 this」用箭头函数。

总结

this 和箭头函数本身不复杂,容易出错的是「在错误场景选错写法」。后台项目里,最容易踩坑的就是:Promise 回调、对象方法、模板事件、事件监听器这几处。记住「谁在调用」「外层 this 是谁」,选普通函数还是箭头函数就不容易错。

以上就是本次的学习分享,欢迎大家在评论区讨论指正,与大家共勉。

我是 Eugene,你的电子学友。

如果文章对你有帮助,别忘了点赞、收藏、加关注,你的认可是我持续输出的最大动力~

【React-11/Lesson95(2026-01-04)】React 闭包陷阱详解🎯

🔍 什么是闭包陷阱

在 React 函数组件开发中,闭包陷阱是一个非常经典且常见的问题。要理解闭包陷阱,我们首先需要理解闭包的形成条件。

闭包的形成条件

闭包的形成通常出现在以下场景:

  • 函数组件嵌套了定时器、事件处理函数等
  • 使用 useEffect 且依赖数组为空
  • 使用 useCallback 缓存函数
  • 词法作用域链的作用

让我们看一个典型的闭包陷阱示例:

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Current count:', count);
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

在这个例子中,useEffect 的依赖数组是空的,这意味着它只会在组件挂载时执行一次。setInterval 回调函数中引用了 count 变量,由于闭包的特性,这个回调函数会捕获到初始渲染时的 count 值(也就是 0)。即使后续我们通过 setCount 更新了 count 的值,定时器回调中的 count 仍然会保持初始值 0,这就是闭包陷阱!

💡 深入理解 React 的渲染机制

要彻底明白闭包陷阱,我们需要理解 React 函数组件的渲染机制:

React 函数组件的重新渲染

每次组件重新渲染时:

  1. 函数组件会重新执行
  2. useState 返回的状态值是当前最新的值
  3. 所有在组件内部定义的函数、变量都会被重新创建
  4. useEffect 会根据依赖数组决定是否重新执行

闭包的工作原理

闭包是 JavaScript 中的一个核心概念,指的是函数能够记住并访问其词法作用域,即使该函数在其词法作用域之外执行。

在 React 中,每次渲染都会创建一个新的"快照",包含当时的所有状态、props 和函数。当 useEffect 依赖数组为空时,它只在第一次渲染时执行,因此它捕获的是第一次渲染时的闭包,里面的所有变量都是初始值。

🛠️ 解决闭包陷阱的 12 种方案

方案一:将依赖项加入到依赖数组中【推荐】

这是最简单也是最推荐的解决方案。通过将 count 加入到依赖数组中,每当 count 变化时,useEffect 都会重新执行,从而捕获到最新的 count 值。

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Current count:', count);
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, [count]);
}

重要提示:不只是组件卸载时才会执行清理函数,每次 effect 重新执行之前,都会先执行上一次的清理函数。这样可以确保不会有多个定时器同时运行。

方案二:使用 useRef 引用变量

useRef 返回的对象在组件的整个生命周期中保持不变,我们可以用它来存储最新的状态值。

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Current count:', countRef.current);
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

这种方法的优势是 useEffect 不需要重新执行,避免了频繁创建和清理定时器的开销。

方案三:使用 useCallback 缓存函数

useCallback 可以缓存函数,结合 useRef 一起使用:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案四:使用 useLayoutEffect 代替 useEffect

useLayoutEffect 在 DOM 更新后同步执行,虽然它不能直接解决闭包问题,但在某些场景下配合其他方法使用会更合适:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案五:使用 useMemo 缓存变量

useMemo 用于缓存计算结果,同样可以配合 useRef 使用:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案六:使用 useReducer 管理状态

useReducer 是另一种状态管理方式,它的 dispatch 函数具有稳定的引用,可以避免闭包问题:

function App() {
  const [count, setCount] = useReducer((state, action) => {
    switch (action.type) {
      case 'increment':
        return state + 1;
      case 'decrement':
        return state - 1;
      default:
        return state;
    }
  }, 0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案七:使用 useImperativeHandle 暴露方法

useImperativeHandle 用于自定义暴露给父组件的 ref 实例值:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案八:使用 useContext 传递状态

useContext 可以跨组件传递状态,避免 prop drilling:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案九:使用 useDebugValue 调试状态

useDebugValue 用于在 React DevTools 中显示自定义 Hook 的标签:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案十:使用 useTransition 处理异步更新

useTransition 是 React 18 引入的 Hook,用于标记非紧急更新:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案十一:使用 useDeferredValue 处理异步更新

useDeferredValue 也是 React 18 引入的 Hook,用于延迟更新某些值:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

方案十二:使用 useLayoutEffect 处理同步更新

useLayoutEffect 在 DOM 更新后同步执行,可以用于处理需要立即反映到 DOM 上的操作:

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;
  const logCount = useCallback(() => {
    console.log('Current count:', countRef.current);
  }, []);
  useLayoutEffect(() => {
    const timer = setInterval(() => {
      logCount();
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);
}

📝 实际应用场景

闭包陷阱不仅仅出现在定时器中,还可能出现在以下场景:

  1. 事件处理函数:在 useEffect 中添加事件监听器
  2. 异步请求:在 useEffect 中发起网络请求
  3. 动画:使用 requestAnimationFrame 等 API
  4. WebSocket:建立长连接
  5. 防抖节流函数:在组件中使用防抖或节流

🎓 最佳实践建议

  1. 优先使用依赖数组:这是最直观、最符合 React 设计理念的方案
  2. 合理使用 useRef:当不需要频繁重新执行 effect 时,useRef 是很好的选择
  3. 理解清理函数的重要性:始终正确清理定时器、事件监听器等资源
  4. 使用 ESLint 插件eslint-plugin-react-hooks 可以帮助你发现遗漏的依赖项

希望这篇文章能帮助你彻底理解 React 闭包陷阱!🎉

为什么Django这么慢,却还是Python后端第一梯队呢?

学习Web框架的Python玩家大多应该都听过:Django 性能不行”、“高并发场景根本用不了 Django”。但有趣的是,在TIOBE、PyPI下载量、企业技术栈选型中,Django始终稳居Python后端框架第一梯队,甚至是很多公司的首选。

这背后的矛盾,恰恰折射出工业级开发的核心逻辑:性能从来不是唯一的衡量标准,生产力和工程化能力才是

一、先澄清:Django 的“慢”,到底慢在哪?

首先要纠正一个认知偏差:Django的 “慢” 是相对的,而非绝对的。

1. 所谓“慢”的本质

Django被吐槽“慢”,主要集中在这几个点:

  • 全栈特性的代价:Django是“电池已内置”的全栈框架,ORM、表单验证、认证授权、Admin后台、缓存、国际化等功能开箱即用,这些内置组件会带来一定的性能开销,对比Flask、FastAPI这类轻量框架,纯接口响应速度确实稍慢(基准测试中,简单接口QPS约为FastAPI的1/3-1/2)。
  • 同步 IO 的天然限制:Django默认是同步架构,在高并发IO密集型场景(如大量请求等待数据库/第三方接口响应)下,线程/进程池容易被打满,吞吐量受限。
  • ORM 的 “便利税” :自动生成的SQL可能不够优化,新手容易写出N+1查询,进一步放大性能问题。

2. 但这些“慢”,大多是“伪问题”

绝大多数业务场景下,Django的性能完全够用:

  • 普通中小网站(日活10万以内):Django+合理缓存+数据库优化,能轻松支撑业务,性能瓶颈根本不在框架本身。
  • 所谓 “慢” 的对比场景:大多是“裸框架接口跑分”,而真实业务中,接口响应时间的80%以上消耗在数据库、缓存、网络IO上,框架本身的耗时占比不足5%。
  • 性能可优化空间大:通过异步改造(Django 3.2+原生支持ASGI)、缓存层(Redis)、数据库读写分离、CDN、Gunicorn+Nginx部署等方式,完全能把Django的性能提升到满足中高并发的水平。

二、Django能稳居第一梯队,核心是“降本增效”

企业选框架,本质是选“性价比”——开发效率、维护成本、团队协作成本,远比单点性能重要。而这正是Django的核心优势。

1. 极致的开发效率:“开箱即用” 的工业级体验

Django的设计哲学是 “不要重复造轮子”,一个命令就能生成完整的项目骨架,几行代码就能实现核心功能:

# 5行代码实现带权限的REST接口(Django+DRF)
from rest_framework import viewsets
from .models import Article
from .serializers import ArticleSerializer

class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
    permission_classes = [IsAuthenticated]
  • 内置Admin后台:无需写一行前端代码,就能实现数据的增删改查,调试和运营效率拉满。
  • 完善的认证授权:Session、Token、OAuth2等认证方式开箱即用,不用自己造权限轮子。
  • 表单验证&CSRF防护:自动处理表单校验、跨站请求伪造,减少安全漏洞。
  • ORM的价值:虽然有性能损耗,但大幅降低了数据库操作的学习成本和出错概率,新手也能快速写出安全的数据库逻辑。

对于创业公司或快速迭代的业务,“快上线、少踩坑”比“多10%的性能” 重要得多——Django能让团队用最少的人力,在最短时间内搭建起稳定的业务系统。

2. 成熟的工程化体系:适合团队协作

个人项目可以用Flask自由发挥,但团队项目需要“规范”。Django的“约定优于配置”理念,强制规范了项目结构、代码组织、数据库迁移等流程:

  • 统一的项目结构:新人接手项目,不用花时间理解自定义的目录结构,直接就能上手。
  • 内置的数据库迁移工具:makemigrations/migrate 完美解决数据库版本管理问题,避免团队协作中的数据结构混乱。
  • 丰富的中间件和扩展生态:缓存中间件、跨域中间件、日志中间件等开箱即用,DRF(Django REST Framework)、Celery、Django Channels等扩展几乎能覆盖所有业务场景。
  • 完善的文档和社区:官方文档堪称 “教科书级别”,遇到问题能快速找到解决方案,招聘时也更容易找到有经验的开发者。

3. 稳定可靠:经得起生产环境的考验

Django 诞生于2005年,经过近20年的迭代,已经成为一个极其稳定的框架:

  • 长期支持版本(LTS):每2-3年发布一个LTS版本,提供3年以上的安全更新和bug修复,企业不用频繁升级框架。
  • 安全特性完善:自动防御XSS、CSRF、SQL注入等常见攻击,官方会及时修复安全漏洞,这对企业来说是“刚需”。
  • 大量知名案例背书:Instagram、Pinterest、Mozilla、Spotify、国内的知乎(早期)、豆瓣等,都在用 Django支撑核心业务——这些产品的规模,足以证明Django的可靠性。

三、Django 的 “破局之路”:性能短板正在被补齐

面对性能吐槽,Django团队也一直在迭代优化:

  • 异步支持:Django 3.0引入ASGI,3.2+完善异步视图、异步ORM,能直接对接WebSocket、长连接,IO密集型场景的并发能力大幅提升。
  • 性能优化:新版本持续优化ORM、模板引擎、中间件,减少不必要的开销,比如Django 4.0+的ORM支持批量更新/插入,性能提升显著。
  • 生态适配:可以和FastAPI混合部署(比如核心接口用FastAPI,管理后台用Django),兼顾性能和生产力;也可以通过Gunicorn+Uvicorn+异步工作进程,充分利用多核CPU。

四、总结:选框架,本质是选 “适配性”

Django的 “慢”,是为 “全栈、工程化、生产力” 付出的合理代价;而它能稳居第一梯队,核心原因是:

  1. 匹配绝大多数业务场景:90%的中小业务不需要 “极限性能”,但都需要 “快速开发、稳定运行、易维护”。
  2. 降低团队成本:统一的规范、丰富的内置功能、完善的文档,能大幅降低招聘、培训、协作成本。
  3. 生态和稳定性兜底:成熟的生态能解决几乎所有业务问题,长期支持版本让企业不用频繁重构。

最后想说:框架没有好坏,只有适配与否。如果是做高并发的API服务(如直播、秒杀),FastAPI/Tornado 可能更合适;但如果是做内容管理、电商、企业后台等需要快速落地、长期维护的业务,Django依然是Python后端的最优解之一。

这也是为什么,即便有层出不穷的新框架,Django依然能稳坐第一梯队——因为它抓住了工业级开发的核心:让开发者把精力放在业务上,而非重复造轮子

《React 受控组件 vs 非受控组件:一篇吃透表单处理精髓》

React 受控组件 vs 非受控组件:一篇吃透表单处理精髓

在 React 开发中,表单处理是高频场景——登录注册、评论提交、信息录入,几乎每个项目都会用到。但很多新手都会困惑:同样是获取表单输入值,为什么有的用 useState,有的用 useRef?这其实对应了 React 表单处理的两种核心方式:受控组件非受控组件

很多人分不清两者的区别,盲目使用导致表单出现“无法输入”“值获取不到”“性能冗余”等问题。本文将从「核心疑问出发」,拆解两者的定义、用法、区别,结合实战代码演示,帮你彻底搞懂什么时候用受控、什么时候用非受控,看完直接落地项目。

一、核心疑问:怎么拿到 React 表单的值?

原生 HTML 中,我们可以通过 DOM 直接获取表单元素的值,比如 document.querySelector('input').value。但 React 遵循“单向数据流”原则,不推荐直接操作 DOM,因此提供了两种更规范的方式获取表单值,对应两种组件类型。

先看一个最基础的示例,直观感受两者的差异:

import { useState, useRef } from 'react';

export default function App() {
  // 受控组件:用状态控制输入框
  const [value, setValue] = useState("")
  // 非受控组件:用 ref 获取 DOM 值
  const inputRef = useRef(null);

  // 表单提交逻辑
  const doLogin = (e) => {
    e.preventDefault(); // 阻止页面刷新
    console.log("非受控输入值:", inputRef.current.value); // 非受控获取值
    console.log("受控输入值:", value); // 受控获取值
  }

  return (
    <form onSubmit={
      {/* 受控输入框:value 绑定状态,onChange 更新状态 */}
      <input 
        type="text" 
        value={) => setValue(e.target.value)} 
        placeholder="受控输入框"
      />
      {/* 非受控输入框:ref 关联 DOM,无需绑定状态 */}
      <input 
        type="text" 
        ref={受控输入框"
        style={{ marginLeft: '10px' }}
      />
      <button type="submit" style={提交
  )
}

上面的代码中,两个输入框分别对应受控和非受控两种方式,核心差异在于「值的控制者」不同——一个由 React 状态控制,一个由 DOM 原生控制。

二、逐字拆解:什么是受控组件?

1. 核心定义

受控组件:表单元素的值由 React 状态(useState)完全控制,输入框的显示值 = 状态值,输入行为通过 onChange 事件更新状态,从而实现“状态 ↔ 输入框”的联动。

核心逻辑:状态驱动 DOM,符合 React 单向数据流原则——数据从状态流向 DOM,DOM 输入行为通过事件反馈给状态,形成闭环。

2. 核心用法(必记)

实现一个受控组件,必须满足两个条件:

  • 给表单元素绑定 value={状态值},让状态决定输入框显示内容;
  • 绑定 onChange 事件,通过 e.target.value 获取输入值,调用 setState 更新状态。

3. 实战:多字段受控表单(登录注册场景)

实际开发中,表单往往有多个字段(如用户名、密码),此时可以用一个对象状态管理所有字段,配合事件委托简化代码:

import { useState } from "react"

export default function LoginForm() {
  // 用对象状态管理多个表单字段
  const [form, setForm] = useState({
    username: "",
    password: ""
  });

  // 统一处理所有输入框的变化
  const handleChange = (e) => {
    // 解构事件目标的 name 和 value(输入框需设置 name 属性)
    const { name, value } = e.target;
    // 更新状态:保留原有字段,修改当前输入字段(不可直接修改原对象)
    setForm({
      ...form, // 展开原有表单数据
      [name]: value // 动态更新对应字段
    })
  }

  // 表单提交
  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接从状态中获取所有表单值,无需操作 DOM
    console.log("表单数据:", form);
    // 实际开发中:这里可做表单校验、接口请求等逻辑
  }

  return (
    <form onSubmit={<div style={<input 
          type="text" 
          placeholder="请输入用户名" 
          name="username" /Change}
          value={form.username} // 绑定状态值
          style={{ padding: '6px' }}
        />
      <div style={>
        <input 
          type="password" 
          placeholder="请输入密码" 
          name="password" / 绑定状态值
          style={{ padding: '6px' }}
        />
      <button type="submit" style={注册
  )
}

4. 受控组件的关键细节

  • ⚠️ 只写 value={状态} 不写 onChange,输入框会变成「只读」——因为状态无法更新,输入框值永远固定;
  • 状态更新是异步的,但不影响表单输入(React 会批量处理状态更新,保证输入流畅);
  • 适合做「实时操作」:比如实时表单校验、输入内容实时展示、表单字段联动(如密码强度提示)。

三、逐字拆解:什么是非受控组件?

1. 核心定义

非受控组件:表单元素的值由 DOM 原生控制,React 不干预输入过程,而是通过 useRef 获取 DOM 元素,再读取其 current.value 获取输入值。

核心逻辑:DOM 驱动数据,和原生 HTML 表单逻辑一致,React 只做“被动获取”,不主动控制输入值。

2. 核心用法(必记)

实现一个非受控组件,只需一步:

  • useRef(null) 创建 Ref 对象,绑定到表单元素的 ref 属性;
  • 需要获取值时,通过 ref.current.value 读取(通常在提交、点击等事件中获取)。

可选:用 defaultValue 设置初始值(仅首次渲染生效,后续修改不影响)。

3. 实战:非受控评论框(一次性提交场景)

评论框、搜索框等“一次性提交”场景,无需实时监控输入,用非受控组件更简洁高效:

import { useRef } from 'react';

export default function CommentBox() {
  // 创建 Ref 对象,关联 textarea 元素
  const textareaRef = useRef(null);

  // 提交评论逻辑
  const handleSubmit = () => {
    // 防御性判断:避免 ref.current 为 null(极端场景)
    if (!textareaRef.current) return;
    // 获取输入值
    const comment = textareaRef.current.value.trim();
    // 表单校验
    if (!comment) return alert('请输入评论内容!');
    // 提交逻辑
    console.log("评论内容:", comment);
    // 提交后清空输入框(直接操作 DOM)
    textareaRef.current.value = "";
  }

  return (
    <div style={<textarea 
        ref={        placeholder="输入评论..."
        style={{ width: '300px', height: '100px', padding: '10px' }}
        defaultValue="请输入你的看法..." // 初始值(可选)
      />
      <button 
        onClick={={{ padding: '6px 16px', marginTop: '10px' }}
      >
        提交评论
      
  )
}

4. 非受控组件的关键细节

  • ⚠️ 不要用 value 绑定状态(否则会变成受控组件),初始值用 defaultValue
  • Ref 对象的 current 在组件首次渲染后才会指向 DOM,因此不能在组件渲染时直接读取 textareaRef.current.value(会报错);
  • 适合做「一次性操作」:比如文件上传( 必须用非受控)、简单搜索框、一次性提交的表单。

四、核心对比:受控组件 vs 非受控组件(必背)

很多人纠结“该用哪个”,其实核心看「是否需要实时控制输入」,用表格清晰对比两者差异,一目了然:

对比维度 受控组件 非受控组件
值的控制者 React 状态(useState) DOM 原生控制
核心依赖 useState + onChange useRef
值的获取方式 直接读取状态(如 form.username) ref.current.value
初始值设置 useState 初始值(如 useState("")) defaultValue 属性
是否触发重渲染 输入时触发(onChange 更新状态) 输入时不触发(无状态变化)
适用场景 实时校验、表单联动、实时展示 一次性提交、文件上传、性能敏感场景
优点 可实时控制,符合 React 单向数据流,易维护 简洁高效,无需频繁更新状态,性能更好
缺点 频繁触发重渲染,代码量稍多 无法实时控制,需手动操作 DOM,不易做联动

五、实战总结:什么时候该用哪个?(重点)

不用死记硬背,记住两个核心原则,就能快速判断:

1. 优先用受控组件的情况

  • 表单需要「实时校验」(如用户名长度限制、密码强度提示);
  • 表单字段需要「联动」(如勾选“记住密码”才显示“密码确认”);
  • 需要「实时展示输入内容」(如输入时同步显示剩余字符数);
  • 表单数据需要和其他组件共享、联动(如跨组件传递表单值)。

2. 优先用非受控组件的情况

  • 表单是「一次性提交」(如评论、搜索,无需实时监控);
  • 需要处理「文件上传」( 是天然的非受控组件,无法用状态控制);
  • 追求「性能优化」(避免频繁的状态更新和组件重渲染);
  • 简单表单(如单个输入框,无需复杂逻辑)。

3. 避坑提醒

  • 不要混合使用:同一个表单元素,不要既绑定 value 又绑定 ref,会导致逻辑混乱;
  • 非受控组件必做防御:获取值时,先判断 ref.current 是否存在,避免报错;
  • 多字段表单优先受控:用对象状态管理,代码更规范、易维护。

六、最终总结

受控组件和非受控组件没有“谁更好”,只有“谁更合适”:

✅ 受控组件是 React 表单处理的「主流方式」,符合单向数据流,适合复杂表单、需要实时控制的场景;

✅ 非受控组件更「简洁高效」,贴近原生 HTML,适合简单场景、性能敏感场景和文件上传;

记住:判断的核心是「是否需要实时控制输入值」。掌握两者的用法和区别,就能轻松应对 React 中的所有表单场景,写出简洁、高效、可维护的代码。

《React Context 极简实战:解决跨层级通信》

React Context 极简实战:解决跨层级通信

在 React 开发中,组件通信是绕不开的核心问题。父子组件通信可以通过 props 轻松实现,但当组件层级嵌套较深(比如爷爷 → 父 → 子 → 孙),或者需要跨多个组件共享数据时,单纯依靠 props 传递就会变得繁琐又低效——这就是我们常说的“prop drilling(props 透传)”。

就像《长安的荔枝》里,荔枝从岭南运往长安,需要层层传递、处处协调,耗时耗力还容易出问题。React 的 Context API 就是为了解决这个痛点而生,它能让数据在组件树中“全局共享”,无需手动层层透传,让跨层级通信变得简洁高效。

本文将从「痛点分析」→「Context 核心原理」→「基础用法」→「实战案例」,带你彻底掌握 React Context 的使用,看完就能直接应用到项目中。

一、痛点:prop drilling 有多麻烦?

先看一个常见的场景:App 组件持有用户信息,需要传递给嵌套在 Page → Header → UserInfo 里的最内层组件,用于展示用户名。

用传统 props 传递的代码如下:

// App 组件(数据持有者)
export default function App() {
  const user = {name:"Andrew"}; // 登录后的用户数据
  return (
    <Page user={user} />
  )
}

// Page 组件(中间层,仅透传 props)
import Header from './Header';
export default function Page({user}) {
  return (
    <Header user={user}/>
  )
}

// Header 组件(中间层,继续透传 props)
import UserInfo from './UserInfo';
export default function Header({user}) {
  return (
    <UserInfo user={user}/> 
  )
}

// UserInfo 组件(最终使用数据)
export default function UserInfo({user}) {
  return (
    <div>{user.name}</div>
  )
}

这段代码的问题很明显:

  • Page、Header 组件本身不需要使用 user 数据,却要被迫接收和传递 props,增加了冗余代码;
  • 如果组件层级再多几层(比如 5 层、10 层),props 透传会变得异常繁琐,后续维护时,修改数据传递路径也很容易出错;
  • 数据的“持有权”和“使用权”分离,但传递过程中没有统一的管理,可读性差。

而 Context API 就能完美解决这个问题——它让数据“悬浮”在组件树的顶层,任何层级的组件,只要需要,都能直接“取用”,无需中间组件透传。

二、Context 核心原理:3 个关键步骤

React Context 的核心思想很简单:创建一个“数据容器”,在组件树的顶层提供数据,底层组件按需取用。整个过程只需 3 步,记牢就能轻松上手。

1. 创建 Context 容器(createContext)

首先,我们需要用 React 提供的 createContext 方法,创建一个 Context 容器,用于存储需要共享的数据。可以把它理解为一个“全局数据仓库”。

import { createContext } from 'react';

// 创建 Context 容器,默认值为 null(可选,可根据需求设置)
// 导出 Context,供其他组件取用
export const UserContext = createContext(null);

注意:默认值只有在“组件没有找到对应的 Provider”时才会生效,实际开发中一般设置为 null 或初始数据即可。

2. 提供数据(Provider)

创建好 Context 容器后,需要在组件树的“顶层”(通常是 App 组件),用 Context.Provider 组件将数据“提供”出去。Provider 是 Context 的内置组件,它会将数据传递给所有嵌套在它里面的组件。

import { UserContext } from './contexts/UserContext';
import Page from './views/Page';

export default function App() {
  const user = { name: "Andrew" }; // 需要共享的数据

  return (
    // Provider 包裹需要共享数据的组件树
    // value 属性:设置 Context 中要共享的数据
    <UserContext.Provider value={user}>
      <Page /> {/* Page 及其子组件都能取用 user 数据 */}
    </UserContext.Provider>
  )
}

关键细节:

  • Provider 可以嵌套使用(比如同时提供用户信息、主题信息两个 Context);
  • 当 Provider 的 value 发生变化时,所有使用该 Context 的组件都会自动重新渲染;
  • 数据的“持有权”仍在顶层组件(App),符合 React “单向数据流”的原则——只有顶层组件能修改数据,底层组件只能读取。

3. 取用数据(useContext)

底层组件想要使用 Context 中的数据,只需用 React 提供的 useContext Hook,传入对应的 Context 容器,就能直接获取到共享数据,无需任何 props 透传。

import { useContext } from 'react';
// 导入创建好的 Context
import { UserContext } from '../contexts/UserContext';

export default function UserInfo() {
  // 用 useContext 取用 Context 中的数据
  const user = useContext(UserContext);
  
  return (
    <div>当前登录用户:{user.name}</div>
  )
}

此时,Page、Header 组件就可以完全去掉 user props,专注于自己的功能即可:

// Page 组件(无需透传 props)
import Header from './Header';
export default function Page() {
  return <Header />;
}

// Header 组件(无需透传 props)
import UserInfo from './UserInfo';
export default function Header() {
  return <UserInfo />;
}

是不是简洁多了?无论 UserInfo 组件嵌套多深,只要它在 Provider 的包裹范围内,就能直接取用数据。

三、实战案例:全局主题切换(Context + 状态管理)

上面的案例只是“读取静态数据”,实际开发中,我们更常需要“共享可修改的状态”(比如全局主题、用户登录状态)。下面我们用 Context 实现一个「白天/夜间主题切换」功能,完整覆盖 Context 的核心用法。

需求说明

  • 实现白天(light)/ 夜间(dark)主题切换;
  • 主题状态全局共享,Header 组件显示当前主题并提供切换按钮;
  • 页面背景色、文字色随主题变化,支持平滑过渡。

步骤 1:创建 ThemeContext 并提供状态

我们创建一个 ThemeProvider 组件,负责管理主题状态(theme)和切换方法(toggleTheme),并通过 Provider 提供给整个组件树。

// contexts/ThemeContext.js
import { useState, createContext, useEffect } from 'react';

// 1. 创建 Context 容器
export const ThemeContext = createContext(null);

// 2. 创建 Provider 组件,管理状态并提供数据
export default function ThemeProvider({ children }) {
  // 主题状态:默认白天模式
  const [theme, setTheme] = useState('light');

  // 主题切换方法:切换 light/dark
  const toggleTheme = () => {
    setTheme((prevTheme) => prevTheme === 'light' ? 'dark' : 'light');
  };

  // 副作用:主题变化时,修改 html 标签的 data-theme 属性(用于 CSS 样式切换)
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  // 3. 提供数据:将 theme 和 toggleTheme 传递给子组件
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children} {/* children 是嵌套的组件树 */}
    </ThemeContext.Provider>
  );
}

步骤 2:顶层组件引入 ThemeProvider

在 App 组件中,用 ThemeProvider 包裹整个组件树,让所有子组件都能取用主题相关数据。

// App.js
import ThemeProvider from "./contexts/ThemeContext";
import Page from './pages/Page';

export default function App() {
  return (
    <ThemeProvider>
      <Page />
    </ThemeProvider>
  );
}

步骤 3:底层组件取用主题并实现切换

在 Header 组件中,用 useContext 取用 theme 和 toggleTheme,实现主题显示和切换功能。

// components/Header.js
import { useContext } from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

export default function Header() {
  // 取用主题状态和切换方法
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ marginBottom: 24, padding: 20 }}>
      <h2>当前主题:{theme === 'light' ? '白天模式' : '夜间模式'}</h2>
      <button 
        className="button" 
        onClick={toggleTheme}
      >
        切换主题
      </button>
    </div>
  );
}

步骤 4:CSS 样式配合主题切换

通过 CSS 变量和属性选择器,实现主题切换时的样式变化,配合 transition 实现平滑过渡。

/* theme.css */
/* 全局 CSS 变量:默认白天模式 */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
  --primary-color: #1677ff;
}

/* 夜间模式:修改 CSS 变量 */
[data-theme='dark'] {
  --bg-color: #141414;
  --text-color: #f5f5f5;
  --primary-color: #4e8cff;
}

/* 全局样式 */
body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease; /* 平滑过渡 */
  font-family: 'Arial', sans-serif;
}

/* 按钮样式 */
.button {
  padding: 8px 16px;
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  opacity: 0.9;
}

步骤 5:Page 组件整合

Page 组件作为中间层,无需关心主题数据,只需渲染 Header 即可。

// pages/Page.js
import Header from '../components/Header';

export default function Page() {
  return (
    <div style={{ padding: 24 }}>
      <Header />
      <h3>主题切换实战演示</h3>
      <p>当前页面背景色、文字色会随主题变化哦~</p>
    </div>
  );
}

效果演示

  1. 初始状态:白天模式,背景为白色,文字为深灰色,按钮为蓝色;

  2. 点击“切换主题”按钮:主题变为夜间模式,背景变为黑色,文字变为白色,按钮颜色变浅;

  3. 再次点击:切换回白天模式,所有样式平滑过渡。

四、Context 实用技巧与注意事项

1. 多个 Context 共存

实际开发中,我们可能需要共享多种数据(比如用户信息、主题、权限),此时可以嵌套多个 Provider:

<UserContext.Provider value={user}>
  <ThemeContext.Provider value={{ theme, toggleTheme }}>
    <Page />
  </ThemeContext.Provider>
</UserContext.Provider>

底层组件可以分别用 useContext 取用不同的 Context 数据,互不影响。

2. 避免不必要的渲染

当 Provider 的 value 发生变化时,所有使用该 Context 的组件都会重新渲染。如果 value 是一个对象,每次渲染都会创建新对象,会导致不必要的渲染。

解决方案:用 useMemo 缓存 value 对象(如果有状态变化):

import { useMemo } from 'react';

// 缓存 value,只有 theme 或 toggleTheme 变化时才更新
const contextValue = useMemo(() => ({
  theme,
  toggleTheme
}), [theme]);

return (
  <ThemeContext.Provider value={contextValue}>
    {children}
  </ThemeContext.Provider>
);

3. Context 不是万能的

Context 适合共享「全局且变化不频繁」的数据(如主题、用户信息、权限),但不适合用来传递频繁变化的局部数据(如表单输入值)。

如果数据只在父子组件之间传递,且层级较浅,优先使用 props;如果数据需要跨多层级共享,再考虑 Context。

4. 默认值的使用场景

createContext 的默认值,只有在组件没有被对应的 Provider 包裹时才会生效。通常用于开发环境下的 fallback(降级),或者测试组件时避免报错。

五、总结

React Context API 是解决跨层级组件通信的最优方案之一,它的核心是“创建容器 → 提供数据 → 取用数据”,三步就能实现全局数据共享,彻底解决 prop drilling 的痛点。

通过本文的基础讲解和主题切换实战,你应该已经掌握了 Context 的核心用法:

  • 用 createContext 创建数据容器;
  • 用 Context.Provider 在顶层提供数据(可包含状态和方法);
  • 用 useContext 在底层组件取用数据;
  • 结合 useState、useEffect 可以实现可修改的全局状态管理。

React Native中实现仿iOS的液态玻璃效果

前言

在React Native近期的更新中,比较大的就是GlassEffect,就是iOS的液态玻璃效果。其实具体啥样我也没具体关注,主要是没有iOS设备,我的音乐播放器应用也一直是在Android上调试。而且Android上的blur效果和GlassEffect效果是有明显差异的。那么提到blur,前端er应该立马能想到CSS中的滤镜,blur毛玻璃效果在web端实现非常轻松,而在android则是实验性功能,它还很年轻,在开发过程中我尝试了很多依赖库,下面会简单介绍在使用过程中踩过的坑。下面先放图,使用的位置是页面顶部和底部tab,看一下大致效果:

微信图片_20260214174329_233_23.jpg微信图片_20260214174330_234_23.jpg

微信图片_20260214174331_235_23.jpg

使用过的依赖库

@sbaiahmed1/react-native-blur

效果非常哇塞的一个依赖库!amazing!但是它有些大坑,而且难以逾越,在github仓库中有很多issue,而且我发现有些并没有明确解决,但是关闭了。最近也是尝试了挺多依赖库,也提了一些issue,有些依赖库作者会回复,但是总体感受就是不耐烦,而且大部分是急不可耐的关闭,比如:我们测没有问题,你的问题我从来没遇到过,关闭。这个问题不多说。具体说我发现的问题:

  1. 当页面中使用了该依赖库创建blur效果后当前页面内触发的页面跳转:比如模态页,新页面是动画划出,在新打开的页面中会蒙上一层白雾,不影响页面操作
  2. 当一个页面使用了blur效果,在该页面中跳转一个从页面侧面划出的模态页(抽屉效果)时没有问题,但是当页面收起时会再次闪烁一下这个模态页

3.自带overflow:'hidden'且无法使用自定义样式覆盖,这使得你想让容器内的一个元素以定位的方式'超出容器'变的很困难,你需要改布局和样式来实现,这在我的音乐播放器的应用中

其它问题没有具体测试,但是已经让我够崩溃的了,因为我用的expo搭建的rn项目,并且没有本地构建环境,只能使用EAS build,而expo的每个月免费构建次数是有上限的,Android和iOS各是15次。

@danielsaraldi/react-native-blur-view

这个依赖库也是个很amazing的依赖库,但是amazing的不是效果,是它的使用方式比较奇特,readme文档中写道:

import {
  BlurView,
  BlurTarget,
  VibrancyView,
} from '@danielsaraldi/react-native-blur-view';
// ...

export default function App() {
  // ...

  return (
    <>
      <BlurView targetId="target" style={styles.blurView}>
        <Text style={styles.title}>BlurView</Text>
      </BlurView>

      <VibrancyView style={styles.vibrancyView}>
        <Text style={styles.title}>VibrancyView</Text>
      </VibrancyView>

      <BlurTarget id="target" style={styles.main}>
        <ScrollView
          style={styles.main}
          contentContainerStyle={styles.content}
          showsVerticalScrollIndicator={false}
        >
          {/* ... */}
        </ScrollView>
      </BlurTarget>
    </>
  );
}

它有一个比较奇怪的targetId,而且它的使用不太符合直觉,而且目前大部分blur依赖库的使用方式就是BlurView容器组件内部children使我们真正想要渲染的元素。由于我没有深入研究该依赖库,而且做出了半透明背景色效果,就和我当初初用expo-blur一样,实现了rgba半透明背景色。。。

  1. 自带overflow:'hidden',无法覆盖
  2. 使用方式复杂,不够直观
  3. 接收的style样式奇奇怪怪各种无效

expo-blur

这个依赖库很早我就安装过,,当时只是做了简单的效果,没有仔细看文档,其实它的文档非常简单,配置项很少,使用极其简单,效果其实也还不错,没有像第一个依赖库那样的硬伤bug,但是最近我要在应用中明确实现图中的效果,但是,但是由于我忽略了最重要的配置,导致我只能实现rgba效果!,后面我会重点分析,但是并不是说它就没有问题:

  1. 容器中的文字,icon图标外围可能会出现模糊阴影:仔细看第三张图的'我的'文字,它周围产生了阴影!而且不是总会产生!就是容器内的元素可能因为BlurView的影响产生了朦胧美!当然你觉得它美也行,但是它时有时无,可以确定是bug

其它目前我没有发现异常,而且就像expo-audio兜兜转转又回到原点一样,我千辛万苦尝试了这么多依赖库,因为这些依赖库都是需要原生代码,因此想要调试不能使用expo go,必须执行开发构建才能调试,这个坑还能接受,但是你还要知道:不同的blur依赖库内部可能都使用了同样的依赖库,调用了同样的原生功能,如果你把所有功能相似的依赖库都安装并开发构建,你大概率会失败,所以在尝试一些依赖库时就提心吊胆:构建次数有限,每次同类库只能安装一个,比较耗时,大概30分钟以内,如果排队的话,可能光排队就要30分钟!

expo-blur的使用

刚才也提到了expo-blur使用非常简单,配置项很少,非常符合直觉,文档的介绍也比较简单:它继承扩展了ViewProps,就是它具有View组件的属性,除此之外还有以下属性:

  1. intensity,强度值 1~100,模糊强度,值越大越模糊
  2. tint 模糊效果类型,它内置了很多通用的模糊效果类型,比如systemMaterialLight和systemMaterialDark,有一些是成对的dark和light,这在做亮暗模式切换时很有用
  3. blurReductionFactor区分模糊强度的数值,主要用于模拟调整效果,使模糊效果接近iOS,文档没有提到具体值的范围,默认值是4,我测试超过100就没有变化了
  4. experimentalBlurMethod,在安卓上实验性的模糊方法也就是底层到底使用何种方式让UI模糊,它有两个可选值,默认none,另一个是dimezisBlurView

就这么点配置项,我天真的以为核心是intensity强度值,结果发现设置为100效果也只是rgba,这让我很恼火,以为依赖库效果不行,就换换换,其实呢是没有设置experimentalBlurMethod:'dimezisBlurView',如果你看了我上一篇文章,里面的半透明效果使用的是@sbaiahmed1/react-native-blur,效果不正确应该还是有些配置或者使用方式不对,也不研究了,因为expo-blur满足我想要的效果。除此之外,你是不是想过做一个半透明毛玻璃效果的图片作为背景图充当blurView容器呢? 我要告诉你,这是行不通的,明明在ps中调试的不错,但是真正使用就会发现效果约等于rgba!

为了让应用中效果比较统一,我做了简单封装:

import type { FC, PropsWithChildren } from "react";
import { BlurView } from "expo-blur";
import type { StyleProp, ViewStyle } from "react-native";
import { useThemeConfig } from "@/hooks/useTheme";
interface Props extends PropsWithChildren {
    style?: StyleProp<ViewStyle>;
}

/**
 * @param children 子组件,显示在模糊层上方的实际内容
 * @returns jsx 组件
 */
const BlurContainer: FC<Props> = ({
    children, style,
}) => {
    const { tabbarBlurType } = useThemeConfig();
    return (
        <BlurView
            intensity={60}
            style={[{ flex: 1 }, style]}
            blurReductionFactor={4}
            tint={tabbarBlurType}
            experimentalBlurMethod="dimezisBlurView"
        >
            {children}
        </BlurView>
    );
};
export default BlurContainer;

让tint跟随主题切换,而且expo-blur没有强制overflow:'hidden',这在tabbar上的播放器控制栏上露头的图片布局非常有利:

Snipaste_2026-02-14_19-11-25.png

下面是没有开启experimentalBlurMethod="dimezisBlurView"的效果:

Snipaste_2026-02-14_19-14-54.png

下图是在亮模式下blur导致的异常阴影效果问题:

Snipaste_2026-02-14_19-28-56.png

这个问题应该调整intensity的值低一点应该会改善,在暗模式下不是很明显。[项目地址](expo rn: expo创建的react native的音乐播放器应用,专注视频转歌和本地歌曲播放)欢迎讨论交流!

写给年轻程序员的几点小建议

本人快 40 岁了。第一份工作是做网站编辑,那时候开始接触 jQuery,后来转做前端,一直做到现在。说实话,我对写程序谈不上特别热爱,所以技术水平一般。

年轻的时候如果做得不开心,就会直接 裸辞。不过每次裸辞的那段时间,我都会拼命学习,这对我的成长帮助其实很大。

下面给年轻人几点个人建议:

  • 不要被网上“35 岁就失业”的说法吓到。很多人是在贩卖焦虑。我都快 40 了还能拿到 offer,只是这些 offer 薪资不到 30K。
  • 基础真的很重要。我靠着基础吃香了十几年,在公司里也解决过不少疑难问题,深得领导器重。就算现在有 AI,你也要有能力判断它写得对不对,还要知道如何向 AI 提问。
  • 适不适合做程序员,其实几年之后就能看出来:你能不能当上 Leader,或者至少能不能独当一面。如果你觉得自己确实不太适合,可以趁早考虑转行,或者下班后发展一些副业。大千世界,行行出状元,能赚钱的行业很多,不必只盯着程序员这一条路。
  • 如果你觉得自己资质一般,但又真的喜欢写程序,那也没关系。《刻意练习》这本书里提到,一个人能不能成为行业顶尖,关键在于后天练习的方式,而不是天赋本身。
  • 程序员做到后面,最大的挑战其实是身体机能,而不是技术。一定要多锻炼身体。在还没有小孩之前,尽量把自己的技术水平拉到一个相对高的位置。结婚有家庭之后,学习时间会明显减少,而且年龄增长、抗压能力下降,而程序员本身又是高度用脑的职业。如果你的技术储备够高,就能在一定程度上缓冲项目压力,让自己工作更从容。
  • React、Vue、Angular 等框架都可以尝试做做项目。不同框架背后的设计思路,对思维成长很有帮助。前端很多理念本身就借鉴了后端的逻辑,多接触不同体系,会让你看问题更立体。
  • 可以在 GitHub 上做一些开源小项目。素材从哪里来?其实就来自你在公司做过的项目。把其中一块通用能力抽出来,沉淀成一个独立组件或工具库,再整理发布到 GitHub。与此同时,多写一些技术文章进行总结和输出。等到找工作时,简历里可以写上类似 "全网阅读量几万+" 这样的成果展示,这些都会成为你的加分项,让你在竞争中更有优势。
  • 35 岁以上,竞争力通常体现在两个方向:要么技术水平足够强,能够解决复杂问题;要么具备一定的管理能力,能够带团队。有人说那我以前就带过一两个徒弟,怎么办,那你得学会包装,你懂得,哈哈。
  • 35 岁以上,面试对技术广度要求更高,所以不要太深入挖掘某一项技术了。我以前认识一个领导,虽然写代码能力一般,在公司已经不写代码了,但是他的技术广度比较好,业务能力还行,虽然 40岁了 还能跳槽到比较好的广告公司,而不是靠人脉,不得不佩服。
  • 打工人比较麻烦的事就是 简历太"花"。频繁跳槽,在一个公司没干几个月就走,或者长期待业太久。如果岗位需要背调,简历造假会很麻烦,虽然有些小公司或外包公司不做背调。所以这方面简历自己要想想办法,你懂得。
  • 另外要认清一个现实:单纯打工,很难发财。 这件事越早想明白越好。多读一些关于认知、资产配置的书,弄清楚什么是资产,什么是消费。哪怕这些认知在你有生之年未必能带来巨大财富,也可以传递给下一代,让他们少走弯路。

以上只是个人经历和感受,不一定适用于所有人,但希望能给年轻的你一些参考。

React 闭包陷阱深度解析:从词法作用域到快照渲染

在 React 函数式组件的开发过程中,开发者常会遭遇一种“幽灵般”的状态异常:页面 UI 已经正确响应并更新了最新的状态值,但在 setInterval 定时器、useEffect 异步回调或原生事件监听器中,打印出的变量却始终停滞在初始值。

这种现象通常被误认为是 React 的 Bug,但其本质是 JavaScript 语言核心机制——词法作用域(Lexical Scoping)与 React 函数式组件渲染特性发生冲突的产物。在社区中,这被称为“闭包陷阱”(Stale Closure)或“过期的闭包”。

本文将摒弃表象,从内存模型与执行上下文的角度,剖析这一问题的成因及标准解决方案。

核心原理:陷阱是如何形成的

要理解闭包陷阱,必须首先理解两个核心的前置概念:JavaScript 的词法作用域与 React 的快照渲染。

1. JavaScript 的词法作用域 (Lexical Scoping)

JavaScript 中的函数在定义时,其作用域链就已经确定了。闭包是指函数可以访问其定义时所在作用域中的变量。关键在于:闭包捕获的是函数创建那一刻的变量引用。如果该变量在后续没有发生引用地址的变更(如 const 声明的原始类型),闭包内访问的永远是创建时的那个值。

2. React 的快照渲染 (Rendering Snapshots)

React 函数组件的每一次渲染(Render),本质上都是一次独立的函数调用。

  • Render 1:React 调用 Component 函数,创建了一组全新的局部变量(包括 props 和 state)。
  • Render 2:React 再次调用 Component 函数,创建了另一组全新的局部变量。

虽然两次渲染中的变量名相同(例如都叫 count),但在内存中它们是完全不同、互不干扰的独立副本。每次渲染都像是一张“快照”,固定了当时的数据状态。

3. 致命结合:持久化闭包与过期快照

当我们将 useEffect 的依赖数组设置为空 [] 时,意味着该 Effect 只在组件挂载(Mount)时执行一次。

  1. Mount (Render 1) :count 初始化为 0。useEffect 执行,创建一个定时器回调函数。该回调函数通过闭包捕获了 Render 1 作用域中的 count (0)。
  2. Update (Render 2) :状态更新,count 变为 1。React 再次调用组件函数,产生了一个新的 count 变量 (1)。
  3. Conflict:由于依赖数组为空,useEffect 没有重新运行。内存中运行的依然是 Render 1 时创建的那个回调函数。该函数依然持有 Render 1 作用域的引用,因此它看到的永远是 count: 0。

代码实战与剖析

以下是一个经典的闭包陷阱反面教材。请注意代码注释中的内存快照分析。

JavaScript

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 闭包陷阱发生地
    const timer = setInterval(() => {
      // 这里的箭头函数在 Render 1 时被定义
      // 根据词法作用域,它捕获了 Render 1 上下文中的 count 常量
      // Render 1 的 count 值为 0
      console.log('Current Count:', count); 
    }, 1000);

    return () => clearInterval(timer);
  }, []); // 依赖数组为空,导致 effect 不会随组件更新而重建

  return (
    <div>
      <p>UI Count: {count}</p>
      {/* 点击按钮触发重渲染 (Render 2, 3...) */}
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  );
}

内存行为分析:

  • Render 1: count (内存地址 A) = 0。setInterval 创建闭包,引用地址 A。
  • User Click: 触发更新。
  • Render 2: count (内存地址 B) = 1。组件函数重新执行,创建了新变量。
  • Result: 此时 UI 渲染使用的是地址 B 的数据,但后台运行的定时器依然死死抓住地址 A 不放。

解决方案:逃离陷阱的三个层级

针对不同场景,我们有三种标准的架构方案来解决此问题。

方案一:规范依赖 (The Standard Way)

遵循 React Hooks 的设计规范,诚实地将所有外部依赖填入依赖数组。

JavaScript

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Current Count:', count);
  }, 1000);

  return () => clearInterval(timer);
}, [count]); //  将 count 加入依赖
  • 原理:每当 count 变化,React 会先执行清除函数(clearInterval),然后重新运行 Effect。这将创建一个新的定时器回调,新回调捕获的是当前最新渲染作用域中的 count。
  • 代价:定时器会被频繁销毁和重建。如果计时精度要求极高,这种重置可能会导致时间偏差。

方案二:函数式更新 (The Functional Way)

如果逻辑仅仅是基于旧状态更新新状态,而不需要在副作用中读取状态值,可以使用 setState 的函数式更新。

JavaScript

useEffect(() => {
  const timer = setInterval(() => {
    //  这里的 c 是 React 内部传入的最新 state,不依赖闭包中的 count
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => clearInterval(timer);
}, []); // 依赖依然为空,但逻辑正确
  • 原理:React 允许将回调函数传递给 setter。执行时,React 内部会将最新的 State 注入该回调。这种方式绕过了当前闭包作用域的限制,直接操作 React 的状态队列。

方案三:Ref 引用 (The Ref Way)

如果必须在 useEffect 中读取最新状态,且不希望重启定时器,useRef 是最佳逃生舱。

JavaScript

const [count, setCount] = useState(0);
const countRef = useRef(count);

// 同步 Ref:每次渲染都更新 ref.current
useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  const timer = setInterval(() => {
    //  访问 ref.current。
    // ref 对象在组件生命周期内引用地址不变,但其 current 属性是可变的。
    // 闭包捕获的是 ref 对象的引用,因此总能读到最新的 current 值。
    console.log('Current Count:', countRef.current);
  }, 1000);

  return () => clearInterval(timer);
}, []); // 依赖为空,且定时器不会重启
  • 原理:useRef 创建了一个可变的容器。闭包虽然被锁死在首次渲染,但它锁死的是这个“容器”的引用。容器内部的内容(current)是随渲染实时更新的,从而实现了“穿透”闭包读取最新数据。

总结

React 闭包陷阱的本质,是持久化的闭包引用了过期的快照变量

这并非框架设计的缺陷,而是函数式编程模型与 JavaScript 语言特性的必然交汇点。作为架构师,在处理此类问题时应遵循以下建议:

  1. 诚实对待依赖数组:绝大多数闭包问题源于试图欺骗 React,省略依赖项。ESLint 的 react-hooks/exhaustive-deps 规则应当被严格遵守。
  2. 理解引用的本质:清楚区分什么是不可变的快照(State/Props),什么是可变的容器(Ref)。在跨渲染周期的副作用中共享数据,Ref 是唯一的桥梁。

useMemo 与 useCallback 的原理与最佳实践

在 React 的组件化架构中,性能优化往往不是一项大刀阔斧的重构工程,而是体现在对每一次渲染周期的精准控制上。作为一名拥有多年实战经验的前端架构师,我见证了无数应用因为忽视了 React 的渲染机制,导致随着业务迭代,页面交互变得愈发迟缓。

本文将深入探讨 React Hooks 中的两个关键性能优化工具:useMemo 和 useCallback。我们将透过现象看本质,理解它们如何解决“全量渲染”的痛点,并剖析实际开发中容易忽视的闭包陷阱。

引言:React 的渲染痛点与“摩天大楼”困境

想象一下,你正在建造一座摩天大楼(你的 React 应用)。每当大楼里的某一个房间(组件)需要重新装修(更新状态)时,整个大楼的施工队都要停下来,把整栋楼从地基到顶层重新刷一遍油漆。这听起来极度荒谬且低效,但在 React 默认的渲染行为中,这往往就是现实。

React 的核心机制是“响应式”的:当父组件的状态发生变化触发更新时,React 会默认递归地重新渲染该组件下的所有子组件。这种“全量渲染”策略保证了 UI 与数据的高度一致性,但在复杂应用中,它带来了不可忽视的性能开销:

  1. 昂贵的计算重复执行:与视图无关的复杂逻辑被反复计算。
  2. DOM Diff 工作量激增:虽然 Virtual DOM 很快,但构建和对比庞大的组件树依然消耗主线程资源。

性能优化的核心理念在于**“惰性”“稳定”**:只在必要时进行计算,只在依赖变化时触发重绘。


第一部分:useMemo —— 计算结果的缓存(值维度的优化)

核心定义

useMemo 可以被视为 React 中的 computed 计算属性。它的本质是“记忆化”(Memoization):在组件渲染期间,缓存昂贵计算的返回值。只有当依赖项发生变化时,才会重新执行计算函数的逻辑。

场景与反例解析

让我们看一个典型的性能瓶颈场景。假设我们有一个包含大量数据的列表,需要根据关键词过滤,同时组件内还有一个与列表无关的计数器 count。

未优化的代码(性能痛点)

JavaScript

import { useState } from 'react';

// 模拟昂贵的计算函数
function slowSum(n) {
  console.log('执行昂贵计算...');
  let sum = 0;
  // 模拟千万级循环,阻塞主线程
  for(let i = 0; i < n * 10000000; i++) {
    sum += i;
  }
  return sum;
}

export default function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState('');
  const [num, setNum] = useState(10);
  const list = ['apple', 'banana', 'orange', 'pear']; // 假设这是个大数组

  // 痛点 1:每次 App 渲染(如点击 count+1),filter 都会重新执行
  // 即使 keyword 根本没变
  const filterList = list.filter(item => {
    console.log('列表过滤执行');
    return item.includes(keyword);
  });
  
  // 痛点 2:每次 App 渲染,slowSum 都会重新运行
  // 导致点击 count 按钮时页面出现明显卡顿
  const result = slowSum(num);

  return (
    <div>
      <p>计算结果: {result}</p>
      {/* 输入框更新 keyword */}
      <input value={keyword} onChange={e => setKeyword(e.target.value)} />
      
      {/* 仅仅是更新计数器,却触发了上面的重计算 */}
      <button onClick={() => setCount(count + 1)}>Count + 1 ({count})</button>
      
      <ul>
        {filterList.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

在上述代码中,仅仅是为了更新 UI 上的 count 数字,主线程却被迫去执行千万次的循环和数组过滤,这是极大的资源浪费。

优化后的代码

利用 useMemo,我们可以将计算逻辑包裹起来,使其具备“惰性”。

JavaScript

import { useState, useMemo } from 'react';

// ... slowSum 函数保持不变

export default function App() {
  // ... 状态定义保持不变

  // 优化 1:依赖为 [keyword],只有关键词变化时才重算列表
  const filterList = useMemo(() => {
    console.log('列表过滤执行');
    return list.filter(item => item.includes(keyword));
  }, [keyword]);
  
  // 优化 2:依赖为 [num],点击 count 不会触发此处的昂贵计算
  const result = useMemo(() => {
    return slowSum(num);
  }, [num]);

  return (
    // ... JSX 保持不变
  );
}

底层解析

useMemo 利用了 React Fiber 节点的内部存储(memoizedState)。在渲染过程中,React 会取出上次存储的 [value, deps],并将当前的 deps 与上次的进行浅比较(Shallow Compare)。

  • 如果依赖项完全一致,直接返回存储的 value,跳过函数执行。
  • 如果依赖项发生变化,执行函数,更新缓存。

第二部分:useCallback —— 函数引用的稳定(引用维度的优化)

核心定义

useCallback 用于缓存“函数实例本身”。它的作用不是为了减少函数创建的开销(JS 创建函数的开销极小),而是为了保持函数引用地址的稳定性,从而避免下游子组件因为 props 变化而进行无效重渲染。

痛点:引用一致性问题

在 JavaScript 中,函数是引用类型,且 函数 === 对象。
在 React 函数组件中,每次重新渲染(Re-render)都会重新执行组件函数体。这意味着,定义在组件内部的函数(如事件回调)每次都会被重新创建,生成一个新的内存地址。

比喻:咖啡店点单

为了理解这个概念,我们可以通过“咖啡店点单”来比喻:

  • 未优化的情况:你每次去咖啡店点单,都派一个替身去。虽然替身说的台词一模一样(“一杯拿铁,加燕麦奶”),但对于店员(子组件)来说,每次来的都是一个陌生人。店员必须重新确认身份、重新建立订单记录。这就是子组件因为函数引用变化而被迫重绘。
  • 使用 useCallback:你本人亲自去点单。店员一看:“还是你啊,老样子?”于是直接复用之前的订单记录,省去了沟通成本。这就是引用稳定带来的性能收益。

实战演示:父子组件的协作

失效的优化(反面教材)

JavaScript

import { useState, memo } from 'react';

// 子组件使用了 memo,理论上 Props 不变就不应该重绘
const Child = memo(({ handleClick }) => {
  console.log('子组件发生渲染'); // 目标:不希望看到这行日志
  return <button onClick={handleClick}>点击子组件</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  // 问题所在:
  // 每次 App 渲染(点击 count+1),handleClick 都会被重新定义
  // 生成一个新的函数引用地址 (fn1 !== fn2)
  const handleClick = () => {
    console.log('子组件被点击');
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>父组件 Count + 1</button>
      
      {/* 
        虽然 Child 加了 memo,但 props.handleClick 每次都变了
        导致 Child 认为 props 已更新,强制重绘
      */}
      <Child handleClick={handleClick} />
    </div>
  );
}

正确的优化

我们需要使用 useCallback 锁定函数的引用,并配合 React.memo 使用。

JavaScript

import { useState, useCallback, memo } from 'react';

const Child = memo(({ handleClick }) => {
  console.log('子组件发生渲染'); 
  return <button onClick={handleClick}>点击子组件</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  // 优化:依赖项为空数组 [],表示该函数引用永远不会改变
  // 无论 App 渲染多少次,handleClick 始终指向同一个内存地址
  const handleClick = useCallback(() => {
    console.log('子组件被点击');
  }, []); 

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>父组件 Count + 1</button>
      
      {/* 
        现在:
        1. handleClick 引用没变
        2. Child 组件检测到 props 未变
        3. 跳过渲染 -> 性能提升
      */}
      <Child handleClick={handleClick} />
    </div>
  );
}

关键结论

useCallback 必须配合 React.memo 使用
如果在没有 React.memo 包裹的子组件上使用 useCallback,不仅无法带来性能提升,反而因为增加了额外的 Hooks 调用和依赖数组对比,导致性能变为负优化。


第三部分:避坑指南 —— 闭包陷阱与依赖项管理

在使用 Hooks 进行优化时,开发者常遇到“数据不更新”的诡异现象,这通常被称为“陈旧闭包”(Stale Closures)。

闭包陷阱的概念

Hooks 中的函数会捕获其定义时的作用域状态。如果依赖项数组没有正确声明,Memoized 的函数就会像一个“时间胶囊”,永远封存了旧的变量值,无法感知外部状态的更新。

典型场景与解决方案

场景:定时器或事件监听

假设我们希望在 useEffect 或 useCallback 中打印最新的 count。

JavaScript

// 错误示范
useEffect(() => {
  const timer = setInterval(() => {
    // 陷阱:这里的 count 永远是初始值 0
    // 因为依赖数组为空,闭包只在第一次渲染时创建,捕获了当时的 count
    console.log('Current count:', count); 
  }, 1000);
  return () => clearInterval(timer);
}, []); // ❌ 依赖项缺失

解决方案

  1. 诚实地填写依赖项(不推荐用于定时器):
    将 [count] 加入依赖。但这会导致定时器在每次 count 变化时被清除并重新设定,违背了初衷。

  2. 函数式更新(推荐):
    如果只是为了设置状态,使用 setState 的回调形式。

    JavaScript

    //  不需要依赖 count 也能实现累加
    setCount(prevCount => prevCount + 1);
    
  3. 使用 useRef 逃生舱(推荐用于读取值):
    useRef 返回的 ref 对象在组件整个生命周期内保持引用不变,且 current 属性是可变的。

    codeJavaScript

    const countRef = useRef(count);
    
    // 每次渲染更新 ref.current
    useEffect(() => {
      countRef.current = count;
    });
    
    useEffect(() => {
      const timer = setInterval(() => {
        //  总是读取到最新的值,且不需要重建定时器
        console.log('Current count:', countRef.current);
      }, 1000);
      return () => clearInterval(timer);
    }, []); // 依赖保持为空
    

总结:三兄弟的协作与克制

在 React 性能优化的工具箱中,我们必须清晰区分这“三兄弟”的职责:

  1. useMemo缓存值。用于节省 CPU 密集型计算的开销。
  2. useCallback缓存函数。用于维持引用稳定性,防止下游组件无效渲染。
  3. React.memo缓存组件。用于拦截 Props 对比,作为重绘的最后一道防线。

架构师的建议:保持克制

性能优化并非免费午餐。useMemo 和 useCallback 本身也有内存占用和依赖对比的计算开销。

请遵循以下原则:

  • 不要预先优化:不要默认给所有函数套上 useCallback。
  • 不要优化轻量逻辑:对于简单的 a + b 或原生 DOM 事件(如 
    ),原生 JS 的执行速度远快于 Hooks 的开销。
  • 先定位,后治理:使用 React DevTools Profiler 找出真正耗时的组件,再针对性地使用上述工具进行“外科手术式”的优化。

掌握了这些原理与最佳实践,你便不再是盲目地编写 Hooks,而是能够像架构师一样,精准控制应用的每一次渲染脉搏。

html翻页时钟 效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Flip Clock</title>
  <style>
    body {
      background: #111;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: 'Courier New', monospace;
      color: white;
    }

    .clock {
      display: flex;
      gap: 20px;
    }

    .card-container {
      width: 80px;
      height: 120px;
      position: relative;
      perspective: 500px;
      background: #2c292c;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }

    /* 中间分割线 */
    .card-container::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 4px;
      background: #120f12;
      z-index: 10;
    }

    .card-item {
      position: absolute;
      width: 100%;
      height: 50%;
      left: 0;
      overflow: hidden;
      background: #2c292c;
      color: white;
      text-align: center;
      font-size: 64px;
      font-weight: bold;
      backface-visibility: hidden;
      transition: transform 0.4s ease-in-out;
    }

    /* 下层数字:初始对折(背面朝上) */
    .card1 { /* 下层上半 */
      top: 0;
      line-height: 120px; /* 整体高度对齐 */
    }
    .card2 { /* 下层下半 */
      top: 50%;
      line-height: 0;
      transform-origin: center top;
      transform: rotateX(180deg);
      z-index: 2;
    }

    /* 上层数字:当前显示 */
    .card3 { /* 上层上半 */
      top: 0;
      line-height: 120px;
      transform-origin: center bottom;
      z-index: 3;
    }
    .card4 { /* 上层下半 */
      top: 50%;
      line-height: 0;
      z-index: 1;
    }

    /* 翻页动画触发 */
    .flip .card2 {
      transform: rotateX(0deg);
    }
    .flip .card3 {
      transform: rotateX(-180deg);
    }

    /* 冒号分隔符 */
    .colon {
      font-size: 64px;
      display: flex;
      align-items: center;
      color: #aaa;
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="card-container flip" id="hour" data-number="00">
      <div class="card1 card-item">00</div>
      <div class="card2 card-item">00</div>
      <div class="card3 card-item">00</div>
      <div class="card4 card-item">00</div>
    </div>

    <div class="colon">:</div>

    <div class="card-container flip" id="minute" data-number="00">
      <div class="card1 card-item">00</div>
      <div class="card2 card-item">00</div>
      <div class="card3 card-item">00</div>
      <div class="card4 card-item">00</div>
    </div>

    <div class="colon">:</div>

    <div class="card-container flip" id="second" data-number="00">
      <div class="card1 card-item">00</div>
      <div class="card2 card-item">00</div>
      <div class="card3 card-item">00</div>
      <div class="card4 card-item">00</div>
    </div>
  </div>

  <script>
    function setHTML(dom, nextValue) {
      const curValue = dom.dataset.number;
      if (nextValue === curValue) return;

      // 更新 DOM 结构:下层为新值,上层为旧值
      dom.innerHTML = `
        <div class="card1 card-item">${nextValue}</div>
        <div class="card2 card-item">${nextValue}</div>
        <div class="card3 card-item">${curValue}</div>
        <div class="card4 card-item">${curValue}</div>
      `;

      // 触发重绘以重启动画
      dom.classList.remove('flip');
      void dom.offsetWidth; // 强制重排
      dom.classList.add('flip');

      dom.dataset.number = nextValue;
    }

    function updateClock() {
      const now = new Date();
      const h = String(now.getHours()).padStart(2, '0');
      const m = String(now.getMinutes()).padStart(2, '0');
      const s = String(now.getSeconds()).padStart(2, '0');

      setHTML(document.getElementById('hour'), h);
      setHTML(document.getElementById('minute'), m);
      setHTML(document.getElementById('second'), s);
    }

    // 初始化
    updateClock();
// setTimeout(updateClock,1000)

    setInterval(updateClock, 1000);
  </script>
</body>
</html>

在这里插入图片描述 这个翻页时钟(Flip Clock)通过 CSS 3D 变换 + 动画类切换 + DOM 内容动态更新 的方式,模拟了类似机械翻页牌的效果。下面从结构、样式和逻辑三方面详细分析其实现原理:


🔧 一、HTML 结构设计

每个时间单位(小时、分钟、秒)由一个 .card-container 容器表示,内部包含 4 个 .card-item 元素

<div class="card-container" id="second">
  <div class="card1">00</div> <!-- 下层上半 -->
  <div class="card2">00</div> <!-- 下层下半(初始翻转180°)-->
  <div class="card3">00</div> <!-- 上层上半(当前显示)-->
  <div class="card4">00</div> <!-- 上层下半 -->
</div>

四个卡片的作用:

  • .card3.card4:组成当前显示的数字(上半+下半),正常显示。
  • .card1.card2:组成即将翻出的新数字,但初始时 .card2rotateX(180deg) 翻转到背面(不可见)。
  • 中间有一条 ::before 伪元素作为“折痕”,增强翻页视觉效果。

🎨 二、CSS 样式与 3D 翻转原理

关键 CSS 技术点:

1. 3D 空间设置

.card-container {
  perspective: 500px; /* 创建 3D 视角 */
}
  • perspective 让子元素的 3D 变换有景深感。

2. 上下两半的定位与旋转轴

.card2 {
  transform-origin: center top;
  transform: rotateX(180deg); /* 初始翻到背面 */
}
.card3 {
  transform-origin: center bottom;
}
  • .card2顶部边缘旋转 180°,藏在下方背面。
  • .card3底部边缘旋转,用于向上翻折。

3. 翻页动画(通过 .flip 类触发)

.flip .card2 {
  transform: rotateX(0deg); /* 展开新数字下半部分 */
}
.flip .card3 {
  transform: rotateX(-180deg); /* 当前数字上半部分向上翻折隐藏 */
}
  • 动画持续 0.4s,使用 ease-in-out 缓动。
  • .card1.card4 始终保持静态,作为背景支撑。

视觉效果

  • 上半部分(.card3)向上翻走(像书页翻开)
  • 下半部分(.card2)从背面转正,露出新数字
  • 中间的“折痕”让翻页更真实

⚙️ 三、JavaScript 动态更新逻辑

核心函数:setHTML(dom, nextValue)

步骤分解:

  1. 对比新旧值:如果相同,不更新(避免无谓动画)。
  2. 重写整个容器的 HTML
    • 下层(新值).card1.card2 显示 nextValue
    • 上层(旧值).card3.card4 显示 curValue
  3. 触发动画
    dom.classList.remove('flip');
    void dom.offsetWidth; // 强制浏览器重排(关键!)
    dom.classList.add('flip');
    
    • 先移除 .flip,再强制重排(flush styles),再加回 .flip,确保动画重新触发。
  4. 更新 data-number 保存当前值。

时间更新:

  • 每秒调用 updateClock(),获取当前时分秒(两位数格式)。
  • 分别调用 setHTML 更新三个容器。

🌟 四、为什么能实现“翻页”错觉?

元素 初始状态 翻页后状态 视觉作用
.card3 显示旧数字上半 向上翻转 180° 隐藏 模拟“翻走”的上半页
.card2 旧数字下半(翻转180°藏起) 转正显示新数字下半 模拟“翻出”的下半页
.card1 / .card4 静态背景 不变 提供视觉连续性

💡 关键技巧

  • 利用 两个完整数字(新+旧)叠加,通过控制上下半部分的旋转,制造“翻页”而非“淡入淡出”。
  • 强制重排(offsetWidth 是确保 CSS 动画每次都能重新触发的经典 hack。

✅ 总结

这个 Flip Clock 的精妙之处在于:

  1. 结构设计:4 个卡片分工明确,上下层分离。
  2. CSS 3D:利用 rotateX + transform-origin 实现真实翻页。
  3. JS 控制:动态替换内容 + 巧妙触发动画。
  4. 性能优化:仅在值变化时更新,避免无效渲染。

这是一种典型的 “用 2D DOM 模拟 3D 物理效果” 的前端动画范例,既高效又视觉惊艳。

❌