非列表元素是否需设置React key？条件渲染重渲染疑问

1. 非列表的连续元素需要手动添加key吗？ #

不需要。key属性的核心作用是帮助React识别列表循环生成的动态元素，避免因元素增删、顺序变化导致的错误复用或状态丢失。对于示例中这种固定顺序的静态连续元素，手动添加key完全没有必要，属于冗余操作。

2. 条件渲染场景下，不添加key会发生什么？ #

看你给出的示例：
初始someCondition=false时，渲染的元素序列是：<p>b</p> → <button> → <CustomElement>
当someCondition变为true后，元素序列变成：<div className="foo">a</div> → <p>b</p> → <button> → <CustomElement>

React的diff算法对同级元素是按位置顺序逐个比对的：

• 第一步：对比第一个元素，旧元素是<p>，新元素是<div>，类型不匹配 → React会销毁原来的<p>节点，创建新的<div>节点；
• 第二步：对比第二个元素，旧元素是<button>，新元素是<p>，类型不匹配 → 销毁旧<button>，创建新<p>；
• 第三步：对比第三个元素，旧元素是<CustomElement>，新元素是<button>，类型不匹配 → 销毁旧<CustomElement>，创建新<button>；
• 第四步：新增第四个元素<CustomElement>，创建新节点。

这种情况下，原本始终显示的<p>、<button>、<CustomElement>会被完全卸载后重新挂载（不只是重渲染），如果这些元素有内部状态（比如输入框内容、组件自身的state），状态会直接丢失。

3. React是否会自动为普通非列表元素添加key？ #

不会。React只会在你通过数组循环生成元素（比如array.map()）时，提示你手动添加key；对于普通非列表元素，它不会自动分配key，而是依赖元素位置、类型、props的组合来识别元素身份。

4. 非列表元素不设key时，React如何识别同一元素？ #

React的diff逻辑是：

• 首先判断元素类型是否一致（比如<div>和<p>属于不同类型）；
• 类型一致的前提下，再对比props是否匹配；
• 对于自定义组件，还会校验组件的身份是否相同。

只有当类型和props都匹配时，React才会认为是同一个元素，从而复用已有的DOM节点，只更新变化的props，避免不必要的卸载/挂载。

但这种依赖位置的匹配逻辑，在元素位置发生变化（比如前面插入/删除元素）时就会失效，这也是为什么列表元素必须加key——key能让React忽略位置，直接通过唯一标识来匹配元素。

内容的提问来源于stack exchange，提问作者Sam Zhang