javascript - react : Are keys reassigned when the underlying data-structure has been changed?

Question

我正在学习 React。目前正在尝试了解协调过程的工作原理。

我的 JSX 中有这个映射函数:

render: function () {
          var currentIssues = this.state.issues.map(function(issue, i) {
            return (
              <Issue key={ i } ... </Issue>
            );
          });   
          return ( ... )

我知道应该为每个子元素添加一个键属性。这样 React 就可以可靠地执行更新、删除、插入操作。

现在，假设我的数组中有五个问题元素。我删除了第二个元素。

render-function 会再次执行吗？

新的顺序会变成:0、1(原2)、2(原3)、3(原4)？

或者结构将是:0, 2, 3, 4 ？

Answer 1

简而言之，当更新列表时，对于列表中的每个项目，React 将检查具有该键的项目是否已经存在。如果是，它将更新该 DOM 节点，否则它将删除 DOM 节点。因此，将索引用作键通常没有意义。相反，为项目使用唯一标识符或只传入整个项目。

它对每个元素 ( source ) 执行的检查实际上非常简单。

实际reconciliation code遍历所有 child 有点复杂，但如果你很好奇......