Explain Render and Rerender in Salesforce Lightning.

Hello Shradha,

Rendered:

This to rendered(ie., display) particular filed or section based on boolean value.  In the controller you need to have get method to assign the value for this variable.

Eg:

<apex:inputField value=”{obj.Filed_C}”  Rendered=”{!val == true}”/>

controller:

public boolean val{get;set;}

method(){
val = true;
}

ReRender:

This is to ReReder(ie.,Reload) some fields, or sections  after some operation/change. For this you need to assign id to field, sections.

Eg:

<apex:actionRegion>
    <apex:inputField value=”{!test}” >
        <apex:actionSupport event=”onchange” rerender=”yrs,yrss,yrsss,nodays,nohours,nominutes” action=”{!test}” >
            <apex:param name=”Para” value=”{!rowNum}” assignTo=”{!IndexValue}” />
        </apex:actionSupport>
    </apex:inputField>
</apex:actionRegion>

Hi,

Create a Custom Renderer
The framework’s rendering service takes in-memory component state and creates and manages the DOM elements owned by the component. If you want to modify DOM elements created by the framework for a component, you can modify the DOM elements in the component’s renderer. Otherwise, the framework will override your changes when the component is rerendered.
The DOM is the language-independent model for representing and interacting with objects in HTML and XML documents. The framework automatically renders your components so you don’t have to know anything more about rendering unless you need to customize the default rendering behavior for a component.

Base Component Rendering
The base component in the framework is aura:component. Every component extends this base component.

The renderer for aura:component is in componentRenderer.js. This renderer has base implementations for the four phases of the rendering and rerendering cycles:

render()
rerender()
afterRender()
unrender()
The framework calls these functions as part of the rendering and rerendering lifecycles and we will learn more about them soon. You can override the base rendering functions in a custom renderer.

Hope this helps.

hi,

render

render : function(component, helper) {
var ret = this.superRender();
// custom rendering logic here
return ret;}

rerender

rerender : function(component, helper){
this.superRerender();
// custom rerendering logic here
}