React从基础入门到高级实战：React 基础入门

React从基础入门到高级实战：React 基础入门 - 列表渲染与条件渲染

列表渲染与条件渲染

在 React 开发中，列表渲染 和 条件渲染 是处理动态数据和用户交互的基础技术。通过列表渲染，你可以根据数据动态生成 UI 元素；而条件渲染则让你根据特定条件展示不同的内容。这两个技能在实际项目中非常常见，比如展示产品列表或根据用户登录状态显示不同界面。

本文将深入讲解如何在 React 中实现列表渲染和条件渲染，并提供代码示例和实践指导。无论你是初学者还是想复习基础知识，这篇教程都将为你提供清晰且实用的内容。

1. 列表渲染

列表渲染是指根据数据数组生成一组 JSX 元素的过程。在 React 中，通常使用 JavaScript 的 map 函数来实现。

1.1 基本用法

假设你有一个任务列表的数据：

const tasks = [{ id: 1, text: '学习 React' },{ id: 2, text: '练习 JSX' },{ id: 3, text: '掌握 Hooks' }
];

你可以用 map 函数将这个数组渲染为一个列表：

function TaskList() {return (<ul>{tasks.map(task => (<li key={task.id}>{task.text}</li>))}</ul>);
}

tasks.map 将每个任务对象转换为一个 <li> 元素。
key={task.id} 为每个列表项指定一个唯一标识。

1.2 key 属性的重要性

key 是 React 中的特殊属性，用于帮助 React 高效地更新 DOM。它在列表渲染中必不可少。

为什么需要 key：React 用 key 来追踪每个元素的变化，确保只更新必要的部分。
要求：key 必须在同级元素中唯一且稳定。
错误示例：使用数组索引作为 key（如 key={index}）在动态列表中可能导致问题，因为索引会随列表变化而改变。
正确做法：使用数据中的唯一标识符，如 id。

示例：

// 错误：使用索引作为 key
{tasks.map((task, index) => (<li key={index}>{task.text}</li>
))}// 正确：使用唯一 ID
{tasks.map(task => (<li key={task.id}>{task.text}</li>
))}

2. 条件渲染

条件渲染是指根据条件控制 UI 元素的显示。React 没有专门的条件渲染语法，而是利用 JavaScript 的条件语句。

2.1 使用 if-else

在函数外部使用 if-else 判断：

function Welcome({ isLoggedIn }) {if (isLoggedIn) {return <p>欢迎回来！</p>;} else {return <p>请登录。</p>;}
}

2.2 使用三元运算符

在 JSX 中使用三元运算符，适合简单条件：

function UserStatus({ isLoggedIn }) {return (<div>{isLoggedIn ? <p>欢迎回来！</p> : <p>请登录。</p>}</div>);
}

2.3 使用逻辑运算符

用 && 运算符在条件为 true 时渲染内容：

function Alert({ hasUpdate }) {return (<div>{hasUpdate && <p>有新更新！</p>}</div>);
}

如果 hasUpdate 为 false，则什么都不渲染。

2.4 返回 null 隐藏内容

通过返回 null 完全不渲染组件：

function SecretMessage({ show }) {if (!show) return null;return <p>这是一个秘密消息。</p>;
}

3. 实际应用：任务列表

让我们结合列表渲染和条件渲染，创建一个简单的任务列表应用，支持标记任务完成和过滤已完成任务。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>任务列表</title><script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.26.0/babel.min.js"></script><script src="https://cdn.tailwindcss.com"></script>
</head>
<body><div id="root" class="p-4"></div><script type="text/babel">function TodoApp() {const [todos, setTodos] = React.useState([{ id: 1, text: '学习 React', completed: false },{ id: 2, text: '练习 JSX', completed: true },{ id: 3, text: '掌握 Hooks', completed: false }]);const [showCompleted, setShowCompleted] = React.useState(true);const toggleCompleted = (id) => {setTodos(todos.map(todo =>todo.id === id ? { ...todo, completed: !todo.completed } : todo));};const filteredTodos = showCompleted? todos: todos.filter(todo => !todo.completed);return (<div className="max-w-md mx-auto"><h1 className="text-2xl font-bold mb-4">任务列表</h1><label className="flex items-center mb-4"><inputtype="checkbox"checked={showCompleted}onChange={() => setShowCompleted(!showCompleted)}className="mr-2"/>显示已完成任务</label><ul className="space-y-2">{filteredTodos.map(todo => (<likey={todo.id}className="flex justify-between items-center p-2 bg-gray-100 rounded"><spanstyle={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.text}</span><buttononClick={() => toggleCompleted(todo.id)}className="px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">{todo.completed ? '标记未完成' : '标记完成'}</button></li>))}</ul></div>);}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<TodoApp />);</script>
</body>
</html>