shouldComponentUpdate
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Babel + JSX
var Input = React.createClass({
getInitialState: function() {
return {text: ''}
},
updateText: function(e) {
this.props.updateText(e.target.value);
},
render: function() {
return (
<input type='text' onChange={this.updateText} />
)
}
})
var Text = React.createClass({
render: function() {
return (
<div>{this.props.text}</div>
)
}
})
var Form = React.createClass({
getInitialState: function() {
return {text: 'empty'}
},
shouldComponentUpdate: function(nextProps, nextState) {
console.log(this.props)
console.log(nextProps)
console.log(this.props === nextProps)
return nextState.text === 'anton';
},
updateTextForm: function(value) {
console.log(value);
this.setState({text: value});
},
render: function() {
return <div>
<Input updateText={this.updateTextForm}/>
<Text text={this.state.text} />
</div>;
}
});
ReactDOM.render(
<Form />,
document.getElementById('container')
);