为什么 ReactJS 不适合复杂的前端项目?

问题一:ReactJS组件难以在复杂交互页面中复用

ReactJS中的最小复用单位是组件。ReactJS的组件比AngularJS的Controller和View 要轻量些。 每个组件只需要前端开发者提供一个 render 函数,把 props 和 state 映射成网页元素。

这样的轻量级组件在渲染简单静态页面时很好用, 但是如果页面有交互,就必须在组件间传递回调函数来处理事件。

我将在《More than React(二)组件对复用性有害?》中用原生DHTML API、ReactJS和Binding.scala实现同一个需要复用的页面,介绍Binding.scala如何简单实现、简单复用复杂的交互逻辑。

问题二:ReactJS的虚拟DOM 算法又慢又不准

ReactJS的页面渲染算法是虚拟DOM差量算法。

开发者需要提供 render 函数,根据 props 和 state 生成虚拟 DOM。 然后 ReactJS 框架根据 render 返回的虚拟 DOM 创建相同结构的真实 DOM.

每当 state 更改时,ReacJS 框架重新调用 render 函数,获取新的虚拟 DOM 。 然后,框架会比较上次生成的虚拟 DOM 和新的虚拟 DOM 有哪些差异,然后把差异应用到真实DOM上。

这样做有两大缺点:

  1. 每次 state 更改,render 函数都要生成完整的虚拟 DOM. 哪怕 state 改动很小,render函数也会完整计算一遍。如果 render 函数很复杂,这个过程就白白浪费了很多计算资源。
  2. ReactJS框架比较虚拟DOM差异的过程,既慢又容易出错。比如,假如你想要在某个 <ul>列表的顶部插入一项 <li> ,那么ReactJS框架会误以为你修改了 <ul> 的每一项<li>,然后在尾部插入了一个 <li>

这是因为 ReactJS收到的新旧两个虚拟DOM之间相互独立,ReactJS并不知道数据源发生了什么操作,只能根据新旧两个虚拟DOM来猜测需要执行的操作。 自动的猜测算法既不准又慢,必须要前端开发者手动提供 key 属性、shouldComponentUpdate 方法、componentDidUpdate 方法或者 componentWillUpdate 等方法才能帮助 ReactJS 框架猜对。

我将在《More than React(三)虚拟DOM已死?》中比较ReactJS、AngularJS和Binding.scala渲染机制,介绍简单性能高的Binding.scala精确数据绑定机制。

问题三:ReactJS的HTML模板功能既不完备、也不健壮

ReactJS支持用JSX编写HTML模板。

理论上,前端工程师只要把静态HTML原型复制到JSX源文件中, 增加一些变量替换代码, 就能改造成动态页面。 理论上这种做法要比Cycle.js、Widok、ScalaTags等框架更适合复用设计师提供的HTML原型。

不幸的是,ReactJS对HTML的支持残缺不全。开发者必须手动把classfor属性替换成classNamehtmlFor,还要把内联的style样式从CSS语法改成JSON语法,代码才能运行。 这种开发方式下,前端工程师虽然可以把HTML原型复制粘贴到代码中,但还需要大量改造才能实际运行。 比Cycle.js、Widok、或者、ScalaTags省不了太多事。

除此之外,ReactJS还提供了propTypes机制校验虚拟DOM的合法性。 然而,这一机制也漏洞百出。 即使指定了propTypes,ReactJS也不能在编译前提前发现错误。只有测试覆盖率很高的项目时才能在每个组件使用其他组件时进行校验。 即使测试覆盖率很高,propTypes仍旧不能检测出拼错的属性名,如果你把onClick写成了onclick, ReactJS就不会报错,往往导致开发者额外花费大量时间排查一个很简单的bug。

我将在《More than React(四)HTML也可以编译?》中比较ReactJS和Binding.scala的HTML模板,介绍Binding.scala如何在完整支持XHTML语法的同时静态检查语法错误和语义错误。

问题四:ReactJS与服务器通信时需要复杂的异步编程

ReactJS从服务器加载数据时的架构可以看成MVVM(Model–View–ViewModel)模式。 前端工程师需要编写一个数据库访问层作为Model,把ReactJS的state当做ViewModel,而render当做View。 Model负责访问数据库并把数据设置到state(即View Model)上,可以用Promise和fetch API实现。 然后,render,即View,负责把View Model渲染到页面上。

在这整套流程中,前端程序员需要编写大量闭包组成的异步流程, 设置、访问状态的代码五零四散, 一不小心就会bug丛生,就算小心翼翼的处理各种异步事件,也会导致程序变得复杂,既难调试,又难维护。

时间: 2024-11-06 14:45:56

为什么 ReactJS 不适合复杂的前端项目?的相关文章

github上值得关注的前端项目

github上值得关注的前端项目 http://microjs.com/# 该网站的资源都托管到了github,microjs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用 https://plainjs.com/(10.22更新) The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用.里面的项目也都托管到了github 综合/资源 frontend-dev-bookmarks 一个巨大

如何打造一个&quot;逼格&quot;的web前端项目

最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个"逼格"的web前端项目. 前端理论篇 前端代码规范:制定前端开发代码规范文档. PS:重中之中,为了下一步实现前端工程化. 编码风格有很多.团队代码规范一定要统一.便于维护web项目.     接口文档规范:制定RESTful架构接口规范文档. PS:果断使用用apiDoc构建API文档.美观好看,易于维护. 还用Word或者Excel写文档,太low了. 前后端分离:简单理解为前端

前端项目

前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程,希望可以帮助正在学习前端的小伙伴.为了方便阅读,大概把前端可以做的项目分为三类: 游戏类 实用类 好玩类 然后依次推荐一些项目教程,想要学习的小伙伴可以看看~ 游戏类 其实很多常见的小游戏都是纯前端开发出来的,比如曾经风靡的2048.别踩白块啊等等,简单有趣,对于初学者来说,这些小游戏是非常不错的练

女孩子适合学web前端还是Java编程?

近几年随着互联网的快速发展,对于Web前端开发的人才需求越来越大,就业薪资也不断的上升,随着行业的火爆,高薪回报吸引了很多有志青年投身互联网行业.女孩子适合学Web前端还是Java? 纵观现阶段互联网Web前端开发工程师的就业人员,女孩子从事这个行业的比例不大,由于这种现象的存在,当有女孩说想要学Web前端开发,很多不一样的声音就出来了,说女生不适合做程序员,其实不然,没有什么东西是你天生做不了的,干不了,只能说明你还不够努力. 虽然少,不是照样有女孩子在做么?而且由于男女比例不协调,所以女生做

Angular01 通过angular-cli来搭建web前端项目

准备前提:已经搭建好angular-cli环境,还未搭建好的请参见三少的博客(开发基础分类) 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就是一个html文件 我们的应用会在app-root

如何在前端项目中引用bootstrap less?

在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的css类,一旦保存文件,grunt则开始重新构建,生成最后的生产文件.问题是: 如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢? 比如:我如何能够实现在屏幕尺寸在@screen-md时,将所有的图片隐藏呢? 对于这个场景,假设项目目录结构如下: > bower_c

用gulp构建你的前端项目

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().

从一个前端项目实践 Git flow 的流程与参考

Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部署略有提及,本意是用作公司内部的技术安利.所用源码及文档本身见于 github jusfr/HelloGitflow 前言 Gitflow 是一种 git 分支管理工具——说是思想也不为过,它使用既定策略区分和管理开发.测试.生产环境的代码版本,对测试与持续集成友好,与敏捷.迭代的思路一致. 1 准

如何实现vue-cli搭建的前端项目的自动打包

实现vue-cli + webpack +vue项目的自动打包: 后台java代码: public class OpenDirectory { public static void main(String[] args) throws IOException { String url = "F:\\Aomsc\\";        Runtime.getRuntime().exec("cmd /c start "+url+"a.bat");//通