List Rendering 列表渲染

最后更新：2026-10-28

React 用 map() 把数组转换成一组 JSX 元素实现列表渲染：准备一个数据数组，为每一项返回带唯一 key 的 JSX，就能把任意集合渲染成列表，数据一变列表自动更新。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

<ul>
  {todos.map((todo) => (
    <li key={todo.id}>{todo.text}</li>  // map：数组 → JSX 数组
  ))}
</ul>

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

标题显示任务数量，下方列表展示三条待办；点击「添加任务」后列表实时多出「任务 4」「任务 5」……数量同步更新。

⚠️ 注意 map 返回的每个元素都必须带稳定唯一的 key，否则控制台警告且更新时可能错位。

💡 提示 列表项 JSX 复杂时抽成独立子组件，map 里只写 <TodoItem key={t.id} todo={t} />。

ℹ️ 说明 除了 map，filter、slice 等返回新数组的方法也常与列表渲染搭配使用。

更多案例整理中，敬请期待。

Q React 中如何渲染列表？

A 用数组的 map 方法把每一项映射成 JSX 元素并带上 key，返回的 JSX 数组会按顺序渲染成列表。

Q map 渲染列表为什么需要 key？

A key 告诉 React 每一项的身份，Diff 时据此判断哪些项要新增、移动或删除，缺了它更新容易错位且性能差。

Q 列表项是组件时 key 加在哪里？

A 加在最外层的列表项组件调用上：<TodoItem key={t.id} />，而不是传进组件内部的第一个元素。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。