Understanding the React Node Desktop (RND) Architecture and React Fiber Implementation

RND (React Node Desktop) originates from the implementation of React Native on iQIYI's PC client. It combines a React JS framework, a Node.js runtime, and a native UI engine to provide a lightweight, cross‑platform solution for building desktop applications with JavaScript.

Traditional JS‑to‑native approaches inject native components into JavaScript, keeping the native development model. React JS introduces a new paradigm that cleanly separates the JS layer from the native layer, allowing developers to work entirely within the React paradigm.

The article focuses on React Fiber, the core architecture introduced in React 16. Key new features of React 16 include returning arrays from render, improved error handling via componentDidCatch , and support for custom DOM attributes. The most important change is the complete rewrite of the core using the Fiber architecture while preserving the existing API.

Before describing Fiber, several concepts are introduced: each node type receives a numeric tag, every component corresponds to a Fiber object, and the collection of Fibers forms the virtual‑DOM tree. Visual diagrams illustrate the numbering scheme, the Fiber object structure, and a complete virtual‑DOM tree.

Fiber node creation and update are divided into four phases within two main processes: creation and update. The initialization phase creates the root HostRoot node, mounts the root component, and schedules the first update. The workloop phase repeatedly processes units of work using a depth‑first traversal, generating the next unit of work via beginWork and completing work with completeUnitOfWork . Images show the workloop flow and the order of node creation.

Three primary update functions are described:

updateHostRoot : Handles the internal HostRoot node, deciding whether to create or reuse the AppContainer fiber.

updateClassComponent : Covers class components, detailing the construction, mounting, and finishing steps ( constructClassInstance , mountClassInstance , finishClassComponent ) as well as the update path ( updateClassInstance and finishClassComponent ).

updateHostComponent : In the creation phase calls reconcileChildren to create child fibers; in the update phase clones child fibers.

During the commit phase, commitAllWork invokes commitAllHostEffects to apply DOM changes based on effect tags, and commitAllLifeCycles to run lifecycle methods such as componentDidMount and componentDidUpdate .

The communication mechanism between the JS layer and the native layer in RND mirrors React Native: a messageQueue on the JS side collects commands, which are sent to the native BatchedBridge . The native side can invoke JS code via an EventEmitter , similar to window.eval in browsers, achieving bidirectional messaging.

Optimization and extension efforts in RND include bundle splitting (separating the framework base bundle from page‑specific job bundles), CSS‑3 animation support, additional CLI commands such as run-desktop , and TypeScript declaration files.

The article concludes that RND demonstrates the viability of React‑based desktop applications for content‑driven, fast‑iteration products, and predicts that JavaScript will become a dominant language for desktop UI development.