3 ms·
It's a bit older (and focused on web), but you can try this https://github.com/pomber/didact https://github.com/pomber/didact At a high level though, you crea
by hajile 2y ago
It's a bit older (and focused on web), but you can try this
https://github.com/pomber/didact https://github.com/pomber/didact
At a high level though, you create a tree of nested objects. Each has a handful of special properties (children which contains an array of child objects being the most interesting to users). The rest of the properties are used to interface with the rendering engine by passing it configuration and (usually) event functions it can call when something happens.
That tree of objects gets passed to the rendering engine which turns the tree into some kind of output (DOM, Canvas, WebGL, Ink, etc)[0].
When something happens (an external event, a timer, event from the render engine, etc), your code potentially changes the object tree. React then walks that tree and uses a few shortcuts to quickly detect what has changed. Instead of re-rendering everything, it can give a list of things that have changed and what the new values are. The render engine then decides how to make those changes happen and the cycle repeats.
It's really pretty simple.
[0] https://github.com/chentsulin/awesome-react-renderer https://github.com/chentsulin/awesome-react-renderer