Design and Implementation of Qreact: A Miniature React Framework for Mobile Web

Author Zhong Qincheng (online name Sutu Zhengmei), a well‑known JavaScript expert and former front‑end architect at Qunar, presents the background of Qreact, a mini‑React solution created to meet the strict bundle‑size constraints of Qunar's mobile applications.

The core requirements driving Qreact are threefold: a small footprint suitable for bandwidth‑limited mobile environments, a full‑featured synthetic event system compatible with React's 300 ms delay handling, and seamless drop‑in replacement for existing React 15 projects.

After evaluating open‑source alternatives such as Inferno, Preact, and react‑lite, the team selected Preact for its extensibility and active community, while also considering react‑lite for its close alignment with a partner company's stack.

Qreact’s architecture is essentially Preact plus custom patches: it incorporates a Preact‑compat layer, a trimmed‑down React‑Web event system, and modifications to the options.js object to inject additional event parameters and expose internal vnode properties required by Qunar’s codebase.

Key implementation challenges addressed include extending the event system to accept four parameters, exposing internal properties like _rootNodeID and _hostParent , and slimming the original 16 000‑line React event subsystem down to roughly 4 000 lines, resulting in a final minified bundle of about 39 KB (down from React’s 140 KB).

Performance optimizations involve reducing the number of virtual DOM nodes through hydration, recycling real DOM elements, and caching static sub‑trees, which together mitigate the impact of the smaller diff algorithm while preserving React‑like responsiveness, as verified by ListView benchmarks.

The presentation concludes with a demo of two flagship projects—yo‑demo and qunar‑react‑native‑web—showcasing Qreact’s practical benefits in real‑world mobile web deployments.