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才会重新渲染的实现？

编辑：Events和Event组件都是纯粹的，因为它们只依赖于它们的道具，并且根本不使用状态。

Answer 1

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

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

Answer 2

您可以使用React生命周期方法之一来实现它，它是shouldComponentUpdate

您必须检入shouldComponentUpdate，如果您返回false，则必须调用组件的render方法，然后使用shouldComponentUpdate

来调用您的render方法以获取更多信息

如果你想根据条件实现它，那么你有一个标记可以保存true和false的值，你可以在你的渲染方法中应用

{isRender==true? <Event event={event} isActive={event.id === activeEventId} />:null}

Answer 3

您可以采取两种方法：

1）在Event组件上实现shouldComponentUpdate。这是一个fiddle，您的示例使用了基本的shouldComponentUpdate方法。在日志中，您可以看到只有2个事件被重新渲染（变为活动的事件和不再激活的事件）。如果代码中的Event组件被破坏，您可能无法正确生成密钥，请确保它们在渲染之间保持一致。

2）假设您正在使用某些Flux变体，您可以让您的Event组件在商店中侦听并将isActive标志保持在其状态中，并在存储触发时更新它相应的变化。这样效率更高一些，因为它不会重复调用EventList.render甚至Event.shouldComponentUpdate。只有实际更改的事件才会通过更新状态和重新呈现来响应更改。然而，这会引入更多的复杂性，因为它会强制您将状态放在子组件中，这总是您想要避免的。我绝对会尝试使用1），除非你真的需要优化每一位。

如何在子属性更改时阻止重新创建列表？

3 个答案: