一次一次的代价

你需要给十个人打电话，通知同一件事。

一个一个打，每次三分钟，总共三十分钟。或者建个群，一次搞定，三十秒。

大多数人选择一个一个打。不是因为不知道建群更快，而是因为「一个一个」太自然了。

表格里的陷阱

表格有一百行数据。每一行需要显示一个关键词的源文本。

最直接的写法：在每一行的单元格里，调用一次 useKeyword hook，获取那个关键词的文本。

function TableRow({ keywordId }) {
  const keyword = useKeyword(keywordId)
  return <td>{keyword.text}</td>
}

这代码看起来没问题。逻辑清晰，职责单一。但运行起来，一百行表格就是一百次查询。

这是 N+1 查询问题。看起来像技术问题，其实是思维问题。

一次一次的惯性

为什么会写出这样的代码？

因为「一个一个处理」是人的本能思维模式。看到一行数据，就想着处理这一行。看到下一行，再处理下一行。

这种思维简单、直接、符合直觉。就像给十个人打电话，第一个打完再打第二个。

但计算机不是人。计算机擅长的是批量处理，不是一个一个来。

人的思维模式和计算机的工作模式，在这里产生了分歧。

聚合的智慧

解决方法很简单：不要在每一行里查询，在表格外面，一次性把所有关键词都查出来。

function Table({ rows }) {
  const keywordIds = rows.map(row => row.keywordId)
  const keywords = useKeywords(keywordIds) // 一次查询获取所有

  return rows.map(row => (
    <TableRow keyword={keywords[row.keywordId]} />
  ))
}

从一百次查询，变成一次查询。

这不是优化，这是换了一种思考方式。从「一个一个处理」变成「先收集，再处理」。

聚合不是技巧，是视角的转换。从局部看到整体，从单个看到批量。

代价的叠加

一次查询的代价很小。十毫秒，感觉不到。

但一次变成一百次，十毫秒变成一秒。一秒在网页加载里，用户已经开始感到焦虑。

代价会叠加。一次一次的便利，累积起来就是系统的瓶颈。

这不只是数据库查询。所有的重复操作都是这样：单次无害，累积有毒。

为什么这么难察觉

因为开发时测试数据少。

十行数据的表格，一百毫秒加载完成，感觉不到问题。上线后，用户的表格有一千行，卡了十秒。

小规模下正常的东西，大规模下崩溃。这是很多性能问题的共性。

单个单元格的逻辑没错，但把这个逻辑放进表格里重复一千次，就错了。

局部正确不等于整体正确。

最后

一次一次地做事，是人的直觉。但直觉不总是对的。

有些事情，需要先退一步，看到整体，然后批量处理。

表格是这样，数据库查询是这样，很多事情都是这样。

不要被「一个一个」的便利蒙蔽。累积起来，代价可能比你想象的大得多。

相关阅读：