2022年前端React的100道面试题的第11题：key属性

问题

列表组件中的 key 理解正常的是？

选项

A key 是在创建元素数组时，需要用到的一个特殊字符串属性。

B 应当给数组内的每个元素都设定 key，使元素具有固定身份标识。

C 需要在整个应用程序甚至单个组件中保持唯一。

D key 帮助 React 识别出被修改、添加的 item，但无法识别删除。

答案

A、B

纠错

C 只需要保证，在同一个数组中的兄弟元素之间的 key 是唯一的。而不需要在整个应用程序甚至单个组件中保持唯一。

D key 帮助 React 识别出被修改、添加或删除的 item。

解答

一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

在 JSX 中嵌入 map()

JSX 允许在大括号中嵌入任何表达式，所以我们可以内联 map() 返回的结果。

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
        {numbers.map((number) =>
            <ListItem key={number.toString()} value={number} />
        )}
    </ul>
  );
}

几种错误的定义方式

一是在item元素内定义key，是没有任何意义的：

function ListItem(props) {
  const value = props.value;
  return (
    // 错误！你不需要在这里指定 key：    
    <li key={value.toString()}>{value}</li>
  );
}

二将 Math.random() 之类的值传递给 key，前后两次渲染之间的 key 要具有“固定身份标识”的特点。可以新增一个 ID 字段到你的模型中，或者利用一部分内容作为哈希值来生成一个 key。

资料

列表 & Key

来源

搜索《考试竞技》微信小程序