请解释 React 中 Fragment 的作用,说明其主要使用场景,并指出其简写形式。
考察说明
考查对 React Fragment 的理解,包括其解决的问题、常见应用场景及语法简写。
回答思路
- 【回答框架 1】Fragment 是 React 中的一个内置组件,用于在不向 DOM 添加额外节点的情况下,将多个子元素分组。其核心作用是避免不必要的嵌套层级,保持 DOM 结构简洁。
- 【回答框架 2】主要应用场景包括:1)在列表或表格中返回多个同级元素,避免额外的包裹节点影响布局或样式;2)在条件渲染中返回多个元素,而无需额外的 div;3)在组件中返回多个根元素,简化结构。
- 【回答框架 3】Fragment 的简写形式是空标签 <>...</>,但简写形式不支持 key 属性。当需要为 Fragment 设置 key 时,必须使用完整的 <React.Fragment key={...}> 写法。
- 【关键点 1】Fragment 不产生额外 DOM 节点,用于分组子元素。
- 【关键点 2】典型场景包括列表渲染、表格行分组、条件渲染返回多个元素。
- 【关键点 3】简写为 <>...</>,但不支持 key 属性。
- 【易错点 1】简写 Fragment 不支持 key,使用 key 时必须使用完整写法。
- 【易错点 2】过度使用 Fragment 可能导致代码可读性下降,应合理使用。