参考视频: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 等状态库(任意 ↔ 任意)

略......

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐