javascript - React List渲染顺序必须一致？

Question

我真的不知道如何解释这个问题，但我有 fiddle 可以帮助:

仅第 25 行发生更改

正确:http://jsfiddle.net/0maphg47/5/

var ListAnimate = React.createClass({
    getInitialState: function() {
        return {
            list: [
                {id: 1, caption: "Hello"},
                {id: 2, caption: "There"},
                {id: 3, caption: "Whatsup"},
                {id: 4, caption: "Sanket"},
                {id: 5, caption: "Sahu"}
            ]
        };
    },
    shuffle: function() {
        this.setState({ list: this.state.list.shuffle() });
    },
    render: function() {
        // create a sorted version of the list
        var sortedCopy = this.state.list.slice().sort(function(a, b) {
            return a.id - b.id;
        });

        return <div>
            <button onClick={this.shuffle}>Shuffle</button>
            <ul>
                {sortedCopy.map(function(el, i) {
                    // find the position of the element in the shuffled list
                    var pos = this.state.list.indexOf(el);
                    return <li key={el.id} style={ {top: (pos*60)+'px'} }>
                        {el.caption} {el.id}
                    </li>;
                }, this)}
            </ul>
        </div>;
    }
});

React.render(<ListAnimate />, document.body);

错误:http://jsfiddle.net/0maphg47/6/

var ListAnimate = React.createClass({
    getInitialState: function() {
        return {
            list: [
                {id: 1, caption: "Hello"},
                {id: 2, caption: "There"},
                {id: 3, caption: "Whatsup"},
                {id: 4, caption: "Sanket"},
                {id: 5, caption: "Sahu"}
            ]
        };
    },
    shuffle: function() {
        this.setState({ list: this.state.list.shuffle() });
    },
    render: function() {
        // create a sorted version of the list
        var sortedCopy = this.state.list.slice().sort(function(a, b) {
            return a.id - b.id;
        });

        return <div>
            <button onClick={this.shuffle}>Shuffle</button>
            <ul>
                {this.state.list.map(function(el, i) {
                    // find the position of the element in the shuffled list
                    var pos = this.state.list.indexOf(el);
                    return <li key={el.id} style={ {top: (pos*60)+'px'} }>
                        {el.caption} {el.id}
                    </li>;
                }, this)}
            </ul>
        </div>;
    }
});

React.render(<ListAnimate />, document.body);

如果键可以确定唯一性，为什么我们每次都必须以相同的顺序渲染 li 对象？我不明白为什么 li 元素的顺序很重要，但我可能遗漏了一些明显的东西

Answer 1

查看浏览器调试器的 Elements View ，了解单击“Shuffle”按钮时 DOM 发生的情况。

在第一种(正确)情况下，DOM 中唯一发生变化的是每个列表项的 style 属性。项目的顺序和内容不会改变，只有顺序的外观发生变化。键 X 的元素在 shuffle 前后保持在相同位置，因此不需要创建新的 DOM 元素。

在第二种(错误)情况下，元素的实际顺序被打乱。虽然键 1 在随机播放之前可能位于第一个位置，但在随机播放之后它可能位于第四位置。元素的属性没有更新到位；相反，React 可能会在某个项目已更改位置的情况下创建新项目。因此，这可能会对您的转换产生不可预测的影响。