Javascript 元素不'；在React中css转换的状态更改无法生存

我有一个高分列表，每分钟自动更新一次当前分数

然后用

this.setState（{data:newData}）更新组件

下面我将按分数对新数据进行排序，通过更新其
样式的
映射运行每个项目

Javascript

...

let current = this.state.data.sort((a,b) => {
  if(a.score < b.score) return -1;
  if(a.score > b.score) return 1;
  return 0;
});

let items = current.map((item,i) => {
  return (
    <div
      key={item.name}
      className="item"
      style={{ top: (i*30) + 'px', backgroundColor: item.color }}>
        {item.name}
    </div>
  );
});

return (
  <div>
    {items}
  </div>
);

我希望项目上下移动到它们的新位置，但这不会发生。浏览器似乎能记住DOM的一部分，但不能记住其他部分

如果我使用React Developer工具检查，React似乎通过使用unique键来理解哪个项是哪个项，但实际的DOM没有

更奇怪的是，似乎只有上移的项目（分数更高）被记住。将重新创建向下移动的项目，因此转换不起作用。他们只是突然出现，没有转换到新的位置

React重画您更新的DOM元素。这将解决非常奇怪的行为，如眨眼、跳跃等

React团队在开始研究光纤之前提供了一些解决方案。随着Fiber的发布，我希望我们将看到对过渡和动画的更好支持

在此之前，我建议您对动画使用外部LIB，例如：
对于普通动画

对于进入和退出DOM的元素。
如果对其进行更改，使项目不会在渲染周期之间重新排序，而是始终以相同的顺序使用不同的顶部样式进行渲染，则会正确设置动画。我认为这是因为更改元素的顺序会迫使它们从DOM中删除，然后由react重新添加

有关守则如下：

render() {
    let current = this.state.data.slice().sort((a,b) => {
        if(a.score < b.score) return -1;
        if(a.score > b.score) return 1;
        return 0;
    });

    let items = this.state.data.map(item => {
        let position = current.indexOf(item);
        return (
          <div
            key={item.name}
            className="item"
            style={{ top: (position*30) + 'px', backgroundColor: item.color }}>
                {item.name}
          </div>
        );
    });

    return (
      <div>
        {items}
      </div>
    );
}

render（）{
让current=this.state.data.slice（）.sort（（a，b）=>{
如果（a.scoreb.score）返回1；
返回0；
});
让items=this.state.data.map（item=>{
let position=当前索引（项目）；
返回(
{item.name}
);
});
返回(
{items}
);
}

太完美了！非常感谢。
render() {
    let current = this.state.data.slice().sort((a,b) => {
        if(a.score < b.score) return -1;
        if(a.score > b.score) return 1;
        return 0;
    });

    let items = this.state.data.map(item => {
        let position = current.indexOf(item);
        return (
          <div
            key={item.name}
            className="item"
            style={{ top: (position*30) + 'px', backgroundColor: item.color }}>
                {item.name}
          </div>
        );
    });

    return (
      <div>
        {items}
      </div>
    );
}