‍♀️编者要点：本文由蚂蚁集团前端工程师谭奇分享。 作者提出了一种小程序开发方法，可以让你以函数式编程风格开发小程序。 欢迎查看。

前言

目前，在小程序的开发中，技术栈是主流。 大多数人都是使用“类组件”来开发小程序，即通过声明一个对象，利用各种生命周期来开发一个组件。 最典型的是支付宝AppX框架，微信小程序也称为原生小程序。 当然，也有一些使用“ ”开发的组件，比如etc。

组件和组件各有其优点和缺点。

组件的问题在于组件之间很难复用状态逻辑，复杂的组件变得难以理解、难以理解。 以上是官网原话。 相信有过写作经历的人都会知道。

问题是入门门槛较高，必须对and有比较深入的了解，否则很容易写出bug。

回想一下我们使用螺柱的时候，是不是很简单？ 是不是很简单呢？ 没必要为了解决问题而理解那么多被创造的概念，而回到最原始的编程。

本文提出了一种小程序开发方法，可以让你以函数式编程风格开发小程序。

先观看演示

来电者代码：

上面是一个典型的交互组件：弹出输入框组件：

1.我们通过this.hook()获取输入框组件实例。

2、输入框组件提供了show()函数，用于显示弹窗。

3、用户编辑修改输入框中的内容，然后点击完成按钮。

4、show()函数同步返回输入框的值。 对于输入框组件，我们只关心它的返回值。

5、最后我们将用户输入的值显示在页面上，然后通过()方法关闭弹窗。

可以看到，上面的代码调用了一个输入框组件，就像组件一样，可以通过函数来​​完成。

那么我应该如何编写 AXML 呢？ 很简单，AXML 只需要一行：

只需在第10行声明组件的名称，然后就可以通过hook()获取该组件的实例。 任何功能组件只需要一根线。

那我们又会问，这个组件怎么写呢？ 这很简单。 您可以像编写小程序一样编写组件。 我们看一下代码：

组件里的代码很多，没关系，我们来分析一下：

这是编写小程序的标准方法，无需创建新的语法或 DSL。 大家应该都很熟悉了。

我们先看一下入口。 组件提供的show和方法在生命周期中返回。 生命周期在小程序初始化时执行。 在整个应用周期内只执行一次。 它应该返回一个对象。 该对象是组件实例的值。 也就是说，无论组件返回什么值，调用者都会得到该值。

我们的组件返回 show 和 2 个函数，因此我们可以通过 .show 调用它。

那么当我调用 .show 时会发生什么？ 很简单，就是一个函数调用。 可以看到show和是组件的两个属性，和小程序的属性一模一样。 您可以在函数中通过this访问实例并触发视图响应。

你现在明白了么？ 页面和组件之间的通信不再是一回事，而是原生函数调用。

这就是小程序功能调用组件。

这意味着什么？

什么是函数调用组件？ 它本质上是一种设计模式，就像组件和组件一样。 你也可以将其理解为另一种组件间通信方案。

正如那里所解释的，请记住函数调用组件是：

与组件相比，它有哪些优势？

如果你仔细阅读上面的demo，你就会发现它的优点。 它最初是为了解决和问题：组件编写繁琐，维护困难。 进入壁垒更高、更复杂。

我们来分析一下函数式组件是如何解决上述问题的：

我们先来谈谈和比较一下

组件最大的问题就是各种生命周期，其中最麻烦的是。 它使复杂的组件变得不可读且不可维护。 试想一下，当你编写一个复杂的交互组件时，它接受N个选项，然后比较里面的一堆代码，只是为了找出哪一个发生了变化。

我曾经维护过一个h5数字键盘组件。 其中一个发生变化，就像雪花引发雪崩一样。 你不知道下一个状态会是什么。

还有一个致命的问题是，新手经常会写出死循环的代码。

功能组件如何解决？

由于设计模式使问题变得复杂，所以我们不要使用它并摆脱它。 所以功能组件中不存在这样的循环生命周期。 它和组件之间的通信是通过本机函数调用，而不是使用函数参数。 我们对函数调用已经非常熟悉了，它的行为很清晰，它让我们的代码执行流程变得有序。

函数参数的另一个好处是它可以保持数据干净。

想象一下，您有 10 个组件来控制行为。 您的数据必须有 10 个额外字段。 这是不必要的，因为它们只是临时变量。

我们来谈谈和比较一下

摆脱掉生命周期之后，也就摆脱掉了。 它允许组件完全由函数编写，并且函数输入参数是相同的。 这看起来与我们刚刚提到的函数调用组件相同。

但在解决更新问题时，它选择了重复执行，这意味着我们的组件又回到了无限循环执行的噩梦。 重复执行此操作是正确的，因为我们的组件应该始终呈现为最新的。 但其他应保持引用的变量无法重新创建。

然后，为了解决重复执行等导致的变量无法维持引用的问题，正是这些东西让我们的组件变得难以理解。 一定要了解原理，否则很容易写出bug或者有性能问题的组件。

功能组件如何解决？

同样，我们选择使用函数调用和函数参数来代替。 但在如何更新方面，功能组件选择使用额外的函数调用来解决重复调用的问题。

为什么要这样设计呢？ 优点是它具有实例状态，可以让我们方便地保存和读取需要引用的变量。 为了弥补这些问题，我们用显式函数调用替换了触发调用。

只需一个小小的改变，功能组件就可以将两个世界的优点结合在一起。 你可能会说，这就是四种不同的东西，里面还有思想，那你的这个东西到底是什么？

它是一个函数调用组件。 到底有没有用，还需要实践来证明。

至少，它允许我开发复杂的交互式组件，而不必浪费时间调试组件之间的通信问题，也不必浪费时间在如何管理和比较上。 我只需要考虑哪些部分的代码应该放在组件中。 即使一年后，当我回来查看复杂的交互组件代码时，我也能快速清晰地梳理出它的执行流程。

关于BB再多说几句

多说几句：函数调用组件完全构建在原生小程序之上。 它在运行时运行，而不是在构建时运行。 不打破小程序现有规则，不依赖任何框架。 它可以与 小程序共享。

BB最后两句

功能组件的灵感来自于实际业务。 它们最初是为了解决小程序中大量复杂的交互而设计的。 很多交互都涉及到RPC请求，还涉及到缓存、并发、时序问题，增加了小程序的开发难度。 尤其是小程序中涉及输入框的。 相信深入研究过小程序输入框的人都曾被它折磨过。 有很多交互会在各个页面中重复使用。 我们自然希望将其作为组件复用，但是编写组件确实让我们很累。 一是项目时间紧，基本是逆向的，二是复杂性和可维护性。

所以我们认为对于一个交互组件来说，它的行为触发一定是明确的，就像我们要调用一个模块或者一个系统的时候，它提供了一个API和输入参数，然后我们调用它，它处理然后将结果返回给我们。 这是一个函数调用。 UI交互必须由事件触发，可以是点击事件、长按事件，事件触发函数调用，交互结果在函数中处理。 声明式思想适用于没有交互的UI组件，或者交互结果明确可执行的组件。 如果交互结果可能被回滚，那么声明式组件如何表示语句被撤销的情况呢？