MoxyNJ Documentation and Learning Notes

Fiber is a scheduling strategy designed to solve the problem of JavaScript blocking the browser's main thread (GUI rendering and JS execution are mutually exclusive). By breaking the reconciliation process into small units of work, React can yield control back to the browser every 16.6ms to handle high-priority tasks (like user input or animations), preventing the page from appearing "frozen."

React's architecture is split into three main modules:

1. Scheduler: Schedules when updates should happen.
2. Reconciler: Determines which components need updating (the CPU-intensive part that Fiber makes interruptible).
3. Renderer: Applies the updates to the actual DOM/view.

The Promise class provides several instance methods (on the prototype) and static methods for managing asynchronous flows.

Instance Methods (Promise.prototype):

• .then(): Appends fulfillment and rejection handlers.
• .catch(): Appends a rejection handler.
• .finally(): Appends a handler that executes regardless of the outcome.

Static Methods (Promise):

• Promise.resolve(): Returns a Promise object that is resolved with a given value.
• Promise.reject(): Returns a Promise object that is rejected with a given reason.
• Promise.all(): Waits for all promises to be fulfilled or any to be rejected.
• Promise.allSettled(): Waits for all promises to settle (either fulfilled or rejected).
• Promise.any(): Returns the first fulfilled promise.
• Promise.race(): Returns the first settled promise (either fulfilled or rejected).

React uses a double-buffering mechanism to manage the UI transition between the current state and the next state. It maintains two Fiber trees: the Current Fiber Tree and the Work In Progress (WIP) Fiber Tree.

During the rendering process, React builds the WIP tree. Once the WIP tree is fully constructed (becoming the finishedWork), the root.current pointer is updated to point to the WIP tree:

root.current = finishedWork;

This switch makes the WIP tree the new Current Fiber Tree. This ensures that lifecycle methods like componentDidMount and componentDidUpdate in the layout phase operate on the most recently updated tree.

The browser generates boxes based on an element's characteristics, primarily the display property. Most elements have a one-to-one relationship with a principal box (主体盒), which contains the element's content and its child boxes.

An exception is the list-item element, which generates both a principal box and a marker box (标记盒) for the bullet or number. The positioning of the marker box is dependent on the principal box.

React's update process is divided into three distinct modules/phases:

1. Scheduler (Scheduling Phase): Manages update tasks and assigns priorities. It creates the FiberRoot node and rootFiber for each ReactDOM.render() call.
2. Reconciler (Reconciliation/Render Phase): Determines which components need updating using a diffing algorithm. This phase is asynchronous and interruptible; if a higher-priority task arrives, the current reconciliation can be paused.
3. Renderer (Commit Phase): Applies the calculated changes to the actual DOM. Unlike the previous phases, the rendering process is synchronous and cannot be interrupted to ensure visual consistency.

The Virtual DOM is a lightweight JavaScript object representation of the real DOM. It contains essential information such as type (the tag), props (attributes excluding key and ref), and children.

Advantages of Virtual DOM:

1. Efficiency: Enables declarative programming via JSX; developers focus on business logic while React handles DOM manipulation.
2. Performance: Uses the diff algorithm and double-buffering to batch updates, minimizing expensive real DOM operations.
3. Compatibility: Provides a consistent event mechanism (event delegation and batching) across browsers and enables cross-platform rendering (e.g., React Native) by swapping the rendering engine.

TypeScript is a superset of JavaScript that adds static type-checking capabilities. It does not replace JavaScript but extends it. Key characteristics include:

• Compile-time Checking: Type checking occurs only during compilation. If errors are found, the compiler reports them, but it will still generate the compiled JavaScript output.
• Runtime Behavior: At runtime, TypeScript behaves exactly like standard JavaScript; no type checking is performed.
• Transpilation: TypeScript code must be transpiled (e.g., via Babel) into JavaScript to be executed in a browser or Node.js environment.

React uses a double-buffering mechanism to prevent UI flickering and allow the reconciliation process to be asynchronous and interruptible. It maintains two Fiber trees:

1. Current Fiber Tree: Represents the DOM currently rendered on the screen.
2. WorkInProgress Fiber Tree: A tree being constructed in memory during an update.

These trees are linked via the fiber.alternate pointer. When a high-priority task interrupts the construction of the WorkInProgress tree, the Current tree continues to ensure the UI remains stable. Once the WorkInProgress tree is complete, it replaces the Current tree, and the roles swap for the next update.