JSFiddle - React, Tailwind, and code Playground

by koba04

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */


var Component = React.createClass({
    displayName: "Component",
    shouldComponentUpdate: function(nextProps) {
        return this.props.appState.childList !== nextProps.appState.childList;
    },
    render: function() {
        var childs = this.props.appState.childList.map(function(child) {
            return  <ComponentChild key={child.key} content={child.content}/>
        });
        return <div>
           <h1>Parent</h1>
           <div>{childs}</div>
        </div>;
    }
});

var ComponentChild = React.createClass({
    shouldComponentUpdate: function(nextProps) {
        return this.props.content !== nextProps.content;
    },
    render: function() {
        console.debug("ComponentChild render");
        return <div>{this.props.content}</div>;
    }
});





var appState = {
    childList: []
};

var component = React.renderComponent(<Component appState={appState}/>, document.body);

function updateStateAndRender() {
    // Add item in the list of the state (without modyfing previous state with push)
    var newChildList = appState.childList.concat([
          { 
              key: Math.random() , 
              content: Math.random()
          }
    ]);
    appState = { childList: newChildList };
    
    // Render
    console.debug("rendering appState",appState);
    React.addons.Perf.start();
    component.setProps({appState: appState}, function() {
        React.addons.Perf.stop();
        React.addons.Perf.printWasted();
    });
}



setInterval(function() {
   updateStateAndRender(); 
},5000);