React.js:无状态子组件数组中的shouldComponentUpdate

时间:2015-03-04 00:56:19

标签: javascript reactjs

我有一个父React类(<EventList />),它包含一个存储其子组件(<Event />)数据的对象。为简洁起见,我省略了许多功能。

EventList

的状态背景
/**
 * The events state looks like this before the EventList component is rendered:
 *
 * var events = {
 *      1: {
 *          id: 1,
 *          title: "Some title"
 *      },
 *      2: {
 *          id: 2,
 *          title: "Some other title"
 *      },
 *
 *      ...
 * };
 */

Event.jsx

var Event = React.createClass({

    /**
     * Pass up the ID of the Event and the new value of the Event's Title
     */
    _handleChange: function (e) {
        this.props.handleChange(this.props.id, e.target.value);
    },

    render: function () {
        return (
            <div className="event">
                <input type="text" value={this.props.title} onChange={this._handleChange} />
            </div>
        );
    }
});

EventList.jsx

var EventList = React.createClass({

    propTypes: {
        events: React.PropTypes.object
    },


    /**
     * Update the State of an event who's title has changed
     */
    _handleChange: function (id, title) {
        var newState = React.addons.update(this.state.events[id].title, {
            $set: title
        });

        this.setState(newState);
    },

    render: function () {

        var renderedEvents = Object.keys(this.state.events).map(function (id) {
            var event = this.state.events[id];
            return <Event key={event.id} title={event.title} handleChange={this._handleChange}/>;
        }, this);

        return (
            <div className="events">
                {renderedEvents}
            </div>
        );
    }
});

现在这很好,它有效。标题的状态会更新,所有内容都会成功呈现和重新呈现;但那也是问题所在:

一切都重新呈现!

列表中的一些事件并不坏,但是一旦有了很多事件,重新渲染就会带来巨大的性能损失,因为EventList渲染功能会通过填充<Event />组件的新数组。

我希望能做的一件事(虽然假设它需要完全重组应用程序)才能在shouldComponentUpdate中使用<Event />成分

但是,根据我目前的关系,我无法做到这一点。如果您查看shouldComponentUpdate的默认参数:

shouldComponentUpdate: function(nextProps, nextState) {...},

您会注意到,在<Event />级别,this.props始终等于nextProps,因此请尝试执行以下操作:

shouldComponentUpdate: function(nextProps, nextState) {
    return this.props !== nextProps; 
},

将始终返回false,因为在这一点上,它们指向完全相同的数据集。当然,nextState级别不存在<Event />

所以我的问题是,我需要做些什么才能摆脱<EventList />级别极其昂贵的重新渲染?

1 个答案:

答案 0 :(得分:4)

问题在于您的更新通话。目前,您基本上是var newState = title。您需要实际更新顶级状态密钥。

_handleChange: function (id, title) {
    var update = {};
    update[id] = {title: {$set: title}};
    var newEvents = React.addons.update(this.state.events, update);

    this.setState({events: newEvents});
},

或者使用ES6,您可以避免使用本地变量:

_handleChange: function (id, title) {
    var newEvents = React.addons.update(this.state.events, {
        [id]: {
            title: {$set: title}
        }
    });

    this.setState({events: newEvents});
},