React 里只有一种通信方向：

父组件 ──props──→ 子组件
子组件 ──调用回调──→ 父组件

Props 不是双向管道。 子组件永远不能直接改父组件的 state。简单讲的“子传父”，本质是父把自己的函数通过 props 提前给了子。子需要时调用这个函数，

再看打个比方。父把自家钥匙交给子，子开门用的还是父的钥匙、改的还是父的门。钥匙是父给的，门也一直是父的。

从一个表单需求开始

再看需求很简单。页面上显示一个名字，下面有一个编辑区，修改后点确认更新名字。

┌─────────────────────────┐
│ hello 张三 │ ← 展示当前名字
└─────────────────────────┘
┌─────────────────────────┐
│ Update name: │ ← 编辑区
│ │
└─────────────────────────┘

这个需求有三种写法，依次是大多数人的学习方法。

从写法一来看，传原始事件对象

刚开始学 React 时很容易写成这样——子组件把 onChange 传上来的事件对象原封不动地交给父组件：

// 子组件
interface Props {
username: string;onChange: => void;}
const NameEditComponent: React.FC = => {
return ;}，// 父组件
const App = => {
const = useState;const handleChange = => {
setName;// 父必须自己从 event 对象里掏值
};return ;}，

这有什么不好？

1. 痛点： 父组件被迫 import React.ChangeEvent但这个事件类型只跟 有关，理论上父不应该关心。
2. 痛点： 父的 handleChange 要自己从 e.target.value 提取值，这是“脏活”。
3. 痛点： 如果子组件以后换成 父组件的类型也要改。

再看写法二。子组件自己持有状态

既然中间编辑过程父组件不需要知道，那不如让子组件自己管理？

// 子组件
interface Props {
initialUserName: string;// 初始值，只读一次
onNameUpdated: => void;// 提交时才通知父
}
const NameEditComponent: React.FC = => {
const = useState;const onChange = => {
setEditingName;// 自己改自己的 state
};const onNameSubmit = => {
props.onNameUpdated;// 点按钮才告诉父
};说起来，return (
<>
Update name:

Change
);}，// 父组件
const App = => {
const = useState;return (
<>
至于名字，{name}
 setName}
/>
);}，

好在哪？

• #1 性能优势： 每次按键只重渲染子组件，父组件完全不受影响。
• #2 清晰职责： 父只关心结果，编辑细节全部封装在子里。
• #3 可复用性： 子成为独立的小模块，可在别处直接使用。

有什么局限？

• #1 痛点： 父拿不到“编辑中的值”。如果想做实时预览、实时校验，就做不到了。
• #2 痛点： 多个兄弟组件想共享编辑中的值也无能为力。

写法三这方面，状态提高

If parent needs to know editing value in real‑time—e.g.,to show length。enable/disable button,or preview—move state up to parent:

// 子组件 —— 完全无状态，只负责展示 + 转发事件
interface Props {
editingName: string;onEditingNameUpdated: => void;onNameUpdated: => void;disable: boolean;}
const NameEditComponent: React.FC = => {
const onChange = => {
props.onEditingNameUpdated;// 提取好值，父只拿到干净的 string
};return (
<>
Update name:

Submit
);}，// 父组件 —— 持有所有状态
const App = => {
const = useState;其实，const = useState;return (
<>
再看名字，{name}
 setName}
disable={editingName === '' || editingN ame === name}
/>
);}，

状态提高的本质

把 `useState`   ✂️ 剪切 → 粘贴 →  . 子变成纯粹的「展示」层。只接受 props，不再自行保存 UI 状态。其实，

每次按键，到底发生了什么？老实说，

① 在 ⟨input⟩ 中敲 “L”
↓② 浏览器触发 onChange → 子调用 props.onEditingN ameUpdated
↓③ 父执行 setEditingN ame → state 从 “张三” → “张三L”
↓④ 父重新渲染 → ⟨Nam eEditComponent editingN ame="张三L" …不过，/⟩
↑ 新值通过 props
传给子
↓⑤ 子收到新 props → 重渲染 ⟨input value="张 三L" /⟩ → 浏览器 DOM 更新。你看到 “张 三L”

"受控": input 的 value 完全由 React 的 props 控制。若没有经过这条「onChange → setState → re‑render」链路，输入框根本不会改变。

三种写法，什么时候用哪个？

	写法一	写法二	写法三
State 在哪?	子	子	父 + 子
每次按键是否通知父?	✅	❌	✅
父能感知编辑过程?说起来，	✅	❌	✅
每次按键重渲染范围?	父+所有子		父+所有子

实际项目中几乎不推荐使用写法一，它只是“状态提高”的前身。

# 实战建议 #

1. #1 首选自治#：Poor performance?No—因为只有最小粒度重渲染；代码易维护，适合“只在提交时才需要告知” 的场景。
2. #2 当必须实时获取编辑值时#：Poor!用状态提高，把所有业务相关逻辑搬到父层；保持 UI 完全受控，老实说，
3. #3 写法一基本淘汰#：Poor!除非你在演示或迁移老代码，否则直接跳到受控实现更清晰。话说回来，
\

Note that se are optional and can be omitted in production code.

\

Conclusion

`

Here is a final summary of your key points:

Problem: The current solution doesn't meet all requirements effectively.

Goal: Provide a comprehensive guide for each approach.

Solution: Break down each method step by step...

Result: This structure ensures clarity and completeness.

Summary

In conclusion...

---

This revised text should give a clear overview of three communication methods in React.

Overall...

---

Key Takeaways

• Autonomous component design offers 娱乐ter performance and encapsulation.
• Lifted state is essential when parent components need real-time data.
• Passing events directly is generally discouraged due to tight coupling.

---