React 使用 if-else 实现条件渲染
React 中的条件渲染基础概念
在 React 应用程序开发中，条件渲染是一项极为关键的技术，它允许我们根据不同的条件来决定是否渲染特定的组件或元素，从而使应用程序能够根据各种情况呈现出不同的用户界面。条件渲染是构建动态且交互式前端应用的基石之一。在众多实现条件渲染的方式中，if - else语句是一种非常直观且基础的方法。
React 渲染机制与条件渲染的关联
React 的核心工作原理是通过虚拟 DOM（Virtual DOM）来高效地更新和渲染用户界面。当组件的状态（state）或属性（props）发生变化时，React 会重新计算虚拟 DOM，并通过对比新旧虚拟 DOM 来确定实际需要更新的部分，从而最小化真实 DOM 的操作，提高渲染性能。
条件渲染在这个过程中扮演着根据不同条件来决定哪些组件或元素应该被包含在虚拟 DOM 中的角色。这意味着，通过条件渲染，我们可以灵活地控制哪些内容会被展示给用户，而哪些内容会被隐藏或在特定条件下才会出现。
if - else 语句在 React 中的应用场景
- 根据用户认证状态渲染不同内容：在许多应用程序中，需要根据用户是否登录来展示不同的界面元素。例如，已登录用户可能会看到个人资料、注销按钮等，而未登录用户则看到登录和注册按钮。我们可以使用
if - else语句根据用户认证状态来决定渲染哪种界面。 - 根据数据加载状态渲染：当从服务器获取数据时，数据可能处于加载中、加载成功或加载失败等不同状态。我们可以利用
if - else语句根据这些状态来渲染加载指示器、数据展示组件或错误提示信息。 - 根据用户交互动态改变渲染内容：比如在一个图片查看器应用中，当用户点击放大按钮时，我们可能希望以更大尺寸展示图片，而点击缩小按钮时恢复到原始尺寸。通过
if - else语句结合用户的点击事件，可以实现这种动态的渲染变化。
使用 if - else 实现条件渲染的基本语法
在 React 组件中使用if - else语句实现条件渲染与在普通 JavaScript 代码中的使用方式有一定相似性，但也存在一些关键区别，因为我们需要在 JSX（JavaScript XML）语法环境中运用它。
在 render 方法中直接使用 if - else
最常见的方式是在组件的render方法中直接使用if - else语句。假设我们有一个简单的Welcome组件，它需要根据用户是否登录来显示不同的欢迎消息。
import React from'react';
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false
};
}
handleLogin = () => {
this.setState({ isLoggedIn: true });
};
handleLogout = () => {
this.setState({ isLoggedIn: false });
};
render() {
if (this.state.isLoggedIn) {
return (
<div>
<p>欢迎回来，用户！</p>
<button onClick={this.handleLogout}>注销</button>
</div>
);
} else {
return (
<div>
<p>请登录。</p>
<button onClick={this.handleLogin}>登录</button>
</div>
);
}
}
}
export default Welcome;
在上述代码中，Welcome组件通过state中的isLoggedIn字段来判断用户的登录状态。在render方法中，使用if - else语句根据这个状态返回不同的 JSX 内容。如果用户已登录，显示欢迎消息和注销按钮；否则，显示提示用户登录的消息和登录按钮。
使用函数封装条件逻辑
随着组件逻辑变得更加复杂，直接在render方法中编写大量if - else代码可能会使代码变得难以维护。这时，我们可以将条件逻辑封装到一个单独的函数中。
import React from'react';
class ComplexComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
userType: 'guest'
};
}
changeUserType = (type) => {
this.setState({ userType: type });
};
getContentToRender = () => {
if (this.state.userType === 'admin') {
return (
<div>
<p>欢迎，管理员！您拥有所有权限。</p>
<button onClick={() => this.changeUserType('guest')}>切换为普通用户</button>
</div>
);
} else if (this.state.userType === 'user') {
return (
<div>
<p>欢迎，普通用户！您可以进行基本操作。</p>
<button onClick={() => this.changeUserType('admin')}>切换为管理员</button>
<button onClick={() => this.changeUserType('guest')}>切换为游客</button>
</div>
);
} else {
return (
<div>
<p>欢迎，游客！请登录或注册以获得更多功能。</p>
<button onClick={() => this.changeUserType('user')}>切换为普通用户</button>
</div>
);
}
};
render() {
return this.getContentToRender();
}
}
export default ComplexComponent;
在这个ComplexComponent中，getContentToRender函数封装了根据userType状态决定渲染内容的逻辑。render方法只需调用这个函数并返回其结果，使得render方法保持简洁，提高了代码的可读性和可维护性。
嵌套 if - else 与复杂条件渲染
在实际开发中，我们常常会遇到需要处理多个条件的情况，这时候就需要用到嵌套的if - else语句来实现复杂的条件渲染。
多层嵌套 if - else
假设我们正在开发一个电商应用的商品展示组件，根据商品的库存状态和用户的会员等级来决定展示内容。
import React from'react';
class ProductDisplay extends React.Component {
constructor(props) {
super(props);
this.state = {
stock: 10,
memberLevel: 'basic'
};
}
changeStock = (newStock) => {
this.setState({ stock: newStock });
};
changeMemberLevel = (level) => {
this.setState({ memberLevel: level });
};
render() {
if (this.state.stock > 0) {
if (this.state.memberLevel === 'premium') {
return (
<div>
<p>商品有库存，尊贵的高级会员，您可以享受特别折扣！</p>
<button onClick={() => this.changeStock(this.state.stock - 1)}>购买</button>
</div>
);
} else if (this.state.memberLevel === 'basic') {
return (
<div>
<p>商品有库存，普通会员，您可以正常购买。</p>
<button onClick={() => this.changeStock(this.state.stock - 1)}>购买</button>
</div>
);
} else {
return (
<div>
<p>商品有库存，新用户，注册会员可享受更多优惠。</p>
<button onClick={() => this.changeStock(this.state.stock - 1)}>购买</button>
</div>
);
}
} else {
return (
<div>
<p>商品已售罄。</p>
</div>
);
}
}
}
export default ProductDisplay;
在上述代码中，首先判断商品库存是否大于 0，若大于 0 再根据会员等级进行细分展示。如果库存为 0，则直接显示商品已售罄。这种多层嵌套的if - else结构能够处理较为复杂的业务逻辑。
逻辑运算符与嵌套 if - else 的结合
有时候，我们可以结合逻辑运算符（如&&、||）来简化嵌套if - else的部分逻辑。例如，在判断用户是否有权限访问某个功能时，不仅要考虑用户是否登录，还要考虑用户的角色是否具有相应权限。
import React from'react';
class FeatureAccess extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: true,
userRole: 'user'
};
}
handleLogin = () => {
this.setState({ isLoggedIn: true });
};
handleLogout = () => {
this.setState({ isLoggedIn: false });
};
changeUserRole = (role) => {
this.setState({ userRole: role });
};
render() {
if (this.state.isLoggedIn && (this.state.userRole === 'admin' || this.state.userRole ==='manager')) {
return (
<div>
<p>您有权限访问此高级功能。</p>
<button onClick={this.handleLogout}>注销</button>
<button onClick={() => this.changeUserRole('user')}>切换为普通用户</button>
</div>
);
} else if (this.state.isLoggedIn) {
return (
<div>
<p>您没有权限访问此功能。</p>
<button onClick={this.handleLogout}>注销</button>
</div>
);
} else {
return (
<div>
<p>请登录以查看权限。</p>
<button onClick={this.handleLogin}>登录</button>
</div>
);
}
}
}
export default FeatureAccess;
在这个FeatureAccess组件中，首先使用&&运算符判断用户是否登录，并且使用||运算符判断用户角色是否为admin或manager。这种结合逻辑运算符的方式可以使条件判断更加简洁明了，同时保持对复杂条件的处理能力。
条件渲染中的代码复用与优化
随着应用程序规模的增长，在条件渲染中实现代码复用和优化变得至关重要，这不仅有助于提高代码的可维护性，还能提升应用程序的性能。
提取公共部分
在条件渲染中，不同条件下的渲染内容可能存在一些公共部分。我们可以将这些公共部分提取出来，避免重复代码。
import React from'react';
class Notification extends React.Component {
constructor(props) {
super(props);
this.state = {
isNewMessage: true,
isImportant: false
};
}
toggleNewMessage = () => {
this.setState((prevState) => ({ isNewMessage:!prevState.isNewMessage }));
};
toggleImportant = () => {
this.setState((prevState) => ({ isImportant:!prevState.isImportant }));
};
render() {
const commonPart = (
<div>
<button onClick={this.toggleNewMessage}>切换新消息状态</button>
<button onClick={this.toggleImportant}>切换重要性</button>
</div>
);
if (this.state.isNewMessage) {
if (this.state.isImportant) {
return (
<div>
{commonPart}
<p>有新的重要消息！</p>
</div>
);
} else {
return (
<div>
{commonPart}
<p>有新消息。</p>
</div>
);
}
} else {
return (
<div>
{commonPart}
<p>没有新消息。</p>
</div>
);
}
}
}
export default Notification;
在这个Notification组件中，将切换消息状态和重要性的按钮部分提取为commonPart，在不同条件渲染时都复用这部分代码，减少了重复。
使用高阶组件（HOC）进行复用
高阶组件是 React 中一种强大的代码复用模式，它可以接受一个组件并返回一个新的增强组件。在条件渲染场景中，我们可以使用 HOC 来封装一些通用的条件逻辑。
import React from'react';
// 高阶组件
const withAuth = (WrappedComponent) => {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false
};
}
handleLogin = () => {
this.setState({ isLoggedIn: true });
};
handleLogout = () => {
this.setState({ isLoggedIn: false });
};
render() {
if (this.state.isLoggedIn) {
return (
<div>
<WrappedComponent {...this.props} />
<button onClick={this.handleLogout}>注销</button>
</div>
);
} else {
return (
<div>
<p>请登录。</p>
<button onClick={this.handleLogin}>登录</button>
</div>
);
}
}
};
};
// 被包裹的组件
const ProtectedContent = () => {
return (
<div>
<p>这是受保护的内容。</p>
</div>
);
};
const AuthenticatedComponent = withAuth(ProtectedContent);
export default AuthenticatedComponent;
在上述代码中，withAuth是一个高阶组件，它接收一个WrappedComponent并返回一个新的组件。新组件在渲染时会根据用户登录状态进行条件渲染，如果已登录则渲染被包裹的组件和注销按钮，否则显示登录提示和登录按钮。通过这种方式，我们可以将用户认证相关的条件渲染逻辑复用在多个需要保护的组件上。
条件渲染与 React 性能优化
虽然条件渲染是构建动态界面的重要手段，但不当的使用可能会对 React 应用程序的性能产生负面影响。因此，在使用if - else进行条件渲染时，需要关注性能优化。
避免不必要的重渲染
React 组件在其状态或属性发生变化时会重新渲染。在条件渲染中，如果条件判断所依赖的状态频繁变化且没有必要，就可能导致不必要的重渲染。
import React from'react';
class UnoptimizedComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
isVisible: true
};
}
incrementCount = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
toggleVisibility = () => {
this.setState((prevState) => ({ isVisible:!prevState.isVisible }));
};
render() {
if (this.state.isVisible) {
return (
<div>
<p>计数: {this.state.count}</p>
<button onClick={this.incrementCount}>增加计数</button>
<button onClick={this.toggleVisibility}>切换可见性</button>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleVisibility}>显示内容</button>
</div>
);
}
}
}
export default UnoptimizedComponent;
在这个UnoptimizedComponent中，count状态的变化与组件是否可见并无直接关系，但每次count变化都会导致整个组件重新渲染，包括不可见部分的 JSX 也会被重新计算。为了避免这种情况，我们可以使用 React.memo 来优化。
import React from'react';
const VisibleContent = React.memo((props) => {
return (
<div>
<p>计数: {props.count}</p>
<button onClick={props.incrementCount}>增加计数</button>
</div>
);
});
class OptimizedComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
isVisible: true
};
}
incrementCount = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
toggleVisibility = () => {
this.setState((prevState) => ({ isVisible:!prevState.isVisible }));
};
render() {
if (this.state.isVisible) {
return (
<div>
<VisibleContent
count={this.state.count}
incrementCount={this.incrementCount}
/>
<button onClick={this.toggleVisibility}>切换可见性</button>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleVisibility}>显示内容</button>
</div>
);
}
}
}
export default OptimizedComponent;
在优化后的代码中，将可见部分的内容提取到VisibleContent组件中，并使用React.memo进行包裹。这样，只有当VisibleContent组件的props发生变化时，它才会重新渲染，避免了因无关状态变化导致的不必要重渲染。
合理使用 key 属性
在条件渲染涉及列表渲染时，合理使用key属性对于性能提升至关重要。key属性帮助 React 识别哪些列表项发生了变化、添加或删除，从而更高效地更新 DOM。
import React from'react';
class ConditionalListRender extends React.Component {
constructor(props) {
super(props);
this.state = {
showList: false,
items: [
{ id: 1, text: '项目 1' },
{ id: 2, text: '项目 2' },
{ id: 3, text: '项目 3' }
]
};
}
toggleList = () => {
this.setState((prevState) => ({ showList:!prevState.showList }));
};
render() {
if (this.state.showList) {
return (
<div>
<ul>
{this.state.items.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
<button onClick={this.toggleList}>隐藏列表</button>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleList}>显示列表</button>
</div>
);
}
}
}
export default ConditionalListRender;
在上述代码中，当showList为true时渲染列表。每个列表项都设置了唯一的key属性，这使得 React 能够准确地跟踪列表项的变化，在列表更新时只更新实际变化的部分，提高了渲染效率。
与其他条件渲染方式的对比
除了if - else语句，React 还提供了其他条件渲染的方式，如逻辑与运算符（&&）、三元运算符（? :）等。了解它们与if - else的区别和适用场景有助于我们选择最合适的方式。
逻辑与运算符（&&）
逻辑与运算符（&&）可以简洁地实现条件渲染，常用于只有在条件为真时才渲染某个组件的情况。
import React from'react';
class AndOperatorRender extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false
};
}
handleLogin = () => {
this.setState({ isLoggedIn: true });
};
render() {
return (
<div>
{this.state.isLoggedIn && <p>欢迎，用户！</p>}
{!this.state.isLoggedIn && <p>请登录。</p>}
<button onClick={this.handleLogin}>登录</button>
</div>
);
}
}
export default AndOperatorRender;
在这个例子中，通过&&运算符根据isLoggedIn状态决定是否渲染欢迎消息或登录提示。&&运算符的优点是简洁直观，但它只能处理简单的条件渲染，对于复杂的多条件判断不如if - else语句清晰。
三元运算符（? :）
三元运算符（? :）也是一种常见的条件渲染方式，它可以在一行代码中根据条件返回不同的值。
import React from'react';
class TernaryOperatorRender extends React.Component {
constructor(props) {
super(props);
this.state = {
isNewUser: true
};
}
toggleUserType = () => {
this.setState((prevState) => ({ isNewUser:!prevState.isNewUser }));
};
render() {
return (
<div>
{this.state.isNewUser? (
<p>欢迎新用户！请完成新手引导。</p>
) : (
<p>欢迎回来，老用户！</p>
)}
<button onClick={this.toggleUserType}>切换用户类型</button>
</div>
);
}
}
export default TernaryOperatorRender;
三元运算符适用于简单的二选一条件渲染场景，代码较为紧凑。然而，当条件逻辑变得复杂，尤其是需要嵌套多个三元运算符时，代码的可读性会急剧下降，相比之下if - else语句在这种情况下更具优势。
综上所述，if - else语句在 React 的条件渲染中具有独特的地位，它适用于各种复杂程度的条件判断，通过合理的使用和优化，可以为 React 应用程序构建出高效、灵活且易于维护的动态用户界面。在实际开发中，我们应根据具体的业务需求和代码结构，选择最合适的条件渲染方式，以实现最佳的开发效果。