渐进式编程课
React 目录
第 18 课2026.09.23

重新排列课程列表时，让每条课程的输入框继续对应原课程。

第 18 课：稳定 key 保留列表项身份

  • 日期：2026-09-23
  • 课程序号：第 18 课
  • 知识点：重排时的组件身份

用途或适用场景

重新排列课程列表时，让每条课程的输入框继续对应原课程。

核心概念

key={item.id} 让 React 按业务 ID 匹配重排前后的 LessonItem；数组索引会随着位置变化，不能代表课程身份。

最小代码或操作示例

jsx
import { useState } from 'react';

function LessonItem({ item, onRename }) {
  return <li><input defaultValue={item.title} />
    <button onClick={() => onRename(item.id)}>重命名</button></li>;
}

export default function LessonList() {
  const [lessons, setLessons] = useState([
    { id: 'l1', title: 'React' }, { id: 'l2', title: 'Vue' }
  ]);
  const onRename = id => console.log(id);
  return <>
    <button onClick={() => setLessons(items => [...items].reverse())}>反转顺序</button>
    <ul>{lessons.map(item =>
      <LessonItem key={item.id} item={item} onRename={onRename} />
    )}</ul>
  </>;
}

3～5 分钟练习

编辑第一条课程的输入框，再反转列表，观察输入内容跟随哪条课程。

参考答案

输入框随同一 item.id 的组件移动；保留稳定 key 时，不会错误地留在原数组位置。

与上一课的联系

沿用第 17 课的 LessonItem、lessons.map 和 key={item.id}；本课只增加反转顺序来验证 key 对输入框身份的作用；完成后下一课可把输入框改为受控编辑并提交标题。

时效校验

时效校验：2026-09-24（React 官方教程；稳定 key 与组件状态保留规则未见废弃标记）。

官方参考