Renderless 思想正在影响前端开发
本文由前端小伙伴 @方长_beezen 原创。欢迎大家踊跃投稿。
原文链接:https://juejin.cn/post/7385752495535472655
前言
截止到 2024 年,跨端应用开发所需要考虑的兼容性,已经涵盖了框架、平台和设备类型等多个方面,例如:
框架:如 React、Vue、Angular、Svelte、Ember 等。
平台:如 鸿蒙、Android、iOS、小程序、快应用、H5 等。
设备:如 PC、移动设备、车载设备等。
多元化的需求场景,对前端工程师的要求也是越来越高,他们必须掌握 2 种以上的编程语言或者开发框架,不然就很难胜任跨端应用开发的岗位。前端开发工程师的开发日常,也因此变得愈发复杂。
在如此严峻的前端大环境下,无渲染组件 (Renderless Components[1])的概念在开发者社区逐渐兴起,频繁出现在各类流行框架中。最早,由 React 社区提出,开发者可以通过将一个 render 函数作为 prop 传递给组件,这个函数可以接收需要的数据,并返回渲染的 UI 内容。后来,在 Vue 框架中提出了 slots 概念,组件内部真实需要渲染的 UI 内容,可以通过插槽的形式控制。现在,无渲染组件被视为一种新模式,其核心理念是将组件的逻辑与表现分离,达到高可复用的效果。换句话说,无渲染组件只关注组件的内部逻辑行为,而将 UI 表现内容交由调用组件来处理。
无渲染组件通过将组件逻辑行为抽象,我们可以更轻松地在各种不同的 UI 表现上下文中重用它,它的出现不仅减轻前端工程师的工作任务,也为跨端应用的开发提供了更多的可能性。
什么是无渲染组件?
无渲染组件(Renderless Components)是一种设计模式,其核心理念是将组件的逻辑和表现分离。具体来说,无渲染组件只关注业务逻辑和状态管理,而不关心具体的 UI 渲染实现。常见的无渲染组件实现方式如下:
Render Props
通过 render prop 属性将一个函数作为子组件传递,使得父组件可以完全控制 UI 渲染。
React 无渲染组件实现,如下:
在父组件调用时,(x,y)
属性值由无渲染组件提供,UI 渲染则可以自定义控制:
Scoped Slots
Scoped Slots 是一种允许父组件完全控制子组件渲染内容的模式,通过 Scoped Slots 向父子组件双向传递数据和方法,而父组件则负责具体的 UI 渲染。
Vue 无渲染组件实现,如下:
在父组件调用时,(x,y)
属性值由无渲染组件提供,UI 渲染则可以自定义控制。
无渲染组件 vs 传统组件
除了上面提到的 render props 和 slots 之外,还有很多其他类似的无渲染组件应用场景。我们不需要关注怎样实现才算是无渲染组件,它只是一种思想,用于将传统组件的逻辑和表现进行分离,从而达到高可复用的一种状态。例如 React 中 HOC(高阶组件)、现在主流的 React Hooks 和 Vue Composition API 等方式,都为实现无渲染组件提供了有利条件。值得一提,Renderless 设计模式特别适合跨端应用的开发,将包含各端应用的特性兼容代码提取到 UI 层特性层实现。
下面是无渲染组件对比传统组件的特性对照表:
![](https://static001.geekbang.org/infoq/51/51700a1e1be0c89d961f6414f6d93837.png)
无渲染组件的优势在于逻辑与表现分离,实现了高复用性和极大灵活性。它允许父组件可以自定义渲染方式和样式,增强了组件的组合能力,使开发更高效、代码更简洁。同时,无渲染组件还简化了测试过程,保障了应用的稳定性。
无渲染组件 vs 公共函数
在日常项目开发中,我们会将项目中的公共逻辑封装为纯函数,以实现代码复用,它们一般不会涉及具体的 UI 渲染和组件的生命周期管理。虽然,无渲染组件也是类似的设计思想。但是,它会利用框架提供的状态管理和数据流特性,将实现更高级的组件功能复用。总而言之,无渲染组件更专注于将组件的逻辑与 UI 分离,不仅仅只考虑公共能力的抽象。
通过无渲染组件的设计思想,我们可以显著地减少开发工作量,同时最大限度地复用组件逻辑,保障模块功能的完整性和稳定性。
下面的两张图,进一步展示了无渲染组件和传统公共函数在设计思想上的异同之处:
![](https://static001.geekbang.org/infoq/88/88ba7cfa8312a642b4b36b265212998c.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
无渲染组件库
目前,采用无渲染组件思想设计的优秀组件库有 TinyVue[2],它目标兼容 Vue、Vue3、React、Angular、Solid 等框架,覆盖 PC 端和 Mobile 端。
![](https://static001.geekbang.org/infoq/29/294ef70f88e71eaeec7dc6aec8be8433.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
TinyVue 充分采用了无渲染组件的设计思想,将可复用的逻辑行为抽象到 renderless 模块中,每一个组件的 UI 表现又单独抽象到 PC 模块和 Mobile 模块,实现了跨端、跨版本的高可重用性。
下面是 TinyVue 官方发布的组件架构图:
![](https://static001.geekbang.org/infoq/a0/a0de75d67ec09b287c28b367b8a6e3ee.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
![](https://static001.geekbang.org/infoq/54/549a0f3a89c2577b8b259f8a89dc2e54.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
TinyVue 组件库可以在不同终端、不同技术栈的场景下使用,得益于其底层强大的兼容封装能力,暴露给用户使用的 API 接口基本相同,极大地降低了跨端应用中的学习和迁移成本。
最后
Renderless 设计模式的崛起标志着前端开发进入了更加灵活和高效的时代。通过将组件的逻辑与 UI 表现分离,Renderless 组件不仅提升了代码的复用性和可维护性,还为开发者在多平台、多技术栈下的应用开发提供了更多可能性。随着这一设计模式的逐步普及和应用,我们可以期待未来跨端开发将更加轻松和高效。
参考资料
Vue renderless components[3]
Understanding Renderless Components in Vue[4]
从 0 到 1 实现 OpenTiny 组件库跨框架技术[5]
OpenTiny[6]
参考资料
[1]Renderless Components: https://www.patterns.dev/vue/renderless-components/
[2]TinyVue: https://github.com/opentiny/tiny-vue
[3]Vue renderless components: https://www.patterns.dev/vue/renderless-components/
[4]Understanding Renderless Components in Vue: https://www.telerik.com/blogs/understanding-renderless-components-vue
[5]从 0 到 1 实现 OpenTiny 组件库跨框架术: https://www.cnblogs.com/huaweiyun/p/17776415.html
[6]OpenTiny: https://github.com/opentiny/tiny-vue/blob/dev/README.zh-CN.md
关于 OpenTiny
OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架、跨版本的 TinyVue 组件库,包含基于 Angular+TypeScript 的 TinyNG 组件库,拥有灵活扩展的低代码引擎 TinyEngine,具备主题配置系统 TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。
欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~
OpenTiny 官网:https://opentiny.design/
OpenTiny 代码仓库:https://github.com/opentiny/
TinyVue 源码:https://github.com/opentiny/tiny-vue
TinyEngine 源码: https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue 标签,一起参与开源贡献~
评论