It is not advised to use Bootstrap directly with React because Bootstrap's JavaScript may alter the DOM directly, interfering with React's Virtual DOM system. Can one say the same about Angular (2+)?
Does Angular have the equivalent of React's Virtual DOM?
Asked Answered
No Angular 2 or 4 or what ever number they are now at, does not a have or use some form of virtualdom. –
Fugato
angular.io/docs/ts/latest/guide/… –
Turki
@Turki the link is not working! –
Nightmare
it is for me... try just going to angular.io/docs/ts/latest/guide/component-styles.html and check out the view encapsulation section –
Turki
Ok, got it. So does this mean that Native encapsulation mode should normally perform better, but would not be compatible with bootstrap JavaScript? –
Nightmare
what do you exactly mean by virtual dom? the term is very vague although it's used everywhere –
Agora
React's Virtual DOM term is overloaded. If you mean React Element - a JavaScript object that describes HTML elements or child components and is used during change detection (reconciliation), then no, Angular doesn't have an equivalent. It parses a template only once, creates bindings and processes these bindings during change detection. You can read more about it in the article I've written that compares change detection in both frameworks:
... because Bootstrap's JavaScript may alter the DOM directly, interfering with React's Virtual DOM system. Can one say the same about Angular
Yes, that is also may be true with Angular. You have to be careful for other libraries to not touch the DOM that Angular created. 3rd party libraries can only work with the DOM they themselves created, but they need to account for DOM changes processed by Angular, e.g. component destruction with its DOM elements. If 3rd party library appends a DOM node into a component's view and Angular destroys the host DOM element, you're going to have a memory leak because 3rd party library will hold the reference to nodes that are no longer in the DOM. Angular provides tools to work with the DOM, you can read more about them in:
Angular has something called L-view or logical view.
During the template creation stage, using the component definition created during the compilation stage, the HTML template is replicated by creating each element as per the HTML(they don't use innerHTML directly). As each of these elements gets created, they are pushed into the L-View along with their binding and directive info.
L-view is an angular internal data structure which is used to store the DOM and their attributes and then it is used to track these elements and update them during change detection in an efficient manner.
If you are looking for something similar to what the goal of VDOM is in Angular, then this is the thing. Note: 1 L-view is created per component instance
Please watch this talk from the angular team lead regarding the same: https://www.youtube.com/watch?v=S0o-4yc2n-8 She starts talking about the LView around the mark of 9:40
© 2022 - 2024 — McMap. All rights reserved.