reactjs – 为什么React的DOM协调不能按预期工作？

这是一个很好的问题.打开开发工具并查看交换项目时实际发生的情况,我感到有些惊讶.

如果你看一下,你可以看看React是什么.第二个元素根本没有改变它的样式支柱,只是交换内部文本节点,而第一个元素作为新元素被放入dom中.

如果我不得不猜测,这是因为在数组中交换两个项目的方式有效,其中至少有一个项目被复制到临时变量并放回到数组中.

我想也许如果你使翻译随机,这两个元素都会得到新的风格道具和动画,但这只会使它更清晰,这不是预期的行为.

在寻找解决方案的途中：

作为一个实验,如果我们提前创建节点,并通过React.cloneElement在渲染中传递索引prop,该怎么办？当我们在它时,让我们渲染一个跨度,如果索引=== 0,否则为div.无需担心的钥匙.

http://codepen.io/alex-wilmer/pen/pbaXzQ?editors=1010

打开开发工具现在可以准确地说明React的意图. React保留元素并仅更改相关部分,在本例中为innerText节点和元素类型.由于样式完全以1：1交换,因此不需要更新样式.

解：

您可以提前生成React元素,将它们保存在数组中,因此没有任何键可以随机移动并找出如何放回DOM中.然后使用不同的数组来跟踪预期的顺序.可能非常复杂,但它的工作原理！

http://codepen.io/alex-wilmer/pen/kXZKoN?editors=1010

const Item = function (props) {
  return (
    <div
      style={{position: 'absolute',transform: `translateY(${props.index * 20}px)`,transition: '0.5s linear transform'}}>
      {props.children}
    </div>
  )
}

const App = React.createClass({
  getInitialState () {
    return {
      items: [
        {item: 'One',C: <Item>One</Item>},{item: 'Two',C: <Item>Two</Item>}
      ],order: ['One','Two']
    };
  },swap () {
    this.setState({
      order: [this.state.order[1],this.state.order[0]]
    });
  },render: function () {
    return <div>
      <button onClick={this.swap}>Swap</button>
      <div style={{position: 'relative'}}>
       {this.state.items.map(x => 
          React.cloneElement(x.C,{ 
            index: this.state.order.findIndex(z => z === x.item) 
          }))
       }
      </div>
    </div>;
  }
});