Javascript 反应列表呈现顺序必须一致吗？

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

只有第25行被更改

正确：

var ListAnimate=React.createClass({
getInitialState:函数（）{
返回{
名单：[
{id:1，标题：“你好”}，
{id:2，标题：“那里”}，
{id:3，标题：“Whatsup”}，
{id:4，标题：“Sanket”}，
{id:5，标题：“萨胡”}
]
};
},
shuffle:function（）{
this.setState（{list:this.state.list.shuffle（）}）；
},
render:function（）{
//创建列表的已排序版本
var sortedCopy=this.state.list.slice（）.sort（函数（a，b）{
返回a.id-b.id；
});
返回
洗牌

{sortedCopy.map（函数（el，i）{
//在无序列表中查找元素的位置
var pos=此.state.list.indexOf（el）；
return

{el.caption}{el.id}
；
}，这个）}

;
}
});
React.render（，document.body）；

错：

var ListAnimate=React.createClass({
getInitialState:函数（）{
返回{
名单：[
{id:1，标题：“你好”}，
{id:2，标题：“那里”}，
{id:3，标题：“Whatsup”}，
{id:4，标题：“Sanket”}，
{id:5，标题：“萨胡”}
]
};
},
shuffle:function（）{
this.setState（{list:this.state.list.shuffle（）}）；
},
render:function（）{
//创建列表的已排序版本
var sortedCopy=this.state.list.slice（）.sort（函数（a，b）{
返回a.id-b.id；
});
返回
洗牌

{this.state.list.map（函数（el，i）{
//在无序列表中查找元素的位置
var pos=此.state.list.indexOf（el）；
return

{el.caption}{el.id}
；
}，这个）}

;
}
});
React.render（，document.body）；

---

如果键可以确定唯一性，为什么每次都必须以相同的顺序呈现

li

对象？我不明白为什么

li

元素的顺序很重要，但我可能遗漏了一些明显的东西

请查看浏览器调试器的元素视图，以查看当您单击Shuffle按钮时DOM发生了什么

在第一种（正确的）情况下，DOM中唯一改变的是每个列表项的

style

属性。项目的顺序和内容不会改变，只会改变订单的外观。键X的元素在洗牌前后保持相同的位置，因此不需要创建新的DOM元素

---

在第二种（错误的）情况下，元素的实际顺序被洗牌。虽然键1可能在洗牌前处于第一个位置，但它可能在洗牌后处于第四个位置。项目的属性未及时更新；相反，React可能是在项目位置发生变化的情况下创建新项目。因此，这可能会对您的转换产生不可预测的影响。

这是正确的，我的假设是，仅仅因为在虚拟DOM中移动了

li

元素并不一定意味着它会因为

key

属性而被删除/重新创建，但在第二个示例中，当元素在vDOM中移动时，它将被删除/重新创建。因此，如果您不想在每次洗牌时重新创建元素，那么保持元素的顺序是至关重要的。吸取的教训。

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);

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);