【前端】如何在 JSX 中使用条件语句和循环

在 JSX 中使用条件语句和循环是常见的需求，尤其是在构建动态用户界面时。以下是如何在 JSX 中使用条件语句和循环的详细说明。
在这里插入图片描述

条件语句

1. 三元运算符

三元运算符是最简单的条件语句形式，适用于简单的条件判断。

const isLoggedIn = true;const element = (<div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>
);

2. 逻辑与运算符 (`&&`)

逻辑与运算符可以用来在条件为真时渲染某个元素。

const isLoggedIn = true;const element = (<div>{isLoggedIn && <p>Welcome back!</p>}</div>
);

3. `if-else` 语句

虽然 JSX 不直接支持 if-else 语句，但可以在 JSX 外部使用 if-else 语句来决定渲染什么内容。

const isLoggedIn = true;let greeting;
if (isLoggedIn) {greeting = <p>Welcome back!</p>;
} else {greeting = <p>Please log in.</p>;
}const element = (<div>{greeting}</div>
);

循环

1. `map` 方法

map 方法是数组中常用的循环方法，适用于遍历数组并生成 JSX 元素。

const items = ['Apple', 'Banana', 'Cherry'];const element = (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>
);

注意：在生成的 JSX 元素中，建议使用 key 属性来唯一标识每个元素，以提高性能和避免潜在的问题。

2. `for` 循环

虽然可以直接在 JSX 中使用 for 循环，但通常更推荐使用 map 方法，因为 map 方法返回一个新的数组，更适合在 JSX 中使用。

const items = ['Apple', 'Banana', 'Cherry'];const listItems = [];
for (let i = 0; i < items.length; i++) {listItems.push(<li key={i}>{items[i]}</li>);
}const element = (<ul>{listItems}</ul>
);

组合条件语句和循环

在实际应用中，条件语句和循环经常组合使用。以下是一个更复杂的例子，展示了如何在 JSX 中同时使用条件语句和循环。

const users = [{ id: 1, name: 'Alice', isAdmin: true },{ id: 2, name: 'Bob', isAdmin: false },{ id: 3, name: 'Charlie', isAdmin: false }
];const element = (<div><h1>User List</h1><ul>{users.map(user => (<li key={user.id}>{user.name} {user.isAdmin && <span>(Admin)</span>}</li>))}</ul></div>
);

在 JSX 中使用循环和条件语句时，有一些限制和最佳实践需要注意，以确保代码的可读性和性能。以下是一些常见的限制和注意事项：

循环的限制和注意事项

避免在 JSX 中直接使用 for 循环：

虽然可以在 JSX 中使用 for 循环，但这通常会使代码变得难以阅读和维护。推荐使用 map 方法来遍历数组。

// 不推荐
const items = ['Apple', 'Banana', 'Cherry'];
let listItems = [];
for (let i = 0; i < items.length; i++) {listItems.push(<li key={i}>{items[i]}</li>);
}
const element = <ul>{listItems}</ul>;// 推荐
const items = ['Apple', 'Banana', 'Cherry'];
const element = (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>
);

使用 key 属性：
- 在生成的 JSX 元素中，必须为每个元素提供一个唯一的 key 属性。这有助于 React 高效地更新和渲染列表。
```
const items = ['Apple', 'Banana', 'Cherry'];
const element = (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>
);
```
- 尽量使用稳定的、唯一的标识符作为 key，而不是数组索引。

避免在 map 中进行复杂的计算：

如果在 map 方法中进行复杂的计算或异步操作，可能会导致性能问题。考虑将这些操作移到组件的生命周期方法或其他地方。

// 不推荐
const items = [/* 大量数据 */];
const element = (<ul>{items.map(item => (<li key={item.id}>{computeComplexValue(item)}</li>))}</ul>
);// 推荐
const items = [/* 大量数据 */];
const computedItems = items.map(item => ({...item,computedValue: computeComplexValue(item)
}));
const element = (<ul>{computedItems.map(item => (<li key={item.id}>{item.computedValue}</li>))}</ul>
);

条件语句的限制和注意事项

避免在 JSX 中使用复杂的条件逻辑：

尽量避免在 JSX 中使用复杂的条件逻辑。如果条件逻辑比较复杂，可以将其提取到组件的方法或变量中。

// 不推荐
const isLoggedIn = true;
const element = (<div>{isLoggedIn ? (<p>Welcome back!</p>) : (<p>Please log in.</p>)}</div>
);// 推荐
const isLoggedIn = true;
const greeting = isLoggedIn ? 'Welcome back!' : 'Please log in.';
const element = (<div><p>{greeting}</p></div>
);

使用 && 运算符时注意空值：
- 使用 && 运算符时，如果左侧表达式的值为 false、null、undefined、0 或 NaN，右侧的表达式将不会被计算。因此，需要注意这些情况。
```
const isLoggedIn = null;
const element = (<div>{isLoggedIn && <p>Welcome back!</p>}</div>
);
// 上面的代码不会渲染 <p>Welcome back!</p>，因为 isLoggedIn 是 null
```

避免在条件语句中使用副作用：

条件语句中的表达式应该是纯函数，避免产生副作用。例如，不要在条件语句中修改状态或执行网络请求。

// 不推荐
const isLoggedIn = true;
const element = (<div>{isLoggedIn && fetchData()}</div>
);// 推荐
const isLoggedIn = true;
useEffect(() => {if (isLoggedIn) {fetchData();}
}, [isLoggedIn]);
const element = (<div>{isLoggedIn && <p>Welcome back!</p>}</div>
);