React基础第六章（条件渲染）

React 组件的条件渲染是一种强大的技术，它允许我们根据不同的条件动态地展示或隐藏界面的某些部分。本文将基于 React 官方文档中的知识点，探讨条件渲染的常见模式、技巧、示例代码以及需要注意的事项。

使用 if/else 语句进行条件渲染

在 React 中，我们可以使用 JavaScript 的 if/else 语句来根据条件返回不同的 JSX。

技巧：

将条件逻辑封装在组件的渲染方法或函数中。
使用早返回（early return）模式来简化代码。

示例：

jsx 复制代码

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

注意事项：

确保 if/else 分支覆盖了所有可能的情况。
避免在 JSX 中直接使用 if/else，因为 JSX 中不支持这种语法。

正确代码：

jsx 复制代码

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

错误代码：

jsx 复制代码

function Item({ name, isPacked }) {
  // 错误：JSX 中不支持 if/else 语法
  return (
    <li className="item">
      {if (isPacked) { return name + ' ✔'; } else { return name; }}
    </li>
  );
}

使用条件运算符进行内联条件渲染

条件运算符（三目运算符）是一种更加紧凑的条件渲染方式。

技巧：

当条件逻辑较简单时，使用条件运算符可以使代码更加简洁。
在 JSX 中使用条件运算符来内联条件渲染。

示例：

jsx 复制代码

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? <del>{name} ✔</del> : name}
    </li>
  );
}

注意事项：

当条件分支复杂或多个时，考虑使用 if/else 语句以提高可读性。
避免嵌套过多的条件运算符，这会使代码难以理解。

正确代码：

jsx 复制代码

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? <del>{name} ✔</del> : name}
    </li>
  );
}

错误代码：

jsx 复制代码

function Item({ name, isPacked }) {
  // 错误：嵌套过多的条件运算符
  return (
    <li className="item">
      {isPacked ? name === '宇航服' ? <del>{name} ✔</del> : name + ' ✔' : name}
    </li>
  );
}

在遇到需要多层嵌套的三目运算符时，确实会降低代码的可读性和可维护性。为了解决这个问题，你可以采取以下几种策略：

重构为 if/else 语句：如果条件逻辑复杂，考虑将三元运算符重构为 if/else 语句。这样可以使逻辑更加清晰，也便于调试。
使用函数封装：创建一个函数来封装复杂的条件逻辑。这样不仅可以提高代码的可读性，还可以复用逻辑。
使用逻辑与（&&）和逻辑或（||）运算符：对于一些简单的条件，可以使用逻辑与和逻辑或运算符来简化表达式。
使用变量存储中间结果：将条件运算符的结果赋值给变量，然后在 JSX 中使用这些变量。这样可以分步骤地展示逻辑，而不是一次性嵌套所有条件。

下面是一个示例，展示了如何将嵌套的三元运算符重构为更易读的代码：

原始代码（嵌套的三元运算符）：

jsx 复制代码

function Item({ name, isPacked, isFragile }) {
  return (
    <li className="item">
      {isPacked ? isFragile ? <del>{name} ✔ (Fragile)</del> : <del>{name} ✔</del> : name}
    </li>
  );
}

重构后的代码：

jsx 复制代码

function renderPackedItem(name, isFragile) {
  if (isFragile) {
    return <del>{name} ✔ (Fragile)</del>;
  }
  return <del>{name} ✔</del>;
}

function Item({ name, isPacked, isFragile }) {
  let content = isPacked ? renderPackedItem(name, isFragile) : name;
  return <li className="item">{content}</li>;
}

在这个重构后的示例中，我们创建了一个 renderPackedItem 函数来处理打包物品的渲染逻辑，并根据是否易碎来返回不同的 JSX。然后，在 Item 组件中，我们使用一个简单的三元运算符来决定是否调用这个函数。这样的代码更加清晰，易于理解和维护。

使用逻辑与运算符进行简洁条件渲染

逻辑与（&&）运算符可以用于在条件为真时渲染某个元素，否则不渲染。

技巧：

当只需要在某个条件为真时渲染元素，而不需要 else 分支时，使用 && 运算符。
确保左侧的表达式不是一个会被渲染的值，如数字 0。

示例：

jsx 复制代码

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name}{isPacked && ' ✔'}
    </li>
  );
}

注意事项：

当左侧的表达式为 0 或其他 falsy 值时，React 会渲染该值。确保左侧的表达式是布尔值或者在渲染时为 null/undefined。

正确代码：

jsx 复制代码

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name}{isPacked && ' ✔'}
    </li>
  );
}

错误代码：

jsx 复制代码

function Item({ name, isPacked, itemCount }) {
  // 错误：当 itemCount 为 0 时，会渲染 0
  return (
    <li className="item">
      {name}{itemCount && ' ✔'}
    </li>
  );
}

使用变量进行条件渲染

在复杂的条件渲染场景中，可以使用变量来存储条件渲染的结果。

技巧：

使用变量来存储 JSX，然后在 return 语句中引用这些变量。
使用 let 关键字声明变量，以便在需要时重新赋值。

示例：

jsx 复制代码

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = <del>{name} ✔</del>;
  }
  return <li className="item">{itemContent}</li>;
}

注意事项：

使用变量可以提高代码的灵活性，但可能会增加代码量。在适当的时候使用它。

正确代码：

jsx 复制代码

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = <del>{name} ✔</del>;
  }
  return <li className="item">{itemContent}</li>;
}

错误代码：

jsx 复制代码

function Item({ name, isPacked }) {
  const itemContent = name; // 错误：const 声明的变量不能重新赋值
  if (isPacked) {
    itemContent = <del>{name} ✔</del>;
  }
  return <li className="item">{itemContent}</li>;
}

记住，选择合适的条件渲染方法可以使你的代码更加清晰和易于维护。

React基础 第六章（条件渲染）

使用 if/else 语句进行条件渲染

使用条件运算符进行内联条件渲染

使用逻辑与运算符进行简洁条件渲染

使用变量进行条件渲染

React基础第六章（条件渲染）