React 列表 & Keys

作者likuolei

以下是关于 React 中列表渲染和 Keys 的中文讲解，结合 Visual Studio Code（VSCode）环境，基于 npm 创建的 React 项目，内容简洁清晰，适合初学者。讲解包括列表渲染的基本概念、Keys 的作用、中文支持、在 VSCode 中的实践以及调试方法。

1. 什么是 React 列表渲染和 Keys？

列表渲染

React 列表渲染是指使用 JavaScript 数组方法（如 map）在 JSX 中动态生成一组元素，通常用于显示重复的 UI 组件（如列表项、卡片）。React 通过遍历数组将数据转换为 JSX 元素。

  • 特点：
  • 通常使用 map 方法将数组映射为 JSX 元素。
  • 支持动态数据，适合显示列表、表格等。
  • 常用于渲染中文数据，如产品名称、用户列表。

Keys

Keys 是 React 在列表渲染中用于标识每个元素的特殊属性，帮助 React 高效更新虚拟 DOM。

  • 作用：
  • 提高渲染效率：Keys 帮助 React 跟踪元素的变化，减少不必要的 DOM 操作。
  • 确保正确更新：当列表项增删或重新排序时，Keys 避免 UI 错乱。
  • 必须唯一：在同一列表中，每个元素的 key 必须唯一（通常使用数据 ID）。
  • 使用场景：
  • 显示动态列表（如任务清单、商品列表）。
  • 动态增删列表项。
  • 处理中文数据列表（如中文用户名）。

2. 准备工作

确保 React 项目已创建

  • 使用 create-react-app 创建项目（参考前述“React 项目创建”指南）：
  npx create-react-app my-list-app
  cd my-list-app
  npm start
  • 项目在 http://localhost:3000 运行。

VSCode 配置

  • 安装扩展：
  • ESLint：检查代码规范。
  • Prettier：格式化代码。
  • Reactjs code snippets：快速插入 JSX 和组件代码。
  • Auto Rename Tag：同步编辑 HTML 标签。
  • 配置 ESLint 和 Prettier：
  • 安装依赖：
    bash npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks
  • 创建 .eslintrc.json：
    json { "env": { "browser": true, "es2021": true }, "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended"], "parserOptions": { "ecmaVersion": 12, "sourceType": "module" }, "plugins": ["react", "react-hooks"], "rules": {} }
  • 创建 .prettierrc：
    json { "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80 }
  • 中文支持：
  • 确保 public/index.html 包含：
    html <meta charset="UTF-8">
  • 配置 VSCode 终端支持中文：
    json { "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }
  • 保存源文件为 UTF-8（右下角点击编码，选择“通过 UTF-8 保存”）。

3. 函数组件中的列表渲染与 Keys

函数组件结合 useState 和 map 是实现列表渲染的常见方式。

示例代码：简单列表渲染

修改 src/App.js：

import React from ‘react’;
import ‘./App.css’;

function App() {
const items = [
{ id: 1, name: ‘苹果’ },
{ id: 2, name: ‘香蕉’ },
{ id: 3, name: ‘橙子’ },
];

return (

水果列表

  • {item.name}

);
}

export default App;

代码说明

  • 列表渲染：items.map 遍历数组，生成 <li> 元素。
  • Keys：key={item.id} 为每个 <li> 指定唯一标识，推荐使用数据中的 id。
  • 中文支持：name 字段包含中文（如“苹果”），直接渲染。
  • 渲染结果：浏览器显示一个包含“苹果”、“香蕉”、“橙子”的无序列表。

运行代码

  1. 保存 App.js，确保终端运行：
   npm start
  1. 浏览器在 http://localhost:3000 显示水果列表。

示例代码：动态列表（添加/删除项）

结合 useState 实现动态列表：

import React, { useState } from ‘react’;
import ‘./App.css’;

function App() {
const [items, setItems] = useState([
{ id: 1, name: ‘苹果’ },
{ id: 2, name: ‘香蕉’ },
{ id: 3, name: ‘橙子’ },
]);
const [inputValue, setInputValue] = useState(”);

const addItem = () => {
if (inputValue.trim()) {
setItems([…items, { id: items.length + 1, name: inputValue }]);
setInputValue(”);
}
};

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

return (

动态水果列表

setInputValue(e.target.value)} placeholder=”输入水果名称” /> 添加

  • {item.name} removeItem(item.id)}>删除

);
}

export default App;

代码说明

  • useState：
  • items：存储列表数据，初始包含三项。
  • inputValue：管理输入框内容。
  • 列表渲染：items.map 生成 <li>，每个包含删除按钮。
  • Keys：key={item.id} 确保列表更新时 React 正确识别元素。
  • 事件处理：
  • addItem：添加新项，生成新 id。
  • removeItem：根据 id 过滤删除项。
  • 中文支持：输入框支持中文输入，列表显示中文名称。

4. 类组件中的列表渲染与 Keys

类组件使用 this.state 和 this.setState 实现类似功能。

示例代码：动态列表

修改 src/App.js：

import React, { Component } from ‘react’;
import ‘./App.css’;

class App extends Component {
constructor(props) {
super(props);
this.state = {
items: [
{ id: 1, name: ‘苹果’ },
{ id: 2, name: ‘香蕉’ },
{ id: 3, name: ‘橙子’ },
],
inputValue: ”,
};
this.addItem = this.addItem.bind(this);
this.removeItem = this.removeItem.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
this.setState({ inputValue: event.target.value });
}

addItem() {
if (this.state.inputValue.trim()) {
this.setState({
items: [
…this.state.items,
{ id: this.state.items.length + 1, name: this.state.inputValue },
],
inputValue: ”,
});
}
}

removeItem(id) {
this.setState({
items: this.state.items.filter(item => item.id !== id),
});
}

render() {
return (

动态水果列表

添加

  • {item.name} this.removeItem(item.id)}>删除

);
}
}

export default App;

代码说明

  • this.state：存储 items 和 inputValue。
  • this.setState：更新状态，触发重新渲染。
  • Keys：key={item.id} 确保列表更新正确。
  • 中文：支持中文输入和显示。

5. Keys 注意事项

  • 唯一性：Keys 在同一列表的兄弟元素中必须唯一，但无需全局唯一。
  • 推荐使用 ID：使用数据中的唯一标识（如 item.id），避免使用索引（如 index），因为索引在列表重排序时可能导致问题。
  // 不推荐
  {items.map((item, index) => <li key={index}>{item.name}</li>)}
  • Keys 的作用：仅用于 React 内部优化，不作为 Props 传递。

6. 调试列表和 Keys

  1. Chrome 开发者工具：
  • 按 F12，使用 React Developer Tools 检查列表组件和 Keys。
  • 查看控制台，检查是否出现 “Warning: Each child in a list should have a unique key prop” 错误。
  1. VSCode 调试：
  • 配置 launch.json：
    json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] }
  • 运行 npm start，按 F5 调试，设置断点检查 items 状态。

7. 中文支持

  • JSX 中的中文：直接使用 UTF-8 编码的中文：
  <h1>水果列表</h1>
  • VSCode 配置：
  • 确保源文件为 UTF-8（右下角选择“通过 UTF-8 保存”）。
  • 配置终端：
    json { "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }
  • HTML 配置：确保 public/index.html 包含：
  <meta charset="UTF-8">

8. 常见问题

  • 缺少 Key 警告：
  • 确保每个 map 生成的元素有 key 属性。
  • 使用唯一 ID 而非索引。
  • 中文乱码：
  • 确认 public/index.html 有 <meta charset="UTF-8">。
  • 检查 VSCode 和终端编码为 UTF-8。
  • 列表不更新：
  • 确保状态更新创建新数组（如 [...items]），避免直接修改原数组。
  • 检查事件绑定是否正确。
  • 项目无法运行：
  • 清理缓存并重新安装：
    bash rm -rf node_modules package-lock.json npm install npm start

9. 获取途径

  • React：通过 npm 免费安装，访问 react.dev.
  • VSCode：可通过 grok.com、x.com、VSCode iOS/Android 应用免费使用（有限额）。付费订阅（如 SuperGrok）提供更高配额，详情见 x.ai/grok.
  • Node.js：免费下载，访问 nodejs.org.

如需更复杂的列表渲染示例（如排序、过滤）或进一步指导，请提供具体需求！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注