React Props 负优化：边用边忘解构对象

—— 从“玄学重渲染”到“可维护性崩塌”一次解决

一、为什么“未解构”是隐形炸弹？

1. 子组件被迫引用整个对象
   只改了 user.name，但 user 引用没变 → React.memo 失效。

2. 无法使用 ESLint 规则
   react/destructuring-assignment 直接罢工。

3. 可读性差
   模板里 props.obj.xxx 层层点，重构时“不敢动”。

---

二、3 个高频翻车现场

1️⃣ 子组件“假纯”——引用未变但内容变

const Parent = () => {
  const [user, setUser] = useState({ id: 1, name: 'Tom' });
  return <Child user={user} />;
};

const Child = React.memo(({ user }) => {
  console.log('Child render', user.name);
  return <span>{user.name}</span>;
});

问题：只改 user.name 但引用不变 → memo 无效。

修复：解构 + 只传必要字段

const Child = React.memo(({ name }) => <span>{name}</span>);
// 父组件
<Child name={user.name} />

---

2️⃣ 深层链式访问，重构即爆炸

function Card(props) {
  return (
    <div>
      {props.data.user.profile.avatar.url}   {/* ❌ 5 层链 */}
    </div>
  );
}

修复：解构 + 默认值

function Card({ avatarUrl = '' }) {
  return <img src={avatarUrl} />;
}
// 父组件
<Card avatarUrl={data.user.profile.avatar.url} />

---

3️⃣ 忘记默认值，空链报错

function Avatar({ user }) {
  return <img src={user.profile.avatar.url} />;   // ❌ user 为空即崩
}

修复：解构时给兜底

function Avatar({ avatarUrl = '' }) {
  return <img src={avatarUrl} />;
}
// 父组件
<Card avatarUrl={data?.user?.profile?.avatar?.url ?? ''} />

---

三、ESLint 自动 enforcing

安装插件：

npm i -D eslint-plugin-react

规则：

{
  "rules": {
    "react/destructuring-assignment": ["warn", "always"]
  }
}

保存时自动修复：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

---

四、性能对比（DevTools Profiler）

场景	未解构	解构 + memo	提升
只改 user.name	子组件重渲染	不渲染	0 → 跳过

---

五、一句话总结

「先解构，再传入，只给必要，不给整机。」
让 React.memo 真正生效，代码也更易读、易重构。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《 React开发实践：掌握Redux与Hooks应用 》