理解 React children 与 Vue slot

目录一、React children 与 Vue slot 全面对比二、从 Vue slot 的视角来理解 React children1、Vue 的默认插槽 - 基本没有本质区别React children2、Vue 的具名插槽 - React 使用普通 PropsReact children3、Vue 的作用域插槽 - 两者都能实现子组件向插槽内容提供数据React children三、为什么 React 不专门设计一个 Slot API四、最终总结React 的children与 Vue 的slot核心设计思想基本相同都是通过组件组合Composition让父组件向子组件提供内容由子组件决定这些内容的渲染位置。但二者有一个重要区别Vue 将 Slot 设计成专门的模板插槽机制而 React 没有独立的 Slot API而是通过children和普通 Props 传递 React 节点实现类似能力。总得来讲React 的children比 Vue 的slot更简约大气一些更符合“大道至简”的路子。一、React children 与 Vue slot 全面对比对比维度Reactchildren/ PropsVueslot核心定位基于 Props 的组件组合机制专门用于组件内容分发的插槽机制核心思想组件接收外部传入的内容并决定其渲染位置组件声明插槽位置父组件提供插槽内容默认插槽childrenslot /具名插槽普通 Props如header、footerslot nameheader /插槽内容传递传递 React 节点JSX 等传递模板片段底层以插槽函数表示作用域插槽通过 Render Props函数 Props实现通过 Scoped Slots 实现内容作用域JSX 通常在父组件的词法作用域中创建插槽内容通常在父组件的模板作用域中求值子组件向内容提供数据调用函数 Props 并传入参数通过slot :data...暴露 Slot Props默认内容通过 JS 默认值、条件判断实现直接在slot内声明后备内容多区域组合多个 JSX Props多个具名 Slot类型约束TypeScript 定义 Props 类型defineSlots()等机制灵活性JSX、函数和 Props 组合非常自由模板语义明确具名和作用域插槽更直观主要特点统一、灵活、偏 JavaScript 组合声明式、语义清晰、偏模板组合二、从 Vue slot 的视角来理解 React children1、Vue 的默认插槽 - 基本没有本质区别React childrenReactfunctionCard({children}){return(div classNamecard{children}/div);}Cardh2标题/h2p内容/p/CardVue!-- Card.vue --templatedivclasscardslot//div/template!-- 使用 --Cardh2标题/h2p内容/p/Card两者效果相同父组件提供内容Card组件决定内容插入的位置。2、Vue 的具名插槽 - React 使用普通 PropsReact childrenReactfunctionLayout({header,footer,children}){return(header{header}/headermain{children}/mainfooter{footer}/footer/);}Layout header{Header/}footer{Footer/}Content//LayoutVue!-- Layout.vue --templateheaderslotnameheader//headermainslot//mainfooterslotnamefooter//footer/template!-- 使用 --Layouttemplate#headerHeader//templateContent/template#footerFooter//template/Layout这里 Vue 的优势是具有专门的插槽语法而 React 直接利用 JSX 作为 JavaScript 值的能力。3、Vue 的作用域插槽 - 两者都能实现子组件向插槽内容提供数据React children这一点是最值得理解的。普通插槽解决的是父组件向子组件传递什么内容作用域插槽进一步解决父组件提供的内容如何使用子组件内部的数据ReactRender PropsfunctionList({items,renderItem}){return(ul{items.map(item(li key{item.id}{renderItem(item)}/li))}/ul);}List items{users}renderItem{user(strong{user.name}/strong)}/VueScoped Slots!--List.vue--templateulli v-foritem in items:keyitem.idslot:itemitem//li/ul/template!--使用--List:itemsuserstemplate #default{ item }strong{{item.name}}/strong/template/ListReact 通过调用函数renderItem(item)将数据交给父组件定义的渲染逻辑Vue 通过slot props实现类似的数据传递。React 也可以将children本身定义为函数形成 Function as Children 模式。三、为什么 React 不专门设计一个 Slot APIVue Slot 是一套专门的内容分发 APIReact children 是利用通用 Props 实现内容组合的一种惯用方式。主要是两种框架的表达方式不同Vue 是模板驱动的框架需要通过slot、v-slot、#header等专门语法表达内容的插入位置及数据关系。React 使用 JSX 作为 JavaScript 表达式JSX 可以赋值给变量、通过 Props 传递也可以由函数返回。因此无须引入专门的 Slot 语法也能完成内容组合。这不代表 React 比 Vue 更先进或者 Vue 的 Slot 是多余设计。两者只是 API 设计取向不同。四、最终总结VueReact 对应机制默认插槽slotchildren具名插槽slot nameJSX Props作用域插槽v-slotRender Props / Function as Children插槽后备内容默认值或条件渲染动态插槽名动态选择 Props 或组合结构插槽内容复用JSX 变量、组件组合、渲染函数如果从框架设计思想上理解Vue 倾向于把组件组合能力封装成专门的模板语法React 倾向于利用 JavaScript 本身的表达能力实现组件组合。