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;

四、运行结果