首页 > 试题广场 >

在一个列表中渲染了多个 `Item` 组件，每个 `Item

[单选题]

在一个列表中渲染了多个 `Item` 组件，每个 `Item` 组件内部包含一个非受控的 `<input>` 元素。列表的初始数据为 `[{id: 1}, {id: 2}]`，对应的 `key` 分别为 `1` 和 `2`。用户在第一个 `Item` 的输入框中输入了文本 "hello"。随后，由于父组件状态变更，列表数据更新为 `[{id: 10}, {id: 2}]`，导致第一个 `Item` 的 `key` 从 `1` 变为了 `10`。请问这次重新渲染后，第一个输入框的状态是什么？

输入框中依然是 "hello"，因为 React 复用了 DOM 节点

输入框变为空，因为 `key` 变化导致旧组件被卸载，新组件被挂载

文本 "hello" 会转移到第二个 `Item` 的输入框中

由于渲染期间 `key` 发生变化，应用会崩溃

查看答案及解析

__sgf__

在React中，组件的key用于唯一标识组件身份，当key发生变化时，React会卸载旧组件并挂载新组件。本题场景中，第一个Item的key从1变为10，使得key为1的组件被卸载，其对应的非受控DOM节点被销毁，输入框内的内容‘hello’也随之丢失，而新挂载的key为10的组件中input元素初始状态为空，因此重新渲染后第一个输入框为空。选项A错误，因为key变化会阻止DOM复用；选项C错误，文本内容不会发生转移，且key为2的组件并未被卸载，其input状态得以保留；选项D错误，key变化只会触发组件正常重新渲染，并不会导致应用崩溃。

发表于 2026-03-22 06:14:19 回复(0)