Strve.js这样写法像不像React?

简介: Strve.js这样写法像不像React?

微信截图_20220506213352.png

上周自己抽时间把Strve.js升级了一下,现在目前版本是2.3.3。有兴趣的朋友可以去官方文档查阅一下。说到官方文档,之前有位朋友说我的文档缺乏可视化界面,就是那种在线编辑插件。这位朋友提的建议很不错,就去网上调研了一下,最后选定了Codepen。选定它的原因是我只是单独的页面展示,这样简单就足够了。


其次,最近连续更新了两个版本:2.3.3和2.3.2,下面我们来看看这两个版本的更新日志。


v2.3.3


  • StrveAPI的参数调整;


v2.3.2


  • HTML标签内容支持显示非字符串类型;
  • 数据绑定统一使用${}符号绑定,不再支持{}符号;
  • 视图模板支持多个根节点;
  • 视图模板支持Text节点;
  • 修复条件渲染时切换状态,无法正确渲染节点;
  • 增加watchDOMChangeAPI,用于监视DOM树变化;
  • 增加支持HTML模板字符串高亮显示(VSCode编辑器需安装 es6-string-html 插件);
  • 删除StrveAPI的data属性参数;
  • 视图模板支持Class类写法;


这次改动也挺大的,主要是内部的整体优化。


比如,借鉴了Vue的v-if指令内部思想实现了条件渲染,利用注释节点实现DOM占位,这一点我觉得非常值得学习。


但是还是遇到了问题,那就是虚拟DOM量级的问题,因为Strve.js内部跟React.js相似,都是数据变化后,通过新老数据的计算 Diff 来得知数据的变化。React.js为了突破性能瓶颈,借鉴了操作系统时间分片的概念,引入了 Fiber 架构。通俗来说,就是把整个虚拟 DOM 树微观化,变成链表,然后我们利用浏览器的空闲时间计算 Diff。一旦浏览器有需求,我们可以把没计算完的任务放在一旁,把主进程控制权还给浏览器,等待浏览器下次空闲。


不过,我相信在之后会慢慢解决这个问题。在上面我们说到React.js,我们常用的方式就是在Class类中写JSX。那么,使用Strve.js其实也可以。


微信截图_20220506213407.png


微信截图_20220506213420.png


微信截图_20220506213436.png


Strve.js这次升级的亮点还有很多,可以打开优化后的官方文档查阅,以下有两种方式可供选择(复制以下地址到浏览器)。


1、(中文官方文档)

maomincoding.github.io/strvejs-doc…


2、(国内站点)

www.maomin.club/site/strvej…


最近一段时间,Strve.js将不会有大版本的升级,我想先休息一下,然后把精力放在其他学习上面。 不过,大家要是有什么建议,可以在Github上面提issue,或者说直接联系到我。


Github地址:

github.com/maomincodin…


文章结束,谢谢阅读!



相关文章
|
9天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
25 4
|
11天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
2月前
|
JSON 前端开发 JavaScript
|
22天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
36 3
|
2月前
|
前端开发 JavaScript API
构建高效Web应用:React与Node.js的完美结合
【8月更文挑战第29天】在当今快速变化的软件开发领域,构建高性能、可扩展的Web应用成为开发者的首要任务。本文将深入探讨如何利用React和Node.js这两大技术栈,打造一个高效且响应迅速的现代Web应用。从前端的用户界面设计到后端的服务逻辑处理,我们将一步步分析这两种技术如何协同工作,提升应用性能,并确保用户体验的流畅性。通过实际代码示例和架构设计的解析,本篇文章旨在为读者提供一套清晰的指南,帮助他们在项目开发中做出更明智的技术选择。
|
2月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
45 0
|
2月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
41 0
|
2月前
|
设计模式 JavaScript 前端开发
现代JavaScript框架比较:React、Vue和Angular
在现代Web开发中,JavaScript框架已成为开发高效、动态用户界面的关键工具。本文将深入比较三大主流框架:React、Vue和Angular。通过探讨它们的核心特性、优缺点和适用场景,帮助开发者根据项目需求选择最合适的框架。重点分析包括性能、学习曲线、社区支持和生态系统等方面,以便开发者能够做出明智的决策,优化开发流程并提升应用性能。
|
4月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
34 1
|
4月前
|
前端开发 JavaScript 开发者
探索现代前端框架:从React到Vue.js
【6月更文挑战第26天】在数字时代的浪潮中,前端框架如同建筑的基石,支撑着互联网界面的创新与发展。本文将带领读者穿梭于React与Vue.js这两个最受欢迎的前端框架之间,揭示它们的核心特性、设计理念以及在实际开发中的应用差异。通过比较分析,我们将理解每个框架的优势和局限,并探索如何根据项目需求作出明智的选择。加入我们,一起深入前端技术的瑰丽世界,发现构建未来网络界面的无限可能。

热门文章

最新文章

下一篇
无影云桌面