文章来自公众号@支付宝体验科技,
前言
目前小程序开发,React技术栈是主流,大部分人都在使用“类类组件”来开发小程序,即通过声明一个对象,利用各种生命周期来开发一个组件,最典型的就是支付宝AppX框架和微信小程序,我们也叫原生小程序。当然,有些组件是使用“Hooks”开发的 定制小程序 ,比如 Remix。
类组件和 Hooks 组件各有优缺点。
Class 组件的问题是组件之间的状态逻辑难以复用,复杂的组件变得难以理解,Class 难以理解。这些是 React 官网的原话。相信有写过Classes经验的人都知道。
Hooks 的问题在于入门门槛很高。你必须对 React 和 Hooks 有更深入的了解,否则很容易写 bug。
回想一下我们使用 jQuery 和一个 stud 的时候小程序订制 ,是不是很简单?是不是很简单?与其理解那么多人为的概念,不如回到最原始的问题解决编程。
本文介绍了一个 小程序开发 方法,该方法允许您以 jQuery 函数式编程风格开发小程序。
先看demo
, 持续时间 00:33
来电代码:
以上是一个典型的交互组件:弹出输入框组件:
1. 我们通过this.hook(componentName)获取输入框组件实例。
2. 输入框组件提供了一个 show() 函数来显示一个弹出窗口。
3. 用户对输入框中的内容进行编辑修改,然后点击Finish按钮。
4. show() 函数同步返回输入框的值。对于输入框组件,我们只关心它的返回值。
5. 最后我们通过setData在页面上显示用户输入的值,然后通过close()方法关闭弹窗。
可以看到,上面的代码调用了一个输入框组件,就像jQuery组件一样,可以通过一个函数来完成。
那么我的AXML应该怎么写呢?很简单,AXML 只需要一行:
只需在第10行声明组件componentName的名称,然后就可以通过hook(componentName)获取该组件的一个实例。任何功能组件都可以在一行中完成。
那我再问一遍,这个inputPopup组件是怎么写的?很简单 app系统软件开发 ,小程序怎么写组件,看代码:
组件的代码有点多,没关系,我们来分析一下:
这是一种标准的小程序编写方法,无需创建新的语法和 DSL,大家应该都熟悉了。
我们先来看入口。组件提供的 show 和 close 方法在安装生命周期中返回。安装生命周期在小程序初始化时执行。在整个小程序应用周期中只执行一次。它应该返回一个对象,也就是组件实例的值,也就是说,组件返回什么值,调用者获取该值。.
我们的组件返回两个函数 show 和 close,所以我们可以用 input.show 调用它。
那么当我调用 input.show 时会发生什么?很简单,它是一个 JavaScript 函数调用。可以看到show和close是组件的两个属性,和applet的方法完全一样。可以在函数中通过this访问实例,通过setData触发视图响应。
你现在明白了么?页面和组件之间的通信不再是 React Props,也不是 React Hooks,而是原生 JavaScript 函数调用。
这是小程序函数调用组件。
那是什么意思?
什么是函数调用组件?它本质上是一种设计模式,就像 Class 组件和 React Hooks 一样,你也可以将其理解为另一种组件间的通信方案。
正如 React Hooks 中介绍的那样微小程序定制,请记住功能上调用的组件是:
它与 Class 组件和 React Hooks 相比如何?
如果你仔细阅读上面的演示,你会发现它的优点。它最初是为了解决 Class 和 React Hooks 的问题而设计的:Class 组件编写繁琐,维护困难。React Hooks 的进入门槛很高,而且更复杂。
下面我们来分析一下函数式组件是如何解决上述问题的:
先说一下与Class的对比
Class 组件最大的问题是各种生命周期,其中最烦人的就是componentDidUpdate。它使复杂的组件不可读和不可维护。想象一下,当你编写一个复杂的交互组件时,它接受了 N 个 Props 选项,然后在 componentDidUpdate 中进行了一堆比较代码,只是为了找出哪些 Props 发生了变化。
我曾经维护一个h5数字键盘组件 小程序的费用 ,当其中一个道具发生变化时,它就像雪花引起雪崩一样,你不知道下一个状态会是什么。
componentDidUpdate 的另一个致命问题是新手经常写死循环代码。
如何解决功能组件?
由于 componentDidUpdate 的设计模式使事情变得复杂,让我们把它排除在外并杀死它。所以功能组件中不存在这样的循环生命周期。它与组件之间的通信是通过原生 JavaScript 函数调用,使用函数输入参数而不是 Props。函数调用我们已经很熟悉了,它的行为很清晰,它让我们的代码执行规则的流程遵循。
函数参数的另一个好处是它可以保持我们的数据干净。
想象你的组件有 10 个 Props 来控制行为,你的数据中必须有 10 个额外的字段,这是不必要的,因为它们只是临时变量。
让我们将它与 React Hooks 进行比较
React Hooks 杀死了 Class 和生命周期,也杀死了 componentDidUpdate,使得组件完全由 JavaScript 函数编写,函数输入为 Props,看起来和我们刚才说的函数调用组件一样。
但是它选择了重复执行的方式来解决 Props 更新的问题,也就是说,我们的 Hooks 组件又回到了无限循环执行的噩梦。重复对于 Props 是正确的,因为我们的组件应该总是渲染最新的 Props。但是其他应该保持引用的变量不能重复。
然后,为了解决变量重复执行无法保持引用的问题,引入了useState、useCallback等,让我们的Hooks组件难以理解。一定要了解Hooks的原理,否则很容易写出bug或者有性能问题的组件。
如何解决功能组件?
像 React Hooks 一样,我们选择使用函数调用而不是 componentDidUpdate 和函数参数而不是 Props。但是在如何更新 Props 上,功能组件选择使用额外的函数调用来解决重复调用的问题。
为什么要这样设计?Class的优点是它有实例状态,这让我们可以方便的保存和读取需要引用的变量。为了弥补 componentDidUpdate 带来的问题 微信小程序 费用 ,我们将 Props diff 触发的调用替换为显式的函数调用。
只需稍作改动,功能组件就将类和钩子的优点结合在一起。你可能会说这是四个不同,里面有Class和Hooks的想法,那这是什么鬼?
它是函数调用组件。它是否真正有用,必须在实践中证明。
至少,它可以让我开发复杂的交互组件,而不用浪费时间调试组件间的通信问题,或者如何管理 props 和 diff,我只需要考虑代码的哪些部分应该放在组件中。甚至一年后,当我回顾复杂交互的组件代码时微小程序定制,我也能快速清晰地梳理出它的执行流程。
还有两句BB
让我再重复几句:函数调用组件完全建立在原生小程序之上。它在运行时运行,而不是在构建时运行。不打破小程序现有规则,不依赖任何框架微小程序定制,可兼容原生小程序共享。
最后两句BB
功能组件的灵感来源于真实的业务。它最初是为了解决小程序中的大量复杂交互而设计的。许多交互涉及 RPC 请求,还涉及缓存、并发和计时问题。这就增加了小程序开发的难度,尤其是输入框涉及到小程序的时候,相信深入研究过小程序输入框的人都被它折磨过。有很多交互将在各个页面中重用。自然地,我们想把它作为一个组件来复用,但是写 Class 组件实在是太累了。一是项目时间紧迫,基本是倒置的,二是复杂性。和可维护性。
所以我们想,一个有交互的组件,它的行为触发一定要清晰,就像我们要调用一个模块或者一个系统的时候,它提供一个API,提供输入参数,然后我们调用它,它处理然后返回结果给我们。这是一个函数调用。UI交互必须由特定的事件触发,可以是点击事件、长按事件,也可以是触发特定函数调用的特定事件,对交互结果进行处理。声明式思想适用于没有交互的 UI 组件,或者交互结果清晰可执行的组件。如果交互结果可能会回滚,那么声明性组件如何代表声明被撤销时的情况?
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网