⚡ 30 秒速记

• 中间件把核心流程包成可组合的步骤
• Koa 围绕请求上下文，await next() 形成前后层次
• Redux 围绕派发，next(action) 进入下一层
• 不继续传递就截断，重复传递可能重复执行
• 返回值与异常也属于中间件契约

中间件像处理流程上的一组关卡，每层决定做什么、是否继续，以及结束后还要补什么。 Koa 等待下游后可以回来统一记录耗时和处理错误，形成由外到内再返回的顺序。Redux 则包装派发，日志、异步函数等能力在动作进入状态计算前接管。两者共享函数组合思路，但上下文、返回值和异步约定不同，不能只凭都有 next 就认为行为一样。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

以 Koa 为代表的 Node.js 中间件化设计

说到中间件，很多开发者都会想到 Koa.js，其中间件设计无疑是前端中间件思想的典型代表之一。我们先来剖析 Koa.js 的设计和实现。

先来看一下 Koa.js 中间件的实现和应用：

// 最外层中间件，可以用于兜底 Koa 全局错误
app.use(async (ctx, next) => {
  try {
    // console.log('中间件 1 开始执行')
    // 执行下一个中间件
    await next();
    // console.log('中间件 1 执行结束')
  } catch (error) {
    console.log(`[koa error]: ${error.message}`)
  }
});
// 第二层中间件，可以用于日志记录
app.use(async (ctx, next) => {
  // console.log('中间件 2 开始执行')
  const { req } = ctx;
  console.log(`req is ${JSON.stringify(req)}`);
  await next();
  console.log(`res is ${JSON.stringify(ctx.res)}`);
  // console.log('中间件 2 执行结束')
});

如上代码，我们看 Koa 实例，通过use方法注册和串联中间件，其源码实现部分精简表述为：

use(fn) {
    this.middleware.push(fn);
    return this;
}

如上代码，我们的中间件被存储进this.middleware数组中，那么中间件是如何被执行的呢？参考下面源码：

// 通过 createServer 方法启动一个 Node.js 服务
listen(...args) {
    const server = http.createServer(this.callback());
    return server.listen(...args);
}