渲染列表时，什么是键，它的目的是什么？

每当我们使用最首选的 map 方法在 React 中呈现列表时，我们需要提供键。如果我们在渲染期间没有提供密钥，我们会在我们的反应应用程序中收到警告。为了消除该警告并优化我们的代码，我们提供了一个密钥。

键是有助于做出反应以识别哪些项目已更改、添加或删除的东西。应该为数组内的元素提供键，以便在呈现元素时为元素提供稳定的标识。

每当我们尝试渲染列表时，我们总是在列表中保留多个列表项或列表项数组。为了渲染它，我们使用map的方法覆盖列表中的项目数组。

钥匙的用途：

• 为列表中的每个列表元素提供唯一标识。
• 如果不使用密钥，则删除反应抛出的警告或错误。
• 它用于识别哪些项目已从列表中更改、更新或删除。
• 当用户更改列表时，它很有用。
• 它有助于做出反应以确定要重新渲染的组件。

创建反应应用程序

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

第 3 步：在 react 项目目录的src文件夹中创建文件夹components并在 components 文件夹中创建文件List.jsx

项目结构：它看起来像这样。

文件夹结构

示例 1：呈现列表的基本示例。在index.js ， App.js中写下以下代码， 和List.jsx文件。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  
reportWebVitals();

应用程序.js

import React from 'react';
import List from './components/List';
  
const numbers = [1, 2, 3, 4, 5];
  
function App() {
  return (
    

    
    
  );
}
  
export default App;

List.js

import React from "react";
  
function List(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number,index) =>
  
{number}
);
  return (
    <>
      
List of numbers
      
{listItems}
    
  );
}
  
export default List;

运行应用程序的步骤：从项目的根目录运行以下命令。

npm start

输出：在上面的示例中，我们收到警告说在执行代码时应该提供一个键，因为键应该在列表中作为道具提供。

无键列表

选择键最常用的方法是使用一个索引，该索引在其兄弟项中唯一标识一个列表项。让我们在上面的代码中添加索引作为键

示例 2：使用列表中的关键属性

列表.jsx

import React from "react";
  
function List(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number,index) => 
  
{number}
);
  return (
    <>
      
List of numbers
      
{listItems}
    
  );
}
  
export default List;

输出：现在，上面的代码不会导致任何错误，因为我们在列表项中提供了键。大多数情况下，它建议使用与项目数组中的每个元素关联的唯一创建 id。

带键的列表

我们还可以使用唯一 ID 代替索引，因为索引可能无法完美运行，因为只要列表中的项目发生变化，它就会发生变化。在 key 属性中使用 id 是提供密钥和提高性能的最佳方式。如果我们不选择为列表项分配显式键，那么 React 将默认使用索引作为键。

创建唯一 id 的最佳方法是将列表项作为字符串，如果所有列表项都是唯一的，则提供一个键。

列表.jsx

import React from "react";
  
function List(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => 
  
{number}
);
  return (
    <>
      
List of numbers
      
{listItems}
    
  );
}
  
export default List;