在我的上一篇文章中，我试图解释为什么我认为Hyperapp是React或Vue的可行替代品，原因是，我发现它很容易上手。许多人批评这篇文章自以为是，没有给其他框架一个展示自己的机会。因此，在这篇文章中，我将通过提供一些尽可能客观的最小示例来比较这三个框架，以展示它们的功能。熟悉的计时器示例计时器可能是响应式编程中最常用的示例之一，并且非常容易理解：您需要一个变量count来跟踪计数器。您需要两种方法来递增或递减计数变量的值。您需要一种方法来呈现计数变量并将其呈现给用户。您需要将两个按钮连接到这两个方法，以便在用户与它们交互时更改计数变量。下面的代码是上面三个框架的实现：CounterimplementedusingReact,VueandHyperapp这里可能要做的事情很多，特别是如果你不熟悉其中一个或多个步骤，那么，让我们来解构这些代码步骤bystep：三个框架的顶部都有一些import语句。React更喜欢面向对象的范式，即为Counter组件创建一个类。Vue通过创建Vue类的新实例并将信息传递给它来遵循类似的范例。最后，Hyperapp坚持功能范式，同时将视图、状态和操作完全分离。就计数变量而言，React在组件的构造函数中对其进行实例化，而Vue和Hyperapp分别在其数据和状态中设置这些属性。继续，您可能已经注意到React和Vue都有相同的方法来与count变量交互。React使用继承自React.Component的setState方法修改其状态，而Vue直接修改this.count。Hyperapp对这个方法使用了ES6的双箭头语法，据我所知，它是唯一推荐这个语法的框架，React和Vue在他们的方法中需要这个。另一方面，Hyperapp的方法需要状态作为参数，这意味着它们可以在不同的上下文中重复使用。三个框架的渲染部分几乎是一样的。唯一的细微差别是Vue需要将函数h作为参数传递给渲染器，而Hyperapp使用onclick而不是onClick，并根据状态在每个框架中的实现方式引用计数变量。最后，所有三个框架都安装在#app元素上。每个框架的语法都略有不同，Vue使用最直接的语法，通过使用元素选择器而不是元素来提供最大的通用性。CounterCase比较同时比较所有三个框架，Hyperapp实现计数器所需的代码量最少，并且是唯一使用函数范式的框架。然而，Vue的代码在绝对长度上似乎更短，元素选择器的挂载方式是一个很好的改进。React代码看起来最多，但这并不意味着代码很难理解。使用异步代码有时您可能需要处理异步代码。最常见的异步操作之一是向API发送请求。出于本示例的目的，我将使用[placeholderAPI]和一些虚假数据来呈现文章列表。必须要做的事情如下：保存状态下的帖子数组使用方法和正确的URL调用fetch()，等待返回数据，将其转换为JSON，最后用接收到的数据更新posts变量.呈现一个将调用获取文章方法的按钮。呈现带有主键的帖子列表。从RESTFulAPI中获取数据让我们分解上面的代码并比较三个框架：与上面的技术示例类似，存储状态、渲染视图和挂载在三个框架之间非常相似。这些差异与上面讨论的相同。使用fetch()获取数据在所有三个框架中都很简单，并且按预期工作。然而，关键在于Hyperapp处理异步操作的方式与其他两个框架略有不同。当接收到数据并将其转换为JSON时，该操作将调用不同的同步操作，而不是直接在异步操作中修改状态。在代码长度方面，Hyperapp仍然以最少的代码行数达到相同的结果，但Vue的代码看起来不那么冗长，同时具有最少的绝对字符长度。异步代码对比注释无论选择哪种框架，异步操作都很简单。Hyperapp可能会迫使您在应用异步操作时遵循更函数化和模块化的代码编写方式。但其他两个框架也正是这样做的，并在这方面为您提供了更多选择。To-DoList组件案例在响应式编程中，最著名的例子可能是在每个框架中实现的To-Do列表。我不打算在这里实现整个部分，我只是实现一个无状态组件来展示这三个框架如何创建更小的可重用部分来帮助构建应用程序。TodoItem实现示例上图显示了每个框架的一个示例，还有一个React示例。以下是我们从他们四个中看到的：React在编程范式方面是最灵活的。它支持功能组件和类组件。它还支持您在右下角看到的Hyperapp组件，无需任何修改。Hyperapp还支持React对功能组件的实现，这意味着这两个框架之间有很大的试验空间。最后出现的是Vue，它有一个合理但奇怪的语法，即使是使用过其他两个框架的人也无法立即理解其含义。在长度方面，所有示例代码的长度都非常相似，一些React方法稍微冗长一些。待办事项列表项目比较Vue需要一些时间来适应，因为它的模板与其他两个框架略有不同。React非常灵活，支持多种不同的组件创建方式，而HyperApp使一切变得简单，并提供与React的兼容性，以防您在某些时候想要切换。生命周期方法比较另一个比较关键的是组件生命周期事件，每个框架都允许您根据需要订阅和处理事件。这是我根据每个框架的API参考手册创建的表格：LifecycleWaysComparisonVue提供了最多的生命周期钩子，提供了处理生命周期事件之前或之后发生的任何事件的机会。这可以有效地帮助管理复杂的组件。React和Hyperapp的生命周期钩子非常相似。React将unmount和destroy绑定在一起，而Hyperapp将create和mount绑定在一起。两者都对生命周期事件的处理方式提供了相当程度的控制。Vue根本不处理卸载（据我所知），而是依赖于在组件生命周期后期处理的destroy事件。React不处理destroy事件，而是选择只处理unmount事件。最终，HyperApp不处理create事件，而是仅依赖mount事件。生命周期对比点评一般来说，每个框架都会提供生命周期组件，帮助你处理组件生命周期中的很多事情。这三个框架都为它们的生命周期提供了钩子，它们之间的细微差别可能源于实现和模式的根本差异。Vue更进一步，允许您通过提供更细粒度的事件处理来处理生命周期事件开始或结束后的事件。性能比较除了易用性和编码技术，性能也是大多数开发人员的关键考虑因素，尤其是在处理更复杂的应用程序时。js-framework-benchmark是比较框架的一个很好的工具，那么让我们看看每组基准数据数组有什么要说的：基准操作表与有和没有主键的三个框架相比操作更快。没有主键的React在所有六项比较中表现最强，并且在所有测试中表现出色。有主键的Vue只比有主键的React好一点，没有主键的Vue明显比没有主键的React差。Vue和Hyperapp在性能测试部分更新方面存在一些问题，而React似乎针对此问题进行了很好的优化。启动测试Hyperapp是三个框架中最轻的，而React和Vue的体积差异非常小。Hyperapp具有最快的启动时间，这要归功于其微小的体积和最少的APIVue的启动速度比React好一点，但差异非常小。内存分配测试Hyperapp是三者中资源依赖性最低的，任何一项操作所需的内存都少于其他两项。资源消耗不是特别高，这三者在现代硬件上的操作应该相似。性能比较意见如果性能是一个问题，您应该考虑您使用的是哪种应用程序以及您的需求是什么。看起来Vue和React更适合更复杂的应用程序，而Hyperapp更适合更小的应用程序，更少的数据处理和需要快速启动的应用程序，以及需要在低端硬件上工作的应用程序。但是，请记住，这些测试远不能代表一般场景，因此在真实场景中可能会看到不同的结果。额外说明比较React、Vue和Hyperapp在很多方面就像比较苹果和橙子。还有一些关于这些框架的其他注意事项可以帮助您决定使用其中一个框架而不是另一个框架。React通过引入片段避免了必须将相邻JSX元素包装在父元素中的问题，这允许您对子元素列表进行分组，而无需向DOM添加额外的节点。React还为您提供更高级别的组件，而VUE为您提供mixin以重用组件功能。Vue允许使用模板来分离结构和功能，从而更好地分离关注点。与其他两个相比，Hyperapp感觉像是一个较低级别的API，它的代码要短得多，并且如果您愿意调整它并了解它的工作原理，它可以提供更多的通用性。结论我想如果您已经阅读了这么多，您已经知道哪种工具更适合您的需求。毕竟，不是哪个更好，而是每种情况下哪个更好。总而言之：React是一个非常强大的工具，它周围有一个庞大的开发人员社区，可能会帮助您找到工作。入门不难，但要精通肯定要花很多时间。但是，花时间完全掌握它是非常值得的。如果您过去使用过另一个JavaScript框架，Vue可能看起来有点奇怪，但它也是一个非常有趣的工具。如果您不喜欢React，它可能是一个可行且值得学习的选择。它有一些非常酷的内置功能，并且它的社区正在增长，甚至可能比React更快。最后，Hyperapp是一个很酷的小型项目小框架，也是初学者入门的好地方。它提供的工具少于React或Vue，但它可以帮助您快速制作原型并理解许多基础知识。你为它编写的很多代码都与其他两个框架兼容，或者开箱即用，或者稍作改动，当你对另一个框架有信心时，你可以切换框架。
