2 ms·
Some people here seem to have a hard time understanding that React !== DOM React is descriptive. It creates a virtual tree and tells how that tree should be ch
by hajile 2y ago
Some people here seem to have a hard time understanding that React !== DOM
React is descriptive. It creates a virtual tree and tells how that tree should be changed.
What that tree renders into is a completely different problem. On the web, it renders into HTML. On your phone (ReactNative), it renders into native GUI. In ink, it uses a render engine to concat and output the text results (it's a little more complex than that as it uses Yoga[0] today).
[0] https://www.yogalayout.dev/ https://www.yogalayout.dev/
- seveibar 2y agoI love Yoga (flexbox++ engine built by Meta), and yes most people don't understand that React is simply not coupled to the DOM!
- rkagerer 2y agoIs there a good resource that explains what React is and how it works, without limiting the focus to just the usual web applications?
- hajile 2y agoIt'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
- acemarke 2y agoIn addition to the excellent "Didact" article that explains how to _build_ React and its internals, I have an extensive "Guide to React Rendering Behavior" post that explains the user-visible behavior and mental model of rendering: - https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/ https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-... I can also recommend Dan Abramov's post "React as a UI Runtime": - https://overreacted.io/react-as-a-ui-runtime/ https://overreacted.io/react-as-a-ui-runtime/ and then of course the actual React docs for learning how to _use_ React: - https://react.dev/learn https://react.dev/learn
- branislav 2y agoOne way to look at React is as an open loop desired state system, where you have a declarative way (js/jsx) of describing what you want to render and the reconciler figures out what operations to do (in the DOM), ideally in an effective way. But you could swap out the render target to other things. I wrote about it some time ago https://branislavjenco.github.io/desired-state-systems/ https://branislavjenco.github.io/desired-state-systems/