3
votes

After reading the documentations and a few articles about ReactJS and Angular's (not AngularJS) change detection and rendering phases, I've come to a question which I'll try to explain in a few moments.

As you've probably read in React's docs (here and here), there exists this concept(if you will) called "Reconciliation" which basically refers to “The Diffing Algorithm” and the process which is executed after the “render” methods are called and the trees of React elements are created, and DOM should be updated accordingly... As it’s said in their documents, React implements a heuristic O(n) algorithm, which compares the new version of virtual DOM (VDOM) with the previous one, in order to efficiently only update those parts of view that have truly changed.

But talking about Angular, as I've read in some articles like here, here and here, it seems like Angular on the other hand, only looks at the "bindings" which it derives from the templates:

When the compiler analyzes the template, it identifies properties of a component that are associated with DOM elements. For each such association, the compiler creates a binding in the form of instructions. A binding is the core part of change detection in Angular.

and then:

Once bindings are created, Angular no longer works with the template. The change detection mechanism executes instructions that process bindings. The job of these instructions is to check if the value of an expression with a component property has changed and perform DOM updates if necessary.

so to wrap it up:

Processing bindings that perform dirty checks and update the relevant parts of the DOM are the core operations of change detection in Angular.

(from the third link)

So my question is, can we say that Angular achieves a similar performance boost as React when it runs the change detection exclusively on the "bindings" instead of the whole newly generated template/VDOM thus eliminating the need for an optimized diffing algorithm?

Or is there some other point in Angular's change detection which implements this kind of efficiency?

1

1 Answers

2
votes

can we say that Angular achieves a similar performance boost... thus eliminating the need for an optimized diffing algorithm

Yes

There's not much optimization actually going on in React. It simply compares the type of returned child elements and discards the tree. The comparison with keys is a it more involved. I'd say that Angular runs change detection faster because all children are known at the compile time, but React is more flexible since you can return a completely new child every single time. In Angular, there's a whole bunch of concepts that you need to know to dynamically change or remove children. In React, it's simply a matter of returning a different child from the render method.