React - Skip Virtual Dom Diff

shouldComponentUpdate return false to skip the re-rendering(Virtual Dom Diff). Below example skip the re-render after state no value greater than 10.

In your app has multiple component then you won't re-render full app for state or props changes. you put some condition wether re-render is necessary. So shouldComponentUpdate function should be light weight function.


var Hello = React.createClass({
    getInitialState:function(){
        return {name:"vimal",no:1}
    },
    shouldComponentUpdate:function(np,ns){
    if(ns.no<11)
    return true;
    else
    return false;
    },
    click:function(){
        this.setState({name:"vimalesan",no:this.state.no+1});
    },
    render: function() {
        return <div onClick={this.click}>Hello {this.props.name} {this.state.name+"-"+this.state.no}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

ReactJs

1. ReactJS - Server side Rendering Using Java(jdk1.7)

<%

String output="var value=[]";

ScriptEngineManager sem = new ScriptEngineManager();

ScriptEngine se = sem.getEngineByName("rhino");

// React depends on the "global" variable and console variable

se.eval("var global = this");

se.eval("var console = {}");

se.eval("console.warn = function(){};");

// eval react.js

se.eval(new FileReader("/react-0.12.2.js")); // React Location

se.eval(output); // variable for component props

se.eval(new FileReader("/Component.js")); // React Component location (Component should be converted js file not jsx file)

String render ="React.renderToString(React.createFactory(Component)({props: value}))";

%>

<%=se.eval(render)%> // execute the component get html as a string