2 ms·
As I understand Angular, objects are mutable, and Angular must perform deep dirty checks on every object to be perfectly consistent. As pointed out by the autho
by lobster_johnson 12y ago
As I understand Angular, objects are mutable, and Angular must perform deep dirty checks on every object to be perfectly consistent. As pointed out by the author of the blog post, this needs to be repeated until there are no more changes detected. That's the whole point of Angular's digest loop.
React's data model is much simpler, at least at a high level. State changes are explicit, and data is immutable. This means that whenever you give a component new props, it can simply do a deep comparison of the data with the previous version and mark the component as dirty if it's changed. (Setting a new state always triggers a re-render, no matter if the data is different or not.) Since data changes only happen explicitly, and flow naturally through component nesting, it doesn't need process a lot of data to figure out what needs to be updated.
The list of dirty components is then processed to produce the virtual DOM, which is then diffed against the real DOM. Doing anything with the real DOM is expensive, whereas the virtual DOM is extremely fast. So is building the virtual DOM; while it's true that a component's render() method needs to build its own tree every time it's called, re-rendering is extremely fast, even if you actually change state near the root of the virtual DOM (which causes a bigger cascade of dirty checks). Current JS engines are capable of creating tens of thousands of objects in just a few milliseconds.
(There are a few of optimization tricks you can use to avoid renders, too. In particular, there is PureRenderMixin, which declares that your component is "pure", meaning that given the same props and state, it will always render the same tree, allowing React to do shallower checks to determine if a render is needed.)