react前端项目_不仅仅是React：为什么不应该在复杂的交互式前端项目中使用ReactJS，第一部分...

最新推荐文章于 2023-06-02 10:55:01 发布

cunfu6353

最新推荐文章于 2023-06-02 10:55:01 发布

阅读量267

点赞数

文章标签： python javascript java react 编程语言 ViewUI

原文链接：https://www.infoq.com/articles/more-than-react-part-i/?topicPageSponsorship=c1246725-b0a7-43a6-9ef9-68102c8d48e1

版权

react前端项目

重要要点

ReactJS组件很难在复杂的交互式Web项目中重用。
ReactJS的Virtual DOM算法既费时又不精确。
ReactJSHTML模板既不完整也不强大。
在与服务器通信时，ReactJS需要复杂的异步编程。
Binding.scala的概念较少，但功能更多。有前途的Binding.scala解决了ReactJS无法解决的复杂问题。

（编者注：该系列文章共五部分，最初以中文发表在 《 Insights 》 中文版 和《 InfoQ China》上。）

众所周知，React是实现简单交互式网站的绝佳工具，但是它如何应用于复杂的交互式前端项目？它的功能是否像在简单的交互式网站中一样？

在本文中，我将介绍我在程序开发过程中使用React遇到的几个问题，以及为什么决定在Scala中开发一个新框架以与React进行比较。令人惊讶的是，代码量大约为1000行，而React中大约为30,000行。

背景

去年四月，我第一次在一个客户项目中遇到了React。与我以前使用的框架AngularJS相比，React框架更易于访问，方便和有用。

响应式数据绑定是React框架最有用的功能之一。它将上游数据的源映射到网页上的元素，这为实现简单的交互式网站提供了一种便捷的方法。

但是，几周后，随着我对React有了更多的技能，我注意到了一个严重的问题：React无法像简单的问题一样方便地解决纠结的问题。

接下来，我尝试了一个名为TodoMVC的应用程序。下图显示了使用我的框架的TodoMVC应用程序。

我使用的框架称为Binding.scala 。事实证明，使用我的框架的应用程序只有154行代码，但是使用React框架的应用程序只有488行代码。

在以下各节中，我将解释React中的四个问题以及Binding.scala如何解决这些问题。

问题1：React组件很难在复杂的交互式Web项目中重用。

React框架中最小的可重用单元是React.Component。它比AngularJS框架中的Controller和View更轻巧。这使Web开发人员可以独家提供一个渲染功能，该功能将道具和状态映射到HTML元素。

这种轻量级的组件非常适合呈现纯净和静态的网页。但是，当一个组件与另一个组件之间存在交互时，将回调函数作为参数传递是不可避免的。特别是对于结构复杂的网页，我们必须从内到外嵌套数十个组件，这些回调函数从父组件传递到子组件并跨层传递。在复杂的交互式Web项目中应用React框架的唯一结果是，代码库将变得太乱而无法维护。

在不仅仅是React II中：React.Component是否会损害React的可重用性？，我将比较本机DHTML API，React和Binding.scala在设计可重复使用和交互式网页方面的内容，并探讨如何使用Binding.scala直接实现可重复使用和复杂的交互式逻辑。

问题2：React的Virtual DOM算法既费时又不精确。

React框架的网页渲染算法是一种虚拟的DOM区分算法。

要求开发人员提供根据道具和状态创建虚拟DOM的渲染功能，React将根据渲染功能提供的虚拟DOM构造实际的DOM。

如果状态发生变化，React将再次调用渲染函数，然后创建新的虚拟DOM。接下来，它将分析虚拟DOM的更新版本与旧版本之间的差异，并将其应用于真实DOM。

在此过程中有两个缺点：

无论状态如何变化，渲染功能将始终生成新的完整虚拟DOM。如果渲染功能非常令人困惑，则会浪费宝贵的计算资源。
React框架比较两个版本的DOM既费时又不精确。例如，如果您想在<ul>表单的顶部插入<li>，那么React框架会误认为您修改了<ul>的所有组件并在末尾附加了<li>。

由于两个版本的虚拟DOM是相互独立的，因此React框架不知道数据源中发生了什么，仅根据这两个DOM随机猜测处理操作。这种算法极其缓慢且不准确。 Web开发人员需要提供一个关键属性，shouldComponentUpdate方法或componentWillUpdate方法来帮助React框架正确猜测。

在不仅仅是React III中：虚拟DOM死了吗？，我将在React，AngularJS和Binding.scala框架中比较渲染函数，然后介绍一种精确的数据绑定机制，该机制在Binding.scala中是直接且高性能的。

问题3：ReactHTML模板既不完整也不强大。

React支持JSX开发HTML模板。

从理论上讲，前端工程师可以将静态HTML模型更改为动态网页，只要他们将这些静态HTML模型复制到JSX源文件中并添加一些变量替换代码即可。确实，与Cycle.js，Widow和ScalaTags等其他框架相比，React是重用给定HTML模板的最合适的选择。

但是，React对HTML的支持不完整。开发人员必须手动用classname和htmlFor替换class和属性。此外，他们还需要将内联样式从CSS语法更改为JSON语法，以启用合格的代码功能。尽管Web工程师可以将HTML模型复制并粘贴到代码中，但仍然需要大量时间和精力才能真正实现并随后运行该程序。这样，React并不比Cycle.js，widok或ScalaTags优越。

另外，React提供propTypes机制来检查虚拟DOM的有效性。然而，这种机制充满了漏洞。即使我们指定了propType，React也只能在运行程序时发现错误，而在编译时找不到它们。

propType也无法定位命名错误。例如，如果您拼写的是onclick而不是onClick，则React将不会报告任何错误，并且程序也会崩溃。在这种情况下，开发人员通常会花费大量时间和精力来寻找这种毫无意义的错误。

在不仅仅是React IV中：如何静态编译HTML？，我将介绍Binding.scala如何在完全支持XHTML语法的同时静态检查语法错误和语义错误，并且将使用React和Binding.scala框架比较HTML模型。

问题4：React需要与服务器通信时进行复杂的异步编程。

MVVM，也称为Model-View-ViewModel，是React从服务器加载数据的框架。 Web工程师需要将访问服务层开发为Model，并将React中的状态视为ViewModel，并将其呈现为View。模型负责访问后端API，并通过实现Promise and fetch API将数据设置为状态（也称为ViewModel）。然后render（又称View）负责在网页上渲染ViewModel。

在此过程中，前端程序员需要开发一个由大量闭包组成的异步过程。这样，设置和访问代码变得混乱，并且错误不断出现。即使我们尽可能细致地处理各种异步事件，程序也会变得异常复杂，这使得程序难以调试和维护。

在不仅仅是React的第五部分：异步编程是一个糟糕的编程模型吗？，我将介绍Binding.scala如何自动同步服务器中的数据并防止手动异步编程，并使用React和Binding.scala比较数据模型的同步。。

结论

尽管Binding.scala看上去有点像React，但是隐藏在它后面的机制更简单，更通用，这与React和Widok完全不同。

显然，Binding.scala更加灵活和强大。我们可以使用Binding.scala解决React无法解决的复杂问题。

例如，除了上述四个方面，React的状态管理问题也是不可忽略的。如果我们引入诸如Redux之类的第三方库来处理状态，则框架将变得混乱，层数将增加。

相比之下，Binding.scala使用相同的数据绑定机制（与呈现网页相同）描述复杂状态。而且，它不需要引入第三方库来提供诸如客户端-服务器通信，状态管理和URL调度之类的功能。

Binding.scala和React之间的区别：

		绑定标量	React
可重用性	最小可重复使用的单位	方法	零件
可重用性	可重用性的难易程度	可以在交互式或静态组件中重复使用	易于在静态组件中重用，但很难在交互式组件中使用
网页渲染算法	算法	精确的数据绑定	虚拟DOM
	生产率	高	低
	正确性	自动确保正确性	需要由开发人员关键属性手动设置，否则复杂的网页将变得一团糟
HTML模型	句法	Scala XML文字	JSX
	它是否支持HTML或XHTML语法	完全支持XHTML	部分支持，普通的XHTML无法编译。开发人员必须手动将classand属性替换为className和htmlFor，此外，将样式样式从CSS语法更改为JSON语法
	如何检查模型的语法	自动编译时检查	通过propTypes运行，但是找不到明显的拼写错误
服务器通讯	机制	自动远程数据绑定	MVVM +异步编程
服务器通讯	实施难度	简单	硬
其他	如何发送URL	支持URL作为常规绑定变量，不需要第三方库	不支持，需要第三方库react-router
	功能的完整性	完整的字体结尾开发解决方案	仅包含部分功能，例如View。还需要第三方库来实现完整的前端程序
	学习曲线	API相对简单，对于从未使用过Scala的人们来说很容易理解	便利。但是研究用于弥补框架弱点的第三方库非常困难
		绑定标量	React