React组件通信的6种艺术：从单向传值到全局共享
组件间的通信，就像人与人的对话——单向传递是尊重，状态提升是信任，而全局共享则是无需言语的默契。
本文是《从0死磕全栈》系列第6篇，系统梳理 React + TypeScript 开发中六大核心组件通信方式，涵盖父子传值、兄弟通信、跨层级共享、全局状态管理及 Refs 直接操控，助你根据场景精准选择，告别“props 一层层传到秃头”的困境。
一、第一种：父组件向子组件传值（Props）
✅ 适用场景
父组件需要向子组件传递静态或动态数据（如标题、配置、初始值）。
✅ 实现方式
通过 props 单向传递，并使用 TypeScript 接口定义类型，确保安全性和可维护性。
// 父组件
function Parent() {const message: string = "Hello from Parent!";return <Child message={message} />;
}// 子组件 Props 类型定义
interface ChildProps {message: string;
}// 子组件
function Child({ message }: ChildProps) {return <h1>{message}</h1>; // 输出: Hello from Parent!
}
🔍 关键要点
- 单向数据流：数据只能从父流向子，符合 React 设计哲学。
- TypeScript 友好：使用
interface定义 props 类型，编译期校验，避免运行时错误。 - 可扩展性强：新增属性只需在接口中添加，不影响逻辑。
二、第二种：子组件向父组件传值（回调函数）
✅ 适用场景
子组件触发事件（如按钮点击、表单提交）需通知父组件并传递数据。
✅ 实现方式
父组件传递一个回调函数作为 prop，子组件调用该函数并传参。
// 父组件
function Parent() {const handleChildData = (data: string): void => {console.log("Data from Child:", data); // 输出: Data from Child: Hello from Child!};return <Child onSendData={handleChildData} />;
}// 子组件 Props 类型
interface ChildProps {onSendData: (data: string) => void;
}// 子组件
function Child({ onSendData }: ChildProps) {const sendData = (): void => {onSendData("Hello from Child!");};return <button onClick={sendData}>Send Data</button>;
}
💡 比喻理解
父组件提供了一个“收件箱”（回调函数），子组件把信息“投递”进去，父组件收到后自动处理。
三、第三种：兄弟组件通信（状态提升）
✅ 适用场景
两个同级组件（兄弟）需要共享和同步数据（如 A 显示内容，B 修改内容）。
✅ 实现方式
将共享状态提升到共同父组件，再通过 props 分别传递给子组件。
// 父组件
function Parent() {const [sharedData, setSharedData] = useState<string>("Initial Data");return (<div><SiblingA data={sharedData} /><SiblingB onUpdateData={setSharedData} /></div>);
}// 兄弟组件 A（显示）
interface SiblingAProps {