React条件渲染：技术和示例
推荐超级课程：
@TOC
条件渲染是React中的一种技术，允许您根据某些条件或状态有条件地渲染不同的内容或组件。这是一种创建动态用户界面的强大方法，可以响应用户交互或变化的数据。在React中实现条件渲染有多种方式：
条件渲染
1. 在React中使用if语句：
您可以在组件的render方法中使用常规的JavaScript if语句来有条件地渲染内容。
import React, { Component } from 'react';
class ConditionalRender extends Component {
render() {
if (this.props.isLoggedIn) {
return <p>欢迎，用户！</p>;
} else {
return <p>请登录以继续。</p>;
}
}
}
export default ConditionalRender;
2. 在React中使用三元运算符：
三元运算符是一种简洁的条件渲染方式。
import React from 'react';
const ConditionalRender = (props) => {
return (
<div>
{props.isLoggedIn ? <p>欢迎，用户！</p> : <p>请登录以继续。</p>}
</div>
);
};
export default ConditionalRender;
3. 在React中使用逻辑AND运算符（&&）：
您可以使用逻辑AND运算符（&&）来有条件地渲染内容。
import React from 'react';
const ConditionalRender = (props) => {
return (
<div>
{props.isLoggedIn && <p>欢迎，用户！</p>}
{!props.isLoggedIn && <p>请登录以继续。</p>}
</div>
);
};
export default ConditionalRender;
4. 在React中使用元素变量：
您可以有条件地将JSX元素分配给变量，然后在render方法中使用这些变量。
import React, { Component } from 'react';
class ConditionalRender extends Component {
render() {
let message;
if (this.props.isLoggedIn) {
message = <p>欢迎，用户！</p>;
} else {
message = <p>请登录以继续。</p>;
}
return <div>{message}</div>;
}
}
export default ConditionalRender;
5. 在React中条件渲染组件：
您还可以根据条件有条件地渲染整个组件。
import React from 'react';
import WelcomeComponent from './WelcomeComponent';
import LoginComponent from './LoginComponent';
const ConditionalRender = (props) => {
return (
<div>
{props.isLoggedIn ? <WelcomeComponent /> : <LoginComponent />}
</div>
);
};
export default ConditionalRender;
条件渲染非常灵活，允许您创建根据各种因素调整的动态用户界面。您可以使用这些技术根据应用程序的状态或用户交互显示不同的内容、组件或UI元素。
在React中使用map()函数渲染列表
map()函数不仅可用于渲染元素列表，还可用于根据特定条件有条件地渲染元素。您可以将map()函数与条件逻辑结合使用，根据数据和条件动态生成和渲染组件或元素。以下是如何在React中使用map()函数进行列表的条件渲染：
import React from 'react';
const ItemList = (props) => {
const items = props.items;
return (
<ul>
{items.map((item, index) => (
<li key={index}>
{item.completed ? <s>{item.name}</s> : item.name}
</li>
))}
</ul>
);
};
export default ItemList;
在这个例子中，ItemList组件接收一个items数组作为prop。每个项目都有一个name和completed属性。map()函数用于遍历items数组，并根据completed属性的有无条件地渲染一个<s>（删除线）元素。
使用ItemList组件的示例可能如下：
import React from 'react';
import ItemList from './ItemList';
const ParentComponent = () => {
const items = [
{ name: '任务1', completed: true },
{ name: '任务2', completed: false },
{ name: '任务3', completed: true },
];
return (
<div>
<h2>项目列表：</h2>
<ItemList items={items} />
</div>
);
};
export default ParentComponent;
通过使用map()函数与条件渲染，您可以创建动态列表，其中每个项目的显示外观由数据中的值决定。这允许您构建根据特定条件调整和显示信息的用户界面。———————————————
key 属性是您在React中渲染元素列表时提供的一个特殊属性。它帮助React有效地识别单个元素，并在渲染过程中有效地管理它们的状态和更新。在渲染动态列表时，key 属性对于性能和正确行为至关重要。
以下是key属性的重要性以及如何使用它：
1. 唯一性：
列表中的每个兄弟元素都应该有一个唯一的key。React使用key来跟踪元素是否更改、添加或移除。
2. 对比：
当列表更新时，React使用key来确定元素是否更改位置、是否添加了新元素，或者是否移除了现有元素。这个过程被称为对比。
3. 性能：
使用适当的key值可以帮助React优化更新，避免不必要的重新渲染，从而提高性能。
4. 无业务逻辑：key属性用于React的内部使用，不应用于传达业务逻辑或数据。它不会作为属性传递给组件。
以下是使用key属性进行高效列表渲染的示例：
import React from 'react';
const ItemList = (props) => {
const items = props.items;
return (
<ul>
{items.map((item, index) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
export default ItemList;
在这个例子中，key属性设置为item.id，假设每个项目都有一个唯一的id属性。使用唯一标识符作为key可以确保React能够准确跟踪列表中的更改并优化渲染。
ItemList组件的使用可能如下所示：
import React from 'react';
import ItemList from './ItemList';
const ParentComponent = () => {
const items = [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' },
{ id: 3, name: '项目3' },
];
return (
<div>
<h2>项目列表：</h2>
<ItemList items={items} />
</div>
);
};
export default ParentComponent;
通过为列表中的每个项目提供一个唯一的key值，您可以确保React能够高效地管理更新，并在渲染动态列表时保持高性能。