Question

我正在学习React。目前正试图了解和解流程的工作原理。

我的JSX中有这个map-function：

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

我知道应该为每个子元素添加一个键属性。这样React可以执行update-，delete-，insert-operations可靠。

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

渲染功能会再次执行吗？

新订单将成为：0,1（前2），2（前3），3（前4）？

或者结构是：0,2,3,4？

Answer 1

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

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

所有孩子的实际reconciliation code有点复杂，但如果你有点好奇......

React：在基础数据结构发生变化时是否重新分配了密钥？

1 个答案: