Question

我最近一直在使用ReactJS但是当谈到＆＃34; key＆＃34;财产我真的不知道它是如何运作的。

在父组件中说我做的渲染如下：

render: function() {

  // dataList = [{id: 1}, {id: 2}, {id: 3}];  => initial state
  // dataList = [{id: 2}, {id: 3}, {id: 4}];  => second dataList state

  var someComponentList = [];

  this.state.dataList.forEach(function(data) {
    someComponentList.push(
      <SomeComponent key={data.id} id={data.id}/>
      )
  })

  return (
    <div>
      {someComponentList}
    </div>
    )
}

在SomeComponent中：

var SomeComponent = React.createClass({
    render : function({
        // Render work here
    }),
    componentWillReceiveProps: function(nextProps) {
        console.log(this.props.id == nextProps.id);
    }
})

所以在componentWillReceiveProps我希望3 false个控制台结果（如果我在key之后没有<SomeComponent>属性，我会这样做setState()但实际上我只有一个假，因为ReactJs似乎知道{id: 2}＆amp; {id: 3}即使在dataList州

中按不同顺序排列，也是相同的

我找到了一些关于Reactjs官方的简短文档：

当React协调键控子项时，它将确保任何具有键的子项将被重新排序（而不是被破坏）或被销毁（而不是重用）。

有人可以解释它是如何运作的吗？

Answer 1

https://facebook.github.io/react/docs/reconciliation.html#keys

如果指定密钥，React现在可以找到插入，删除，替换并使用哈希表在O（n）中移动。

它只是一个简单的哈希表（兄弟姐妹）查找，并使React尝试重用具有相同密钥的组件。

粗略解释，
没有钥匙：
[1] [2] [3]
[2] [3] [4]
list-wise diff，[updateAttributes x3]
用键：
[1] [2] [3]无零[2] [3] [4]
[2] [3] [4]，[2]的列表与[2]的密钥匹配没有变化，[3]有密钥... [3]没有变化，[4]没有密钥，没有更多的节点原始列表如此插入，[1]将被销毁

如何获得React密钥属性的清晰概念？

1 个答案: