使用React

Question

我在React中实现树视图。树视图具有拖放功能，可以在父节点周围移动节点。

考虑到这一点，当React协调我的组件树时：

<TreeNode key="item1">
    <TreeNode key="item2"/>
    <TreeNode key="item3"/>
    <TreeNode key="item4"/>
</TreeNode>

对于这样的事情：

<TreeNode key="item1">
    <TreeNode key="item2"/>
    <TreeNode key="item3"/>
</TreeNode>
<TreeNode key="item4"/>

它会保留item4（即不会卸载并重新安装）吗？是否有某种方法可以强制它在将其移动到新父级时保持该组件的完整性，或者React在调整兄弟姐妹时只考虑key吗？

Answer 1

首先，只是澄清 - React元素不应该被“保留” - 它是将被“保留”的底层DOM元素。

在可能的情况下，React会尝试重用DOM。

key属性决定DOM元素会发生什么。每当后续渲染过程中存在密钥时，DOM将被重用并更新内容。

引自 https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children

  

当孩子有钥匙时，React会使用钥匙来匹配孩子   在随后的树中有孩子的原始树。