javascript - 当子属性更改时如何防止重新创建列表？

Question

我有一个名为 <Events events={Array} activeEventId={String} /> 的组件。 Events组件呈现 <Event event={Object} isActive={Bool} /> 的列表组件，例如

render () {
    let activeEventId,
        events;

    events = this.props.events;
    activeEventId = this.props.activeEventId;

    return <div>
        {events.map(function(event) {
            return <div key={event.id} >
                <Event event={event} isActive={event.id === activeEventId} />
            </div>;
        })}
        </div>;
}

改变activeEventId重新创建 Event 的整个列表每次都是。

如何更改仅 Event 的实现谁的isActive prop 已更改会重新渲染吗？

编辑:两者Events和Event组件是纯粹的，因为它们只依赖于它们的 props，根本不使用状态。

Answer 1

您可以将 event 对象和 activeEventId 值作为 props 传递给 Event 组件。然后你可以实现 shouldComponentUpdate 来检查它是否应该重新渲染。

shouldComponentUpdate: function(nextProps, nextState){
    //check if activeEventId changed
    return nextProps.activeEventId != this.props.activeEventId
}