Question

我真的不知道如何解释这个问题，但我有小提琴要帮忙：

只有第25行被更改

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视图，看看点击Shuffle按钮时DOM发生了什么。

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

在第二个（错误的）情况下，元素的实际顺序被洗牌。虽然键1可以在随机播放之前处于第一位置，但是它可以在随机播放之后处于第四位置。项目的属性未得到适当更新;相反，React可能会创建项目已更改位置的新项目。因此，这会对您的过渡产生不可预测的影响。

React List渲染顺序必须一致吗？

1 个答案: