为什么你的代码越改越乱？不是不会写，是少了这个能力

   页面A（商品列表）              页面B（我的收藏）
┌─────────────────┐         ┌─────────────────┐
│ 商品名  |  ¥价格 │         │ 商品名  |  ¥价格 │
│ 库存:10 | [收藏] │         │ 收藏于:3天前|[删] │
└─────────────────┘         └─────────────────┘

// ❌ 一开始挺美好
<ProductList
  items={products}
  showPrice={true}
  showInventory={true}
  showFavoriteBtn={true}
  showRemoveBtn={false}
  showLastViewTime={false}
// ……三个月后变成了这样：
// showShopExclusive={...}
// showCompareBtn={...}
// highlightStyle={...}
// 数了数，props 整整 37 个
/>

// ✅ 各写各的，反而清清爽爽
// HomepageList.jsx —— 首页商品列表
function HomepageList({ products }) {
return (
    <div>
      {products.map((p) => (
        <div key={p.id}>
          <h3>{p.name}</h3>
          <span>¥{p.price}</span>
          <span>库存：{p.stock}</span>
          <button>收藏</button>
        </div>
      ))}
    </div>
  );
}

// FavoritesList.jsx —— 我的收藏
function FavoritesList({ products }) {
return (
    <div>
      {products.map((p) => (
        <div key={p.id}>
          <h3>{p.name}</h3>
          <span>收藏于：{p.addedDate}</span>
          <span>我的笔记：{p.myNote}</span>
          <button>删除</button>
        </div>
      ))}
    </div>
  );
}

// 首页
if (user.lastPurchaseTime) {
  showPromotion();        // 买过的用户才给看优惠
}

// 商品详情页
if (Date.now() - user.lastPurchaseTime > 90 * 天) {
  showBadge('热门');       // 90 天没买的，给看"热门"标签
}

// 搜索结果页
if (user.lastPurchaseTime) {
  showPersonalizedRecs(); // 买过的才推个性化
}

// 邮件通知
if (Date.now() - user.lastPurchaseTime > 180 * 天) {
  sendRecallEmail();      // 180 天没买的，发召回邮件
}

// 活动页
const discount = user.lastPurchaseTime ? 0.9 : 0.95;

// userStatus.js —— 「用户状态」的唯一定义处
// 整个项目，只在这里说清楚"什么叫活跃用户"

exportfunction isActiveUser(user) {
if (!user.lastPurchaseTime) returnfalse;
returnDate.now() - user.lastPurchaseTime < 90 * 24 * 60 * 60 * 1000;
}

exportfunction isInactiveUser(user) {
return !isActiveUser(user) && user.lastPurchaseTime;
}

// 首页
if (isActiveUser(user)) showPromotion();

// 商品详情页
if (isInactiveUser(user)) showBadge('热门');

// 邮件通知
if (isInactiveUser(user)) sendRecallEmail();

坏判断：逻辑散落五处 → 改五个地方 → 一定漏一个 → 线上事故
好判断：逻辑收归一处 → 改一个地方 → 全自动同步 → 安心下班

// HomePage.jsx —— 啥都往里塞
function HomePage() {
  useEffect(() => {
    fetch('/api/products')           // API 调用在这
      .then((r) => r.json())
      .then((data) => {
        // 业务逻辑也糊在这
        let result = data.filter((p) => {
          if (currentUser.vip) {
            return p.price < 1000;   // VIP 看贵的
          } else {
            return p.price < 500;    // 普通用户看便宜的
          }
        });

        // 价格处理还糊在这
        result = result.map((p) => ({
          ...p,
          showPrice: currentUser.vip ? p.price * 0.9 : p.price,
        }));

        setProducts(result);
      });
  }, []);

return<div>...</div>;
}

// 第一步：API 调用，拎出来
asyncfunction getProducts() {
return fetch('/api/products').then((r) => r.json());
}

// 第二步：筛选逻辑，拎出来
function filterByUserType(products, user) {
const limit = user.vip ? 1000 : 500;
return products.filter((p) => p.price < limit);
}

// 第三步：价格逻辑，拎出来
function applyDiscount(product, user) {
return {
    ...product,
    showPrice: user.vip ? product.price * 0.9 : product.price,
  };
}

// 组件本身，瞬间清爽
function HomePage() {
  useEffect(() => {
    getProducts()
      .then((data) => filterByUserType(data, currentUser))
      .then((data) => data.map((p) => applyDiscount(p, currentUser)))
      .then(setProducts);
  }, []);

return<div>...</div>;
}

API 路径变了？   → 改 getProducts() 一个函数        ✅
VIP 折扣调了？   → 改 applyDiscount() 一个函数      ✅
想加缓存？       → 在 getProducts() 里加几行        ✅

坏判断：全糊一起  →  写得快，但一碰就碎
好判断：各归各位  →  写得一样快，但稳如老狗

// 表单引擎 —— 3000+ 行，条件分支密密麻麻
const formConfig = {
fields: [
    {
      name: 'type',
      type: 'select',
      showIf: (data) => data.step === 1,            // 条件 1
    },
    {
      name: 'price',
      type: 'number',
      showIf: (data) => data.type === 'electronics', // 条件 2
      validate: (val, data) => {
        if (data.type === 'electronics') {
          // 又是一堆条件……
        }
      },
    },
    // ……还有几十个字段，每个都带一串条件
  ],
};

// 最基础的小积木，几乎永远不用改
function TextField({ label, value, onChange }) {
  return (
    <div>
      <label>{label}</label>
      <input value={value} onChange={(e) => onChange(e.target.value)} />
    </div>
  );
}

function SelectField({ label, options, value, onChange }) {
  return (
    <div>
      <label>{label}</label>
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        {options.map((opt) => (
          <option key={opt}>{opt}</option>
        ))}
      </select>
    </div>
  );
}

// 电子产品表单 —— 自己的逻辑自己管
function ElectronicsForm({ onSubmit }) {
  const [form, setForm] = useState({ type: 'electronics', price: '' });

  return (
    <form onSubmit={onSubmit}>
      <SelectField
        label="类型"
        options={['electronics', 'clothing']}
        value={form.type}
        onChange={(val) => setForm({ ...form, type: val })}
      />
      <TextField
        label="价格"
        value={form.price}
        onChange={(val) => setForm({ ...form, price: val })}
      />
      <button type="submit">提交</button>
    </form>
  );
}

function ClothingForm({ onSubmit }) {
  // 服装表单，自己的逻辑，自己写
}

坏判断：为想象中的需求造轮子 → 过度设计 → 越改越难
好判断：等真实需求出现了再抽 → 刚刚好 → 随时能扩

1. 这个"像"，是稳定的吗？
   ├─ 只是暂时碰巧像？  → 别合并，各写各的
   └─ 是长期的固定模式？ → 可以考虑共用

2. 这段逻辑，会到处重复出现吗？
   ├─ 第一次写        → 先就地写，别急
   ├─ 第二次写        → 开始警觉，考虑收口
   └─ 第三次写        → 别犹豫了，抽出来统一管

3. 万一决定错了，代价多大？
   ├─ 巨大（改不动）   → 慎重，多验证
   ├─ 中等           → 留条"后悔药"，方便回退
   └─ 很小（随手改）   → 大胆做，错了再说