面试题：React 条件渲染下如何优雅地隐藏与显示元素

Question

在 React 应用中，假设你有一个按钮和一个文本段落，当点击按钮时，文本段落需要显示或隐藏。请使用 React 的条件渲染实现这一功能，并说明在这种场景下使用三元运算符和 `if - else` 语句进行条件渲染的优缺点。

Answer 1

React 实现代码

import React, { useState } from 'react';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  const handleClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={handleClick}>
        {isVisible ? '隐藏文本' : '显示文本'}
      </button>
      {isVisible && <p>这是需要显示或隐藏的文本段落。</p>}
    </div>
  );
};

export default App;

三元运算符优缺点

• 优点：
  • 简洁性：语法简洁，适用于简单的条件渲染场景，使代码更紧凑易读，如上面代码中按钮文本的切换。
  • 表达式特性：它是一个表达式，可用于任何需要表达式的地方，比如作为函数参数。
• 缺点：
  • 可读性问题：当条件逻辑变得复杂，嵌套多个三元运算符时，代码可读性会急剧下降。例如：condition1 ? value1 : condition2? value2 : condition3? value3 : value4，这种多层嵌套很难快速理解逻辑。
  • 可维护性挑战：复杂逻辑下的嵌套三元运算符，修改和维护成本较高，因为很难快速定位和修改特定条件分支。

if - else 语句优缺点

• 优点：
  • 清晰的逻辑：对于复杂的条件逻辑，if - else 语句结构清晰，易于理解和维护。每个条件分支一目了然，如：

let content;
if (isVisible) {
  content = <p>显示文本</p>;
} else {
  content = null;
}
return (
  <div>
    <button onClick={handleClick}>{isVisible? '隐藏文本' : '显示文本'}</button>
    {content}
  </div>
);

• 灵活性：可以包含多条语句，在每个分支中可以执行复杂的操作，如函数调用、变量声明等，而三元运算符只能返回一个值。
• 缺点：
  • 冗长：对于简单的条件渲染，if - else 语句相比三元运算符显得冗长。例如上面简单的文本显示隐藏，使用 if - else 语句代码量更多。
  • 不能直接用于表达式：if - else 是语句，不能像三元运算符那样直接用在需要表达式的地方，如作为函数参数。