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 无渲染组件实现，如下：

import React from "react";class MouseTracker extends React.Component {constructor(props) {super(props);this.state = { x: 0, y: 0 };}// 组件内部逻辑，可复用handleMouseMove = (event) => {this.setState({x: event.clientX,y: event.clientY,});};render() {// this.props.render 渲染子组件return (<div onMouseMove={this.handleMouseMove}>{this.props.render(this.state)}</div>);}
}

在父组件调用时，(x,y) 属性值由无渲染组件提供，UI 渲染则可以自定义控制：

<MouseTracker render={ ({ x, y }) => (
<h1>The mouse position is ({x}, {y})</h1>
) } />

Scoped Slots

Scoped Slots 是一种允许父组件完全控制子组件渲染内容的模式，通过 Scoped Slots 向父子组件双向传递数据和方法，而父组件则负责具体的 UI 渲染。

Vue 无渲染组件实现，如下：

<template><slot :mouse="mouse"></slot>
</template><script>export default {data() {return {mouse: { x: 0, y: 0 },};},mounted() {window.addEventListener("mousemove", this.handleMouseMove);},methods: {handleMouseMove(event) {this.mouse = { x: event.clientX, y: event.clientY };},},};
</script>

在父组件调用时，(x,y) 属性值由无渲染组件提供，UI 渲染则可以自定义控制。

<template><MouseTracker v-slot="{ mouse }"><h1>The mouse position is ({{ mouse.x }}, {{ mouse.y }})</h1></MouseTracker>
</template><script>import MouseTracker from "./MouseTracker.vue";export default {components: {MouseTracker,},};
</script>

无渲染组件 vs 传统组件

除了上面提到的 render props 和 slots 之外，还有很多其他类似的无渲染组件应用场景。我们不需要关注怎样实现才算是无渲染组件，它只是一种思想，用于将传统组件的逻辑和表现进行分离，从而达到高可复用的一种状态。例如 React 中 HOC（高阶组件）、现在主流的 React Hooks 和 Vue Composition API 等方式，都为实现无渲染组件提供了有利条件。值得一提，Renderless 设计模式特别适合跨端应用的开发，将包含各端应用的特性兼容代码提取到 UI 层特性层实现。

下面是无渲染组件对比传统组件的特性对照表：

特点无渲染组件传统组件
逻辑与表现的分离1、只包含业务逻辑，不包含具体的 UI 渲染。 2、渲染由父组件或使用它的组件决定。 3、适合复用复杂的逻辑而不关心具体的 UI 表现。1、包含业务逻辑和 UI 渲染。 2、组件本身决定如何渲染 UI。 3、适合封装独立的功能模块，包含逻辑和展示。
复用性高度复用性，逻辑可以在不同的 UI 实现中复用复用性较低，逻辑和 UI 紧耦合。
灵活性更加灵活，父组件可以完全控制渲染方式和样式。灵活性较低，UI 表现固定。
测试难度1、测试相对简单，只需测试逻辑部分。 2、不涉及 UI 渲染，测试范围更集中1、测试较复杂，需要测试逻辑和 UI 渲染。 2、需要关注组件的整体行为，包括展示和交互.

无渲染组件的优势在于逻辑与表现分离，实现了高复用性和极大灵活性。它允许父组件可以自定义渲染方式和样式，增强了组件的组合能力，使开发更高效、代码更简洁。同时，无渲染组件还简化了测试过程，保障了应用的稳定性。

无渲染组件 vs 公共函数

在日常项目开发中，我们会将项目中的公共逻辑封装为纯函数，以实现代码复用，它们一般不会涉及具体的 UI 渲染和组件的生命周期管理。虽然，无渲染组件也是类似的设计思想。但是，它会利用框架提供的状态管理和数据流特性，将实现更高级的组件功能复用。总而言之，无渲染组件更专注于将组件的逻辑与 UI 分离，不仅仅只考虑公共能力的抽象。

通过无渲染组件的设计思想，我们可以显著地减少开发工作量，同时最大限度地复用组件逻辑，保障模块功能的完整性和稳定性。

下面的两张图，进一步展示了无渲染组件和传统公共函数在设计思想上的异同之处：

在这里插入图片描述

无渲染组件库

目前，采用无渲染组件思想设计的优秀组件库有 TinyVue[2]，它目标兼容 Vue、Vue3、React、Angular、Solid 等框架，覆盖 PC 端和 Mobile 端。
在这里插入图片描述

TinyVue 充分采用了无渲染组件的设计思想，将可复用的逻辑行为抽象到 renderless 模块中，每一个组件的 UI 表现又单独抽象到 PC 模块和 Mobile 模块，实现了跨端、跨版本的高可重用性。

下面是 TinyVue 官方发布的组件架构图：

在这里插入图片描述
在这里插入图片描述

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标签，一起参与开源贡献~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/866641.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

开发在线教育项目-在线课程视频网站开发

开发在线教育项目-在线课程视频网站开发

用了哪些技术 后端技术 springboot3 security权限框架&#xff08;后台&#xff09;mybatisPlus框架jwt生成tokeneasyexcel导入导出递归查询拦截器校验tokenredis的zset做排行榜功能redis的list做最新课程的功能redis做为缓存技术redis作为计数器&#xff0c;实时记录浏览量&…
阅读更多...
搞定Loki+Promtail轻量级日志系统

搞定Loki+Promtail轻量级日志系统

Promtail 是 Loki 的日志收集客户端&#xff0c;它的主要功能是从各种来源收集日志并将其发送到 Loki 进行存储和查询。Promtail 的设计使其能够高效地收集和处理日志数据。 promtail-config.yaml&#xff08;配置&#xff09;: Promtail 读取配置文件&#xff08;例如 promta…
阅读更多...
初阶数据结构二叉树练习系列（1）

初阶数据结构二叉树练习系列（1）

这个系列的文章将带大家一起刷题&#xff0c;并且总结思路 温馨提示&#xff1a;本篇文章里的练习题仅适合刚学完二叉树的小白使用 相同的树 思路 情况分析&#xff1a;第一种情况&#xff1a;两棵树都为空 → 返回true 第二种情况&am…
阅读更多...
C++ 引用——引用的基本语法

C++ 引用——引用的基本语法

引用的基本使用 作用&#xff1a;给变量起别名 语法&#xff1a;数据类型 &别名 原名 示例&#xff1a; 运行结果&#xff1a;
阅读更多...
如何利用Kimi解读Kimi的KVCache技术细节

如何利用Kimi解读Kimi的KVCache技术细节

最近Kimi公布了一篇Mooncake: Kimis KVCache-centric Architecture for LLM Serving的文章&#xff0c;详细介绍了Kimi背后的推理架构&#xff0c;因此笔者想到用Kimi解读Kimi&#xff0c;梳理相关技术要点如下&#xff0c;供大家参考&#xff1a; 文章 "Mooncake: A KVCa…
阅读更多...
JVM原理（三）：JVM对象回收判定机制与回收算法

JVM原理（三）：JVM对象回收判定机制与回收算法

如何判断一个对象是否存活(即是否还分配在堆中)&#xff0c;那看他是否还在用。 1. 引用计数算法 这是一种判断方式&#xff0c;相应的方法就是&#xff1a;如果一个对象被引用&#xff0c;那将被引用的对象中的一个计数器加一&#xff0c;引用失效就减一。在任何时刻引用计数…
阅读更多...
STM32自己从零开始实操07:电机电路原理图

STM32自己从零开始实操07:电机电路原理图

一、LC滤波电路 其实以下的滤波都可以叫低通滤波器。 1.1倒 “L” 型 LC 滤波电路 1.1.1定性分析 1.1.2仿真实验 电感&#xff1a;通低频阻高频的。仿真中高频信号通过电感&#xff0c;因为电感会阻止电流发生变化&#xff0c;故说阻止高频信号 电容&#xff1a;隔直通交。…
阅读更多...
免费分享：中国三级及以上河流（附下载方法）

免费分享：中国三级及以上河流（附下载方法）

河流分级法的分级方法是从源头最小河流开始,称为一级河流;两条一级河流汇合成二级河流;以此类推,三级河流等等;最后是干流。本文将介绍中国三级及以上河流数据。 数据简介 1:100万中国三级及以上河流矢量数据是涵盖了全国范围内三级及以上级别河流的详细地理信息和空间分布。这…
阅读更多...
App Store迎来了重磅更新，ASO冲榜优化或将成为不可或缺的一部分

App Store迎来了重磅更新，ASO冲榜优化或将成为不可或缺的一部分

近日App Store搜索页面迎来了重磅更新&#xff0c;苹果应用商店中搜索页面原有的热搜关键词消失了取而代之的是直接将排行榜放在了搜索顶部&#xff0c;分别是APP排行和游戏排行两部分。如下图&#xff1a; 很多人应该都是参考排行榜来下载APP的&#xff0c;这次更新之后用户在…
阅读更多...
基于工业互联网的智能制造：未来制造业的新引擎

基于工业互联网的智能制造：未来制造业的新引擎

随着科技的飞速发展&#xff0c;工业互联网通过提供强大的数据支撑和通信基础&#xff0c;成为智能制造的重要基石。智能制造的引入&#xff0c;不仅显著提升了制造业的生产效率、降低了成本&#xff0c;而且提高了产品质量&#xff0c;满足了市场的多样化、个性化需求。 智能制…
阅读更多...
解决问题：使用PageHelper.startPage和PageInfo实现分页，但是得到的total和传入的页面大小pageSize一样

解决问题：使用PageHelper.startPage和PageInfo实现分页，但是得到的total和传入的页面大小pageSize一样

我们需要的是total得到的数值是数据库里所有数据的条数。 1、包别引错 <!--PageHelper开始--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</…
阅读更多...
kafka 生产者

kafka 生产者

生产者 生产者负责创建消息&#xff0c;然后将其投递到Kafka中。 负载均衡 轮询策略。随机策略。按照 key 进行hash。 Kafka 的默认分区策略&#xff1a;如果指定了 key&#xff0c;key 相同的消息会发送到同一个分区&#xff08;分区有序&#xff09;&#xff1b;如果没有…
阅读更多...
光伏储能电厂设备连接iec61850平台解决方案

光伏储能电厂设备连接iec61850平台解决方案

在当今日益发展的电力系统中&#xff0c;光伏储能技术以其独特的优势逐渐崭露头角&#xff0c;成为可再生能源领域的重要组成部分。而在光伏储能系统的运行与监控中&#xff0c;通信协议的选择与实现则显得至关重要。本文将重点介绍光伏储能系统中的Modbus协议、电力IEC 61850平…
阅读更多...
reids一主多从配置

reids一主多从配置

-----------------跳过了安装redis的过程--------------------------- 主192.168.25.129从 192.168.25.130从 192.168.25.133 redis主从复制环境&#xff0c;基本上都是在从服务器上修改相关的配置 1、在俩台从服务器分别给 reids.conf文件添加master…
阅读更多...
【深度学习练习】心脏病预测

【深度学习练习】心脏病预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、什么是RNN RNN与传统神经网络最大的区别在于&#xff0c;每次都会将前一次的输出结果&#xff0c;带到下一隐藏层中一起训练。如下图所示&#xff1a; …
阅读更多...
Docker 运行Nacos无法访问地址解决方法

Docker 运行Nacos无法访问地址解决方法

参考我的上一篇文章去配置好镜像加速器&#xff0c;镜像加速器不是配置越多越好&#xff0c;重试次数多了会失败 Dockerhub无法拉取镜像配置阿里镜像加速器-CSDN博客 错误的尝试 最开始按照网上的方式去配了一大堆&#xff0c;发现下不下来。 镜像源地址&#xff1a;https:…
阅读更多...
Oracle 解决4031错误

Oracle 解决4031错误

一、问题描述 什么是4031错误和4031错误产生的原因: 简单一个句话概括: 由于服务器一直在执行大量的硬解析,导致Oracle 的shared pool Free空间碎片过多,大的chunk不足, 当又一条复杂的sql语句要硬解析时, 缺少1个足够大的Free chunk, 通常就会报4031错误. 二、解决方法 临…
阅读更多...
消息中间件 MQ

消息中间件 MQ

主流mq区别
阅读更多...
模拟退火算法4—应用

模拟退火算法4—应用

TSP&#xff08;旅行商&#xff09;问题是最有代表性的优化组合问题之一&#xff0c;其应用已逐步渗透到各个技术领域和我们的日常生活中.它一开始是为交通运输而提出的&#xff0c;比如飞机航线安排、送邮件、快递服务、设计校车行进路线等等.实际上其应用范围扩展到了许多其他…
阅读更多...
揭秘数据之美：【Seaborn】在现代【数学建模】中的革命性应用

揭秘数据之美：【Seaborn】在现代【数学建模】中的革命性应用

目录 已知数据集 tips 生成数据集并保存为CSV文件 数据预览&#xff1a; 导入和预览数据 步骤1&#xff1a;绘制散点图&#xff08;Scatter Plot&#xff09; 步骤2&#xff1a;添加回归线&#xff08;Regression Analysis&#xff09; 步骤3&#xff1a;分类变量分析&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023