Renderer In Lightning Component Bundle
In this blog we are going to learn about how to use renderer service in lightning component bundle. Renderer service in lightning component bundle modify the DOM elements which is created by framework for a component. We use custom renderer to change or override the default rendering behaviour of the component.
Base component i.e. aura:component has a renderer called componentRenderer.js. For example your component name is firstCmp.cmp then renderer name will be firstCmpRenderer.js
Rendering Lifecycles
Rendering and Rerendering lifecycles contains four basic methods to render the component. These methods are :
1). render()
2). rerender()
3). afterRender()
4). unrender()
Custom Rendere
By overriding four basic methods of renderer we can update the DOM elements.Let’s learn how.
1). render():
It returns DOM node, an array of DOM node or nothing. To override the default rendering process we need to extend default render by calling superRender() method then write custom code.Example:
render : function(component, helper) {
var returnVal = this.superRender();
// Write your custom code here.
return returnVal;
}
2). rerender():
It allows the component to update themselves, when other component updates since they were last rendered. It doesn’t return any value. It automatically called when data is updated in the component. Call superRerender() to chain rerendering to the components in body attribute.
Example:
rerender : function(component, helper) {
this.superRerender();
// Write your custom code here.
}
3). afterRender():
It allows you to interact with DOM tree after rendering the DOM elements. It doesn’t return a value. Call superAfterRender() before your custom code to extend the default afterRender().
Example:
afterRender : function(component, helper) {
this.superAfterRender();
// Write your custom code here.
}
4). unrender():
It deletes all DOM nodes rendered by component’s render function. It call by framework when components is being destroyed.
Example:
unRender : function(component, helper) {
this.superUnrender();
// Write your custom code here.
}
Support
That’s all for how to use renderer service in lightning component bundle , still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to contact us, we will be happy to help you https://wedgecommerce.com/contact-us/.
