【React】JSX 实现列表渲染
在 React 开发中，列表渲染是一个非常常见的需求。无论是展示一组数据，照旧动态天生组件，掌握列表渲染的本领和最佳实践都优劣常重要的。本文将具体介绍如安在 React 中使用 JSX 实现列表渲染，包罗基础语法、常见错误以及高级用法，帮助你全面掌握这一技能。一、基础语法
1. 使用 map() 方法
在 React 中，我们通常使用 JavaScript 的 map() 方法来迭代数组，并返回一个包罗 JSX 元素的新数组。每个 JSX 元素都可以表现列表中的一项。
const numbers = ;
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'));
四、最佳实践
[*]保持数据的唯一性和稳定性
确保列表中的每个元素都有一个唯一且稳定的 key 属性，这有助于 React 更高效地更新和渲染组件。
[*]避免使用索引作为 key
只管不要使用数组的索引作为 key，特殊是在列表项可能重新排序或删除的情况下。使用唯一标识符或对象的属性作为 key 是更好的选择。
[*]分离数据和表现
将数据逻辑和表现逻辑分离，使代码更易于维护和明白。可以通过使用容器组件和展示组件来实现这一点。
[*]适本地使用条件渲染
在渲染复杂列表时，可以通过条件渲染仅显示需要的部分，提高组件的性能和用户体验。
保举我的相关专栏：
[*]python 错误记载
[*]python 笔记
[*]数据结构
https://img-blog.csdnimg.cn/direct/ee9077c56a1c476d803af8a178e0eb98.gif#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]