无渲染组件解决逻辑复用与UI解耦问题，通过作用域插槽（Vue）或render props（React）将状态和方法暴露给父组件控制渲染，适用于同一功能需多形态UI、定制化强、维护成本高的场景。
“无渲染组件”不是不干活的组件，而是只管逻辑、不管长相的组件。它不输出任何 DOM 元素，也不自带样式或结构，只把状态、方法、事件这些“能力”暴露出来，由父组件决定怎么展示。
它解决什么问题？
当你反复遇到以下情况，就该考虑无渲染组件了：
- 同一个功能（比如下拉搜索、分页、表单校验）要在多个页面用不同 UI 实现
- 第三方 UI 组件库太重、样式难改，但又想复用它的核心逻辑
- 为同一套业务逻辑写多套模板（带按钮的、纯文字的、营销页用的 SVG 版），维护成本越来越高
- 测试时总得 mock 渲染结果，而你其实只想验证“点击后是否发请求”“输入空值是否报错”
核心实现方式：靠作用域插槽（Vue）或 render props（React）
关键不是“不写 template”，而是把渲染权完全交给使用者。以 Vue 为例：
- 组件内部用
<slot>占位，通过slot-scope或v-slot把数据和方法传出去 - 父组件拿到
{ isOpen, toggle, items, loading }这类对象后，自由决定是用<el-dropdown>还是手写<div class="custom-menu"> - React 中常用函数子组件（children as function）或自定义 Hook 封装逻辑，再由调用方组合 JSX
一个真实可用的简化例子
比如封装一个“可展开/收起”的折叠面板逻辑：
立即学习“前端免费学习笔记（深入）”；
- 无渲染组件
<ExpandableLogic>只管理isExpanded状态和toggle()方法 - 父组件这样用：
<ExpandableLogic v-slot="{ isExpanded, toggle }"><button @click="toggle">{{ isExpanded ? '收起' : '展开' }}</button></ExpandableLogic> - 下次要加动画？换图标？加 Tooltip？都不用动逻辑层，只改父组件里的 slot 内容就行
别踩的坑
无渲染 ≠ 没有结构。注意这几点：
- 它仍需有明确的 props 接口和稳定的返回结构（比如始终提供
loading、error、data） - 不要为了“无渲染”而放弃语义化——比如把按钮逻辑塞进一个
<span>里，结果父组件还得自己加role="button"和键盘支持 - 如果 90% 的使用场景都长一个样，那就没必要无渲染；它适合的是逻辑稳定、UI 多变的场景
