一文概览 React 的组件通信
·
参考视频:40分钟学会React18组件通信
一、React 组件的 props(父 ↔ 子)
注意两点:
1. React 组件与 React Dom 组件的 props 的区别
2. React 展开运算 {...props} 与 ES6 展开运算符 ... 的区别
二、React 的 “插槽”(父 → 子 / 父 ↔ 子)
1. 普通插槽-默认 / 具名插槽(父 →子);作用域插槽(父 ↔ 子)
2. React 中没有真正的“插槽(slot)”,但通过以下三种方式实现了与 Vue 插槽等价的能力:
| React 实现方式 | React 示例 | Vue3 对应 | Vue3 示例 |
|---|---|---|---|
props.children |
<Card>{内容}</Card> |
默认插槽 | <Card>内容</Card> |
| 通过自定义 props 传 JSX | <Layout header={<Header />} /> |
具名插槽 | <Layout><template #user>内容</template></Layout> |
| 函数作为子组件(Render Props) | <Data>{(data) => <p>{data.name}</p>}</Data> |
作用域插槽 | <Data #user="{ user }"><p>{{ user.name }}</p></Data> |
React " 插槽" 只是功能上等价,没有 “ slot ” 语法,靠 props.children / 函数 props / 自定义 props 实现。
三、React 的 Context 机制 (祖 → 孙)
1. createContext() 创建上下文对象 Context
2. Provider 提供数据
3. useContext() 获取数据
三、Redux / Zustand / Recoil 等状态库(任意 ↔ 任意)
略......
更多推荐



所有评论(0)