在 React 中按条件渲染组件的最佳方式是什么？

Question

我有一个需要按条件渲染的组件，我对两种方式感到困惑，如下面的代码，我正在找出 React 的推荐方式。设置组件渲染条件的最佳方法是什么？我是 React 新手，希望得到一些帮助。

第一种方式：

const MyComponent1 = () => {
  return (
    <div>This is my component 1</div>
  )
}

{isRender && <MyComponent />}

第二种方式：

const MyComponent2 = ({ isRender }) => {
  if (!isRender) return null;

  return (
    <div>This is my component 2</div>
  )
}

<MyComponent isRender/>

我觉得如果组件未渲染，第二种方法会冗余该组件内的逻辑代码（例如：钩子、句柄函数……） 第一种方式不会影响CPU，因为组件没有渲染，所以内部逻辑不会被执行。这是真的吗？

Answer 1

第一种方法要好得多。正如您正确指出的那样，您需要在第一个 return 语句之前保留所有挂钩。当您不需要渲染组件时，您将不必要地添加这些钩子和任何其他逻辑。

其次，更重要的是，使用第一种方式时，您可以使用延迟加载，仅在第一次需要渲染时才加载组件，从而提高性能。

Answer 2

最常见的策略包括：

使用 if/else 或三元运算符：

要有条件地渲染组件，您可以使用标准的 if/else 表达式或三元运算符。这是使用三元运算符的说明：

function MyComponent({ isLoggedIn }) {

 return (
    <div>
      {isLoggedIn ? <LoggedInComponent /> : <LoggedOutComponent />}
    </div>
  );
}

使用&&运算符： 当您想要基于单个条件渲染组件时，&& 运算符可用于简单的条件渲染：

function MyComponent({ isLoading }) {
  return (
    <div>
      {isLoading && <LoadingComponent />}
    </div>
  );
}

使用 switch/case 语句： 如果要处理多个条件，可以使用 switch 语句：

function MyComponent({ status }) {
  switch (status) {
    case 'success':
      return <SuccessComponent />;
    case 'error':
      return <ErrorComponent />;
    default:
      return <DefaultComponent />;
  }
}

使用函数进行条件渲染： 您可以定义一个单独的函数来决定渲染哪个组件：

function MyComponent({ condition }) {
  function getComponent() {
    if (condition === 'A') {
      return <ComponentA />;
    } else if (condition === 'B') {
      return <ComponentB />;
    } else {
      return <DefaultComponent />;
    }
  }

  return (
    <div>
      {getComponent()}
    </div>
  );
}

根据您独特的用例和编码偏好选择策略。在某些情况下，使用 React Router 或 Redux 等工具还可以提供更有效的解决方案来管理复杂的条件渲染场景。选择方法时，请始终牢记代码的可读性和可维护性。