JSFiddle - React, Tailwind, and code Playground
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",
addRandomChild: function() {
var newChildList = this.props.state.childList.concat([{ key: Math.random() , content: Math.random()}]);
var newState = { childList: newChildList };
renderNewState(newState);
},
shouldComponentUpdate: function() {
return true;
},
render: function() {
var childs = this.props.state.childList.map(function(child) {
return <ComponentChild key={child.key} content={child.content}/>
});
return <div>
<div onClick={this.addRandomChild}>add random child</div>
<div>{childs}</div>
</div>;
}
});
var ComponentChild = React.createClass({
displayName: "ComponentChild",
shouldComponentUpdate: function(nextProps) {
return nextProps.content !== this.props.content;
},
render: function() {
console.debug("rendering child",this.props);
return <div>{this.props.content}</div>;
}
});
var initialState = {
childList: []
};
var component = React.renderComponent(<Component state={initialState} />, document.body);
function renderNewState(state) {
console.debug("rendering new state",state);
React.addons.Perf.start();
component.setProps({state: state}, function() {
React.addons.Perf.stop();
React.addons.Perf.printWasted();
});
}