面试题：React 条件渲染中的逻辑优化

Question

在 React 应用中，有一个需求：根据用户是否登录（isLoggedIn 为布尔值）来显示不同的内容。已登录时显示用户名（userName 变量存储）和注销按钮，未登录时显示登录按钮。请使用 React 的条件渲染实现该功能，并说明你使用的方法（如 if - else、三元表达式、逻辑与运算符等）及其优缺点。

Answer 1

使用三元表达式实现

import React from 'react';

function App() {
    const isLoggedIn = true;
    const userName = 'JohnDoe';

    return (
        <div>
            {isLoggedIn ? (
                <div>
                    <p>Welcome, {userName}</p>
                    <button>Logout</button>
                </div>
            ) : (
                <button>Login</button>
            )}
        </div>
    );
}

export default App;

方法及优缺点

三元表达式

• 优点：
  • 语法简洁，适用于简单的条件渲染场景，代码可读性较高，能直观地表达根据条件进行不同渲染的逻辑。
• 缺点：
  • 当条件逻辑变得复杂，嵌套多层三元表达式时，代码可读性会急剧下降，变得难以维护。

if - else

• 优点：
  • 逻辑清晰，对于复杂的条件判断和多分支情况，if - else 语句更易于理解和编写，代码结构更规整。
• 缺点：
  • 在 JSX 中使用 if - else 语句，由于 JSX 本质是 JavaScript 表达式，不能直接在顶层使用 if - else，通常需要封装在函数中，相比三元表达式，代码量会有所增加。

逻辑与运算符

import React from 'react';

function App() {
    const isLoggedIn = true;
    const userName = 'JohnDoe';

    return (
        <div>
            {isLoggedIn && (
                <div>
                    <p>Welcome, {userName}</p>
                    <button>Logout</button>
                </div>
            )}
            {!isLoggedIn && <button>Login</button>}
        </div>
    );
}

export default App;

• 优点：
  • 简洁明了，特别适用于只需要在条件为真时渲染某些内容的场景，对于显示或隐藏元素很方便。
• 缺点：
  • 只能处理条件为真时的渲染，对于条件为假需要渲染不同内容的情况，就需要额外的逻辑与运算符组合，增加了代码量和复杂度，且对于复杂逻辑可读性不如 if - else。