Salesforce componentRenderer.js important notes

If you want to modify DOM elements created by the framework for a component, modify the DOM elements in the component's renderer. Otherwise, the framework will override your changes when the component is re-rendered

The lightning framework will automatically render the component so you dont have to know anything about the rendering unless you want to customize the default rendering behavior,

the base component in the framework is aura:component. Every component extends this base component.

the renderer for aura:component has 4 phases of rendering and rerendering cycles

1) render()
2) rerender()
3) afterRender()
4) unrender()

the framework calls these functions as part of rendering and rerendering lifecycles.


Rendering Lifecycle

The rendering lifecycle happens once in the lifetime of a component unless the component gets explicitly unrendered. When you create a component:

1. The framework fires an init event, enabling you to update a component or fire an event after component construction but before rendering.

2. The render() method is called to render the component’s body.

3. The afterRender() method is called to enable you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements.


Rerendering Lifecycle

The rerendering lifecycle automatically handles rerendering of components whenever the underlying data changes. Here is a typical sequence.

1. A browser event triggers one or more Lightning events.

2. Each Lightning event triggers one or more actions that can update data. The updated data can fire more events.

3. The rendering service tracks the stack of events that are fired.

4. When all the data updates from the events are processed, the framework rerenders all the components that own modified data by calling each component’s rerender() method.

The component rerendering lifecycle repeats whenever the underlying data changes as long as the component is valid and not explicitly unrendered.

Create a Renderer

You don't normally have to write a custom renderer, but it’s useful when you want to interact with the DOM tree after the framework’s rendering service has inserted DOM elements. If you want to customize rendering behavior and you can’t do it in markup or by using the init event, you can create a client-side renderer.

These guidelines are important when you customize rendering.

• Only modify DOM elements that are part of the component. Never break component encapsulation by reaching in to another component and changing its DOM elements, even if you are reaching in from the parent component.

• Never fire an event as it can trigger new rendering cycles. An alternative is to use an init event instead.

• Don’t set attribute values on other components as these changes can trigger new rendering cycles.
• Move as much of the UI concerns, including positioning, to CSS.

Customize Component Rendering

Customize rendering by creating a render() function in your component's renderer to override the base render() function, which updates the DOM.

The render() function returns a DOM node, an array of DOM nodes, or nothing. The base HTML component expects DOM nodes when it renders a component.

You generally want to extend default rendering by calling superRender() from your render() function before you add your custom rendering code. Calling superRender() creates the DOM nodes specified in the markup.


render:function(cmp,helper){

var ret = this.superRender();
//do custom rendering here

return ret;

}

Rerender Components

If you update data in a component, the framework automatically calls rerender().

rerender : function(cmp,helper){

this.superRerender();

}

Access the DOM After Rendering

The afterRender() function enables you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements. It's not necessarily the final call in the rendering lifecycle; it's simply called after render() and it doesn't return a value.

afterRender: function(component,helper){

this.superAfterRender();

}


Unrender Components

The base unrender() function deletes all the DOM nodes rendered by a component's render() function. It is called by the framework when a component is being destroyed. Customize this behavior by overriding unrender() in your component's renderer. This method can be useful when you are working with third-party libraries that are not native to the framework.

unrender: function(){

this.superUnrender();

}