lleact

lleact is a toy implementation of React. It is a learning project to understand how React works.

Structure

Scheduler

The scheduler is responsible for scheduling work on the main thread. It uses the browser's micro task or macro task API to schedule work in chunks. Corresponds to react scheduler.

Reconciler

The reconciler implementation render phase and commit, that is responsible for:

• create and diffing the virtual DOM tree with the previous one.
• call lifecycle methods and hooks.
• create and update the real Host Instance tree.
• which is platform/Host independent.
• which use Scheduler to schedule work in chunks.

Corresponds to react-reconciler.

Renderer

Renderers manage how a React tree turns into the underlying platform calls.

Html DOM Host Renderer, which implements the Host Config interface, that create and update real DOM tree. Corresponds to react-dom

lleact Core

By react.js docs:

core only includes the APIs necessary to define components.

• [x] React.createElement()
• [ ] React.Component
• [ ] React.Children
• [ ] etc

TODO: difference With React

a、In lleact, we are walking the whole tree during the render phase. React instead follows some hints and heuristics to skip entire sub-trees where nothing changed.

b、We are also walking the whole tree in the commit phase. React keeps a linked list with just the fibers that have effects and only visit those fibers.

c、~~Every time we build a new work in progress tree, we create new objects for each fiber. React recycles the fibers from the previous trees.~~

d、~~When lleact receives a new update during the render phase, it throws away the work in progress tree and starts again from the root. React tags each update with an expiration timestamp and uses it to decide which update has a higher priority.~~

And many more…

TODO: features

• [x] use an object for the style prop
• [x] flatten children arrays
• [x] reconciliation by key
• [x] Scheduler Priority base and isInputPending check

Restruct Monorepo

• [ ] monorepo restruct

References

• build-your-own-react
• how-to-write-your-own-virtual-dom
• js-diff-benchmark
• 深度剖析：如何实现一个 Virtual DOM 算法
• react-dom-mini
• dom-expressions
• react-scheduler-implementation notes
• React Scheduler 为什么使用 MessageChannel 实现
• Algebraic Effects for the Rest of Us
• react-basic: algebraic-effects
• Fiber Principles: Contributing To Fiber
• react-fiber-architecture
• 彻底搞懂 React 18 并发机制的原理

TODO

• [ ] add test
• [ ] publish
• [ ] changeset
• [ ] demo
• [ ] monorepo 背景、解决的痛点、方案对比、优势、实现