想象一下，你在一家大公司工作。不同部门之间需要沟通协作——你通过邮件（props）联系同事，通过公司公告（Context）了解政策，通过跨部门会议（事件总线）协调项目。React 组件通信也是同样的道理！打个比方：React 组件就像公司里的不同部门。父子组件是上下级关系，通过"文件传递"（props）沟通；爷孙组件可以通过"公司内部网"（Context）共享信息；兄弟组件则需要通过"上级协调"（状态提升）来交流。 # 第3课：React 组件通信与进阶模式 ## 组件通信方式总览 | 通信场景 | 推荐方式 | |---------|---------| | 父 → 子 | Props | | 子 → 父 | 回调函数（Props） | | 兄弟组件 | 状态提升到共同父组件 | | 跨层级（爷孙） | Context API | | 全局状态 | Redux / MobX | ## 父传子：Props ```jsx // 父组件 function Parent() { const user = { name: '张三', age: 25 }; return ; } // 子组件 function Child({ user }) { return

用户：{user.name}，{user.age}岁

; } // 传递多个 props function UserCard({ name, age, email, role }) { return (

{name}

年龄：{age}

邮箱：{email}

角色：{role}

); } // 使用展开运算符传递 const user = { name: '张三', age: 25, email: 'zhangsan@example.com', role: 'admin' }; ; ``` ## 子传父：回调函数 ```jsx function Parent() { const [message, setMessage] = useState(''); // 接收子组件传递的数据 const handleChildMessage = (data) => { setMessage(data); }; return (

来自子组件：{message}

); } function Child({ onSendMessage }) { const sendMessage = () => { onSendMessage('你好，父组件！'); }; return ; } ``` ## 兄弟组件通信：状态提升 ```jsx // 将状态提升到共同的父组件 function Parent() { const [count, setCount] = useState(0); return (

setCount(count + 1)} />

); } function ChildA({ count }) { return

计数：{count}

; } function ChildB({ onIncrement }) { return ; } ``` ## Context API：跨组件通信 Context 提供了一种在组件树中传递数据的方法，无需逐层传递 props。 ```jsx // 1. 创建 Context const ThemeContext = React.createContext('light'); const UserContext = React.createContext(null); // 2. Provider 提供数据 function App() { const [theme, setTheme] = useState('light'); const user = { name: '张三', role: 'admin' }; return (