【React】JSX 实现列表渲染

文章目录

• • 一、基础语法
  • • [1. 使用 `map()` 方法](#1. 使用 map() 方法)
    • [2. `key` 属性的使用](#2. key 属性的使用)
  • 二、常见错误和注意事项
  • • [1. 忘记使用 `key` 属性](#1. 忘记使用 key 属性)
    • [2. `key` 属性的选择](#2. key 属性的选择)
  • 三、列表渲染的高级用法
  • • [1. 渲染嵌套列表](#1. 渲染嵌套列表)
    • [2. 条件渲染列表项](#2. 条件渲染列表项)
    • [3. 动态生成组件](#3. 动态生成组件)
  • 四、最佳实践

在 React 开发中，列表渲染是一个非常常见的需求。无论是展示一组数据，还是动态生成组件，掌握列表渲染的技巧和最佳实践都是非常重要的。本文将详细介绍如何在 React 中使用 JSX 实现列表渲染，包括基础语法、常见错误以及高级用法，帮助你全面掌握这一技能。

一、基础语法

1. 使用 map() 方法

在 React 中，我们通常使用 JavaScript 的 map() 方法来迭代数组，并返回一个包含 JSX 元素的新数组。每个 JSX 元素都可以表示列表中的一项。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

const element = (
  <ul>
    {listItems}
  </ul>
);

ReactDOM.render(element, document.getElementById('root'));

在这个示例中，numbers 数组中的每个元素都会被 map() 方法处理，并返回一个 li 元素。这些 li 元素通过 key 属性唯一标识。

2. key 属性的使用

key 是用于标识列表中每个元素的唯一性。它有助于 React 高效地更新和重新渲染列表。key 应该是一个在其兄弟元素之间唯一的字符串或数字。

const todos = ['Learn React', 'Build a React App', 'Deploy the App'];
const todoItems = todos.map((todo, index) =>
  <li key={index}>{todo}</li>
);

const element = (
  <ul>
    {todoItems}
  </ul>
);

ReactDOM.render(element, document.getElementById('root'));

二、常见错误和注意事项

1. 忘记使用 key 属性

在渲染动态列表时，忘记添加 key 属性是一个常见错误。缺少 key 属性会导致 React 无法正确地识别和管理元素的变化。

// 错误示例：缺少 key 属性
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

2. key 属性的选择

key 属性应该尽可能唯一且稳定 ，不要使用数组的索引作为 key，因为当列表项重新排序时，索引会改变，从而导致潜在的渲染问题。

// 不推荐的做法：使用数组索引作为 key
const listItems = todos.map((todo, index) =>
  <li key={index}>{todo}</li>
);

// 推荐的做法：使用唯一标识符作为 key
const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build a React App' },
  { id: 3, text: 'Deploy the App' }
];

const todoItems = todos.map((todo) =>
  <li key={todo.id}>{todo.text}</li>
);

三、列表渲染的高级用法

1. 渲染嵌套列表

在实际应用中，可能需要渲染嵌套列表。例如，渲染一个包含多个子项的分类列表。可以通过递归方式处理嵌套数据结构。

const categories = [
  {
    id: 1,
    name: 'Fruits',
    items: ['Apple', 'Banana', 'Orange']
  },
  {
    id: 2,
    name: 'Vegetables',
    items: ['Carrot', 'Broccoli', 'Spinach']
  }
];

const CategoryList = ({ categories }) => (
  <ul>
    {categories.map(category => (
      <li key={category.id}>
        {category.name}
        <ul>
          {category.items.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </li>
    ))}
  </ul>
);

ReactDOM.render(<CategoryList categories={categories} />, document.getElementById('root'));

2. 条件渲染列表项

在渲染列表时，可以根据条件有选择地渲染特定的列表项。

const tasks = [
  { id: 1, text: 'Do the dishes', completed: false },
  { id: 2, text: 'Take out the trash', completed: true },
  { id: 3, text: 'Mow the lawn', completed: false }
];

const TaskList = ({ tasks }) => (
  <ul>
    {tasks.filter(task => !task.completed).map(task => (
      <li key={task.id}>{task.text}</li>
    ))}
  </ul>
);

ReactDOM.render(<TaskList tasks={tasks} />, document.getElementById('root'));

3. 动态生成组件

在列表渲染中，可以动态生成组件。例如，渲染一组自定义组件，每个组件都代表列表中的一项。

const products = [
  { id: 1, name: 'Laptop', price: 999.99 },
  { id: 2, name: 'Phone', price: 799.99 },
  { id: 3, name: 'Tablet', price: 499.99 }
];

const Product = ({ product }) => (
  <div>
    <h2>{product.name}</h2>
    <p>Price: ${product.price}</p>
  </div>
);

const ProductList = ({ products }) => (
  <div>
    {products.map(product => (
      <Product key={product.id} product={product} />
    ))}
  </div>
);

ReactDOM.render(<ProductList products={products} />, document.getElementById('root'));

四、最佳实践

1. 保持数据的唯一性和稳定性

确保列表中的每个元素都有一个唯一且稳定的 key 属性，这有助于 React 更高效地更新和渲染组件。

2. 避免使用索引作为 key

尽量不要使用数组的索引作为 key，特别是在列表项可能重新排序或删除的情况下。使用唯一标识符或对象的属性作为 key 是更好的选择。

3. 分离数据和表现

将数据逻辑和表现逻辑分离，使代码更易于维护和理解。可以通过使用容器组件和展示组件来实现这一点。

4. 适当地使用条件渲染

在渲染复杂列表时，可以通过条件渲染仅显示需要的部分，提高组件的性能和用户体验。

推荐我的相关专栏：

• python 错误记录
• python 笔记
• 数据结构

---