React是一个用于构建用户界面的JavaScript库，它通过组件化的方式来构建复杂的界面。React的条件渲染与列表渲染是两个常用的功能，用于根据特定的条件或数据集合来动态地显示或隐藏UI组件。
条件渲染
条件渲染是指根据某个条件来决定是否渲染某个UI组件。在React中，可以使用条件语句或逻辑表达式来实现条件渲染。
使用条件语句
可以使用if语句或三元表达式来实现条件渲染。在render函数中，根据条件判断是否需要渲染相应的UI组件。
render() {
if (condition) {
return <Component />;
} else {
return null;
}
}
在上述代码中，如果条件满足，就渲染<Component />组件，否则返回null。
使用逻辑表达式
也可以使用逻辑与（&&）或逻辑或（||）来实现条件渲染。
render() {
return (
<div>
{condition && <Component />}
{condition || <DefaultComponent />}
</div>
);
}
在上述代码中，当条件满足时，会渲染<Component />组件，否则渲染<DefaultComponent />组件。
列表渲染
列表渲染是指根据数据集合来渲染多个相同的UI组件。在React中，可以使用循环语句或map函数来实现列表渲染。
使用循环语句
可以使用for循环来遍历数据集合，并返回对应的UI组件。
render() {
const items = [1, 2, 3, 4, 5];
const listItems = [];
for (const item of items) {
listItems.push(<li key={item}>{item}</li>);
}
return <ul>{listItems}</ul>;
}
在上述代码中，通过for循环遍历数据集合items，将每个元素渲染为<li>元素，并添加到listItems数组中。最后将listItems数组渲染为<ul>元素。
使用map函数
可以使用map函数来遍历数据集合，并返回对应的UI组件。map函数接收一个回调函数，在回调函数中返回每个元素对应的UI组件。
render() {
const items = [1, 2, 3, 4, 5];
const listItems = items.map((item) => <li key={item}>{item}</li>);
return <ul>{listItems}</ul>;
}
在上述代码中，通过map函数遍历数据集合items，回调函数返回每个元素对应的<li>元素，然后将返回的数组渲染为<ul>元素。
总结
条件渲染与列表渲染是React中常用的功能，通过判断条件或遍历数据集合来动态地显示或隐藏UI组件。使用条件语句或逻辑表达式可以实现条件渲染，而使用循环语句或map函数可以实现列表渲染。这些功能可以帮助我们根据不同的场景来灵活地渲染UI组件，提升用户体验。
本文来自极简博客，作者：星空下的诗人，转载请注明原文链接：React中的条件渲染与列表渲染
