【React】JSX 实现列表渲染

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

1. 使用 map() 方法

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

1. const numbers = [1, 2, 3, 4, 5];
2. const listItems = numbers.map((number) =>
3.   <li key={number.toString()}>{number}</li>
4. );
6. const element = (
7.   <ul>
8.     {listItems}
9.   </ul>
10. );
12. ReactDOM.render(element, document.getElementById('root'));

复制代码

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

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

1. const todos = ['Learn React', 'Build a React App', 'Deploy the App'];
2. const todoItems = todos.map((todo, index) =>
3.   <li key={index}>{todo}</li>
4. );
6. const element = (
7.   <ul>
8.     {todoItems}
9.   </ul>
10. );
12. ReactDOM.render(element, document.getElementById('root'));

复制代码

二、常见错误和留意事项

1. 忘记使用 key 属性

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

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

复制代码

2. key 属性的选择

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

1. // 不推荐的做法：使用数组索引作为 key
2. const listItems = todos.map((todo, index) =>
3.   <li key={index}>{todo}</li>
4. );
6. // 推荐的做法：使用唯一标识符作为 key
7. const todos = [
8.   { id: 1, text: 'Learn React' },
9.   { id: 2, text: 'Build a React App' },
10.   { id: 3, text: 'Deploy the App' }
11. ];
13. const todoItems = todos.map((todo) =>
14.   <li key={todo.id}>{todo.text}</li>
15. );

复制代码

三、列表渲染的高级用法

1. 渲染嵌套列表

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

1. const categories = [
2.   {
3.     id: 1,
4.     name: 'Fruits',
5.     items: ['Apple', 'Banana', 'Orange']
6.   },
7.   {
8.     id: 2,
9.     name: 'Vegetables',
10.     items: ['Carrot', 'Broccoli', 'Spinach']
11.   }
12. ];
14. const CategoryList = ({ categories }) => (
15.   <ul>
16.     {categories.map(category => (
17.       <li key={category.id}>
18.         {category.name}
19.         <ul>
20.           {category.items.map(item => (
21.             <li key={item}>{item}</li>
22.           ))}
23.         </ul>
24.       </li>
25.     ))}
26.   </ul>
27. );
29. ReactDOM.render(<CategoryList categories={categories} />, document.getElementById('root'));

复制代码

2. 条件渲染列表项

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

1. const tasks = [
2.   { id: 1, text: 'Do the dishes', completed: false },
3.   { id: 2, text: 'Take out the trash', completed: true },
4.   { id: 3, text: 'Mow the lawn', completed: false }
5. ];
7. const TaskList = ({ tasks }) => (
8.   <ul>
9.     {tasks.filter(task => !task.completed).map(task => (
10.       <li key={task.id}>{task.text}</li>
11.     ))}
12.   </ul>
13. );
15. ReactDOM.render(<TaskList tasks={tasks} />, document.getElementById('root'));

复制代码

3. 动态天生组件

在列表渲染中，可以动态天生组件。比方，渲染一组自界说组件，每个组件都代表列表中的一项。

1. const products = [
2.   { id: 1, name: 'Laptop', price: 999.99 },
3.   { id: 2, name: 'Phone', price: 799.99 },
4.   { id: 3, name: 'Tablet', price: 499.99 }
5. ];
7. const Product = ({ product }) => (
8.   <div>
9.     <h2>{product.name}</h2>
10.     <p>Price: ${product.price}</p>
11.   </div>
12. );
14. const ProductList = ({ products }) => (
15.   <div>
16.     {products.map(product => (
17.       <Product key={product.id} product={product} />
18.     ))}
19.   </div>
20. );
22. ReactDOM.render(<ProductList products={products} />, document.getElementById('root'));

复制代码

四、最佳实践

• 保持数据的唯一性和稳定性
  

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

• 避免使用索引作为 key
  

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

• 分离数据和表现
  

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

• 适本地使用条件渲染
  

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

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

  

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。