当前位置: 首页 > news >正文

react 中 keys 的作用是什么?

在 React 里,key 是一个特殊的属性,用来帮助 React 高效地识别哪些元素发生了变化(增删改)。

作用

列表渲染时唯一标识
  • 当你用 map 渲染一组组件时,每个元素都要有 key。

  • React 通过 key 来判断元素是否复用。

{list.map(item => (<li key={item.id}>{item.name}</li>
))}
提升渲染性能
  • 如果 key 一样,React 认为是“同一个元素”,就会复用旧 DOM 节点。

  • 如果 key 不一样,就会卸载旧的,重新创建新的。

正确 key:稳定且唯一(如数据库 id)
错误 key:使用数组下标(可能导致复用错位问题)

避免 UI 错乱
  • 如果 key 用不好,会出现表单输入框错乱、动画抖动、状态丢失等情况。

举个例子

const [items, setItems] = useState(['A', 'B', 'C']);// 移除第一个
setItems(['B', 'C']);
用下标作为 key
items.map((item, index) => <li key={index}>{item}</li>)

React 看到 DOM 节点 key 没变,就会复用旧节点,导致数据和 UI 不对应。

用 item 作为 key
items.map(item => <li key={item}>{item}</li>)

React 会发现 A 不见了,正确移除它,B、C 保持稳定。

总结

  • key 是 React diff 算法的核心优化点。

  • 作用:唯一标识列表中的元素,帮助 React 高效更新 UI。

  • 推荐用 唯一 id,不要用数组下标(除非列表静态且不会变)。

http://www.hskmm.com/?act=detail&tid=17177

相关文章:

  • 破局与进化:火山引擎Data Agent从落地实践到架构未来
  • 五项能力斩获满分!天翼云云WAF获IDC权威认可!
  • 什么样的代码可以称得上是好代码? - 浪矢
  • 微软Teams Channel Agent上线:中国卖家AI赋能品牌出海新机遇与实战策略(2025前瞻) - 详解
  • docker制作
  • lvgl 9.3 style使用导致内存泄漏问题
  • 【AI领域】如何写好Prompt提示词:从新手到进阶的完整指南 - 详解
  • 11_Reactor网络模型
  • 「LNOI2022」盒
  • 【文摘随笔】从业开发工作五年后,再读短篇《孔乙己》——年少不懂孔乙己,长大已成孔乙己
  • 为什么我选择了 PSM 敏捷认证?
  • 外键
  • 菜油
  • 索引
  • 存储过程
  • 编写msyql8.0.21 数据库批量备份脚本
  • 完整教程:基础算法---【差分】
  • Android 源码中如何生成一个platform JKS 文件?
  • WPF小知识
  • 后端面试八股(go 方向)
  • ArcGIS 不重叠且无缝的拓扑检查和修改
  • 2025/9/25
  • 读书笔记:揭开索引的两个常见误区
  • 国标GB28181平台EasyGBS如何赋能路网数字化管理与应急指挥?
  • 获取用户ip所在城市
  • 【Proteus仿真】AT89C51单片机串行数据转换为并行仿真 - 实践
  • 第13章 day14-15 Webpack逆向
  • Viper远程配置踩坑记录
  • 国产智能体脂秤PCBA方案设计
  • 第15章 day18 Ast系列篇