我有一个父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"
* },
*
* ...
* };
*/
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>
);
}
});
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 />
级别极其昂贵的重新渲染?
答案 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});
},