Boost Mini‑Program Development with jQuery‑Style Functional Components

Introduction

Current mini‑program development mainly uses the React stack, either with Class components that rely on lifecycle methods or with Hooks that require deeper React knowledge, both of which have drawbacks such as difficult state reuse, complex component logic, and a steep learning curve.

jQuery‑Style Functional Approach

The article proposes a functional programming style for mini‑programs that mimics jQuery, allowing developers to write components as simple JavaScript functions without creating new syntax or DSLs.

Demo Overview

The demo shows an input‑popup component. The caller obtains the component instance via this.hook(componentName), calls show() to display the dialog, edits the input, and receives the value synchronously. The value is then set on the page with setData and the dialog is closed with close().

Only one line of AXML is needed to declare the component name, after which hook(componentName) returns the instance.

Component Implementation

The component follows standard mini‑program conventions. Its show and close methods are returned during the install lifecycle, which runs once at app initialization. The returned object becomes the component instance, exposing the two functions.

When input.show() is called, it is a regular JavaScript function call; the component’s methods behave like native mini‑program methods, accessing the instance via this and updating the view with setData.

Why Functional Components?

Compared to Class components, functional components eliminate complex lifecycles such as componentDidUpdate, avoiding unreadable code and infinite loops. Compared to React Hooks, they avoid repeated execution and the need for useState, useCallback, etc., resulting in clearer, more maintainable code.

Fully optional – no need to rewrite existing code.

100% backward compatible – runs on native mini‑programs without breaking changes.

Already in production for over a year.

Advantages Summary

Functional components combine the benefits of Class components (instance state) and Hooks (function‑based) while removing their pain points. They provide explicit JavaScript function calls for component communication, keep data clean by using function parameters instead of numerous Props, and simplify debugging of complex interactions.

Conclusion

The approach works entirely on top of native mini‑programs, requires no additional frameworks, and can be adopted incrementally. It aims to reduce development time for complex interactive components, especially those involving RPC requests, caching, concurrency, and sequencing.