Question

我当前的React示例实现类似于：

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函数，并在每次调用update方法时迭代整个数组。它喜欢一遍又一遍地做同样的事情。有没有办法让它只将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永远不会被调用，数组最终变为空（因此选择长度为1的索引破解代码）。

有没有一种巧妙的方法来实现这个？这是一个不错的选择吗？为什么大多数人只是使用map重复整个循环（如第一个例子所示）。

假设我的应用程序必须给我尽可能多的性能，因为它是一个实时应用程序，所以我不想每次都重复数组。

Answer 1

最佳做法是每次迭代整个数组。这可确保在呈现组件时始终准确表示状态。就性能而言，map函数应该相对便宜（除非你在数组中有数十或数十万个项目）。

React的想法是在更新DOM时经常会出现javascript应用程序的性能瓶颈。因为React以智能方式（https://facebook.github.io/react/docs/reconciliation.html）更新DOM，所以它可以帮助您避免性能问题。这样做的另一个好处是，您不需要在阵列更改时跟踪添加和删除元素。 React将为您做到这一点。

如果您需要进一步解释/推理，请告诉我。更多内容请阅读：https://facebook.github.io/react/docs/rendering-elements.html#react-only-updates-whats-necessary

防止在React渲染中循环

1 个答案: