React-用ImmutableJS提高性能

一、需求

1.子组件有更新时，只重新渲染有变化的子组件，而不是全部

二、ImmutableJS原理





三、代码

1.CheckboxWithLabel.jsx

var React = require('react/addons');
var CheckboxWithLabel = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.label !== this.props.label;
},
onChange: function() {
this.props.onChange(this.props.label.get("id"));
},
render: function() {
return (
<label>
{this.props.label.get("text")}
<input type = "checkbox" checked={this.props.label.get("checked")} onChange={this.onChange}/>
{this.props.label.get("checked") ? this.props.label.get("on") : this.props.label.get("off")}
</label>);
}
});

module.exports = CheckboxWithLabel;

2.SurveyList.jsx

var React = require('react/addons');
var Immutable = require('immutable');
var CheckboxWithLabel = require('./CheckboxWithLabel.jsx')

var SurveyList = React.createClass({
mixins: [React.addons.PureRenderMixin],
getInitialState: function() {
return Immutable.fromJS({
items: [
{
id: 0,
text: "你喜欢吃萝卜吗？",
on: "喜欢",
off: "不喜欢",
checked: false
},
{
id: 1,
text: "你喜欢吃西瓜吗？",
on: "喜欢",
off: "不喜欢",
checked: false
},
{
id: 2,
text: "你喜欢吃香蕉吗？",
on: "喜欢",
off: "不喜欢",
checked: false
}
]
});
},
onChange: function(labelId) {
var newState = this.state.setIn(["items", labelId, "checked"], !this.state.getIn(["items", labelId, "checked"]));
this.replaceState(newState);
},
render: function() {
var that = this;
return (
<div>
{
this.state.get("items").map(function(label) {
return <div><CheckboxWithLabel label={label} onChange={that.onChange.bind(that)}></CheckboxWithLabel></div>
})
}
</div>);
}
});

module.exports = SurveyList;

3.app.jsx

var React = require('react/addons');
var SurveyList = require('./SurveyList.jsx');

React.render(<SurveyList></SurveyList>, document.body);
Perf = React.addons.Perf;

四、运行结果