防止内部循环反应渲染

Question

我当前的反应示例实现看起来像：

var MyComponent = React.createClass({
    getInitialState: function () {
        return {x: []};
    },
    //..... Some stuff here
    render: function () {
        var x = this.state.x;
        var fx = messages.map(function (m, i) {
            return React.createElement(SomeChildComponent, {data: val1});
        });
        return (
                React.createElement('div', {}, fx));
    }
});

如您所见，它运行map函数，并在每次更新方法中迭代整个数组。就像一遍又一遍地做同样的事情。是否有一种方法，以便仅将ReactChildComponent添加到最终数组索引中。类似：

var MyComponent = React.createClass({
    getInitialState: function () {
        return {x: []};
    },
    ComponentWillReceiveProps: function() {
        this.state.x.push(this.props.data);
    },
    render: function () {
        var x = this.state.x;
        var xl = x. length;
        x[xl - 1] =  React.createElement(SomeChildComponent, {prop1: val1, prop2: val2});
        return (
                React.createElement('div', {}, xl));
    }
});

这样，我只能将值分配给数组的最终索引，仅保留在那里，因此我不必每次都迭代数组。我尝试了一下，但是以某种方式ComponentWillReceiveProps从未被调用，并且数组最终被空了（因此选择Length-1索引破坏代码）。

是否有一种整洁的方法来实施此功能？这是一个不错的选择吗？为什么大多数人在大多数情况下都使用map重申整个循环（如第一个示例所示）。

假设我的应用程序必须给我尽可能多的实现实时应用程序的性能，所以我不想每次都重申。

Answer 1

最佳实践将是每次在整个数组中迭代。这样可以确保在渲染组件时始终准确表示状态。就性能而言，地图功能应相对便宜（除非您在数组中有数十万个项目）。

React的想法是，更新DOM时，JavaScript应用程序的性能瓶颈通常会发生。因为React以智能的方式更新DOM（https://facebook.github.io/react/docs/reconciliation.html），它可以帮助您避免绩效问题。这额外的好处是，随着阵列的变化，您无需跟踪添加和删除元素。React将为您做到这一点。

让我知道您是否需要进一步的解释/推理。更多要在此处阅读：https：//facebook.github.io/react/docs/rendering-elements.html#reaeact-only-pondates-whats-whats-whats-whats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-nats-neScepary