看懂 AI 写的代码

上一篇你学会了怎么提需求。但当 AI 把代码"唰唰唰"写出来，你可能面临一个新问题：这一大坨，我看不懂啊。

这篇就解决这个问题。我们的目标不是教你"会写"代码，而是教你**"看懂"**——知道 AI 写的每段大概在干什么、怎么判断对不对。

先建立一个心态

很多人看到 AI 写的代码就发怵："这我哪看得懂。" 其实你不需要每一行都懂。看代码就像看一篇文章：

你不需要认识每个字，也能知道文章在讲什么
你不需要会写诗，也能判断一首诗写得好不好

看代码也一样：抓主干，不纠结细节。具体到看不懂的地方，让 AI 解释就行。

看懂代码的三层

一段代码，你可以分三层去看，从粗到细：

第一层：这段代码"做什么"（最粗）

先扫一眼，知道这段代码的整体用途。通常看函数名、组件名、注释就能猜个大概。

function LoginPage() {
  ...
}

看到 LoginPage，你就知道这是个"登录页"。哪怕里面一行不懂，你也知道它的角色。

第二层：它"由哪些部分组成"（中等）

再看结构，这段代码由哪些块拼起来的。比如一个登录页通常有：

LoginPage
├── 一个标题
├── 一个表单（含邮箱、密码输入框）
├── 一个登录按钮
└── 点击按钮的处理逻辑

你不用懂每一块怎么实现，但要能把代码对应到这些功能块。

第三层：具体怎么实现的（最细）

这就是细节层——某个样式怎么写的、某个状态怎么变的。这一层看不懂完全没关系，需要时再让 AI 逐行讲。

怎么让 AI 给你解释

看不懂怎么办？直接让 AI 解释。这是 Agent 时代最自然的学习方式。几个好用的提问：

"逐行解释一下这段代码在做什么"
"这个 useState 是干嘛的？为什么要有它？"
"这段代码为什么要在前面加 await？"
"如果我想把按钮换成红色，应该改哪里？"

你会发现，AI 的解释比大多数教程都讲得清楚——因为它是对着你眼前的这段代码讲，不是泛泛而谈。

一个实战例子

假设 AI 给你写了这么一段（不用怕，跟着三层法看）：

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4">
      <p className="text-xl">点击了 {count} 次</p>
      <button
        onClick={() => setCount(count + 1)}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        点我+1
      </button>
    </div>
  );
}

第一层（做什么）：Counter——这是个计数器。

第二层（组成部分）：

一行文字"点击了 X 次"
一个按钮"点我+1"

第三层（细节）：

useState 是 React 管理状态的东西（不懂没关系，记住它是"记住数字"的就行）
onClick 是"点击时干什么"
className 那一串是样式（蓝色背景、白字、圆角）

看，三层法走下来，你已经知道这段代码大概在做什么、长什么样了。这就是"看懂"。

怎么判断 AI 写得对不对

看懂了还不够，你还得判断它写得对不对。这是新手最容易忽略的一步——AI 写完直接信，结果上线一堆 bug。

判断对错有三个层次：

1. 跑起来看效果

最直接的验收方式：运行它，看效果是不是你要的。

想要蓝色按钮，跑出来是绿色——错的
想要点击+1，点了没反应——错的
想要居中显示，结果靠左——错的

你不用懂代码，也能通过"看效果"判断对错。这是最强大的验收武器。

2. 想几个边界情况

AI 经常忘了处理特殊情况。自己想几个：

输入框什么都不填，按钮能点吗？应该不能
数字输成负数会怎样？应该提示错误
网络断了，会卡死还是友好提示？

把这些"如果不……会怎样"丢给 AI，让它补全。

3. 让 AI 自查

你还可以反过来让 AI 检查自己：

"这段代码有没有潜在的问题？"
"有没有忘记处理什么情况？"
"有没有更简洁的写法？"

AI 自查虽然不能 100% 持平人类，但能发现大部分明显问题。

建立一个验收清单

养成一个习惯——AI 每次给你代码后，过一遍这几问：

跑起来，效果是我要的吗？
关键功能都实现了吗？
边界情况处理了吗？
有没有报错或警告？

这几步走完，你才能"放心地用"。Agent 时代，"会验收"比"会写"重要得多。

本篇小结

看代码分三层：做什么 → 由什么组成 → 怎么实现（细节不懂没关系）
看不懂就让 AI 解释，它对着你的代码讲，比教程清楚
判断对错最强大的武器：跑起来看效果
别忘了想边界情况（空输入、错误值、断网）
让 AI 自查潜在问题
核心习惯：每次 AI 给完代码，过一遍验收清单

下一篇，我们聊一个你 100% 会遇到的情况：AI 写的代码报错了，怎么办？