GitHub - jiayihu/react-tiny-dom: A minimal implementation of react-dom using rea...
source link: https://github.com/jiayihu/react-tiny-dom
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-tiny-dom
react-tiny-dom
is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API.
The purpose of this project is to show the meaning of each method of the ReconcilerConfig
passed to react-reconciler, by using a practical yet familiar environment: the browser DOM.
What's supported
- Nested React components
setState
updates- Text nodes
- HTML Attributes
- Event listeners
className
propstyle
prop
What's not supported yet, but I plan to
The following features of react-dom
are not supported yet but I'll probably add them:
- Web Components
Any other feature which doesn't help explaining the Renderer API
, like dangerouslySetInnerHTML
, won't be supported on purpose, to keep the source code minimal and focused on simplicity.
Installation
npm install
npm start # Runs the example using react-tiny-dom
How can I customize the methods logs in the console?
By default the demo logs most method calls of the Renderer, but you can pass a list of method names to exclude in the second parameter of debugMethods
, when passing the ReconcilerConfig
to Reconciler
.
const TinyDOMRenderer = Reconciler(
debugMethods(hostConfig, ['now', 'getChildHostContext', 'shouldSetTextContent'])
);
Obviously passing hostConfig
directly to Reconciler
will completely disable any method log.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK