9

When I read the lightning component code, it seems to me that although it is kind of two-way binding, it is not exactly the dirty-check mechanism as in Angular. Rather, it is using component.set() to trigger the rerendering of the Dom component. It seems very similar to React's setState() function to me. While the difference is React is setting all the state of the component at the same time while lightning component can happen at multiple lines.

So my question is, consider the following code:

component.set("v.a", a);
component.set("v.b", b);
component.set("v.c", c);

Will it rerender the DOM three times or just once? Will it only rerender the DOM partly just as virtual Dom does or rerender the whole component?

Since Javascript is a interpret language I strongly doubt about the optimization it can do here - a.k.a combine the set statements and only rerender at the last one. So if that is the case, how could we optimize the code here?

13

The answer to this lies in the rendering lifecycle explanation of the lightning components

Under the hood lightning components are formed from the XML from the server

Lighnting isn't a JS template engine which parses the template file to replace variables (Templates ---> HTML---> DOM)

1.The Server creates Java objects from component XML

2.Components are Serialized to JSON

3.The client creates JS component instances

4.The JS components create DOM elements

XML---> JAVA--> JSON--->JS--->DOM

When your component is finished rendering ,for all the values that has changed you will see a value change event thats fired and all the changed values stored in a list on the rendering service,resulting in the rerendering of any “dirtied” components.

This rerender check is done even if there’s no dirtied components or values.

So to answer your question it really does not matter if you have one set statements or multiple of them since Re-rendering of componenent happens once. If they all belong to same one component then the rerendering service will render that one component i.e a JS write back of the DOM .

If you have a lightning inspector you can actually see the JS function that gets called when value changes .

enter image description here

So as long as you truly need two way binding you can go with "{!v}" else if you need just a one way binding you can go with "{#v}"

All these concepts are derived from this video

  • Thank you for the answer and it is really good knowledge. But based on this, it seems to me that the rerendering mechanism is happening as a server logic as it needs Java to handle the XML. However, shouldn't it just be client side? – Lance Shi Oct 27 '16 at 6:32
  • 1
    No the rendering mechanism is client side .Once the components are formed that is once JSON is delivered to browser its just JS and DOM .So its Javascript code at client which is partially writing the DOM back.The key is its not parsing the DOM but rewriting the DOM – Mohith Shrivastava Oct 27 '16 at 6:35
  • Thanks for that. I did some experiments afterwards. It proves to me it is not dirty checking and actually only rerenders part of the dom. Seems to be very effective and convenient. – Lance Shi Oct 27 '16 at 7:05
  • Does Aura Component create Virtual DOM as LWC Does? – SFDC Aug 28 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.