不要在 JSX 中构建盲分支 - React

Question

所以我最近读了一本关于反应技巧和技巧的书，上面说

// 🔴 Avoid: all the JSX written here will get compiled 
// even though it is on the false branch
const Component1 = ({ isLoggedIn }) => {
  return (
    <>
      {isLoggedIn && <div /*a lot of JSX */ />}
      {!isLoggedIn && <div /*a lot of JSX */ />}
    </>
  );
};

// 🟢 Good: one of the 2 components does not get mounted
const Component2 = ({ isLoggedIn }) => {
  return (
    <>
      {isLoggedIn && <LoggedInComponent />}
      {!isLoggedIn && <NotLoggedInComponent />}
    </>
  );
};

从书中：

如果你将所有的 JSX 放在一个组件中，所有分支中的所有 JSX 都会被编译，即使它在“无分支”中。
取而代之的是针对不同条件使用不同的组件将只安装真正的组件。

我明白这一点，但我不清楚。 这里到底发生了什么？ 为什么 component1 是一种不好的做法，应该避免呢？ 对我来说，这两个组件看起来和我一样。

Answer 1

更准确地说，这里使用的术语是：

避免：这里写的所有 JSX 都会被编译

在 JSX 上下文中，编译器将 JSX语法糖转换为等效的 JS 代码。

“......将以编程语言编写的程序的源代码作为其输入，并以相同或不同的编程语言生成等效的源代码”。 维基

而“编译”通常（总是）指的是编译步骤。

“......主要用于将源代码从高级编程语言翻译成低级语言的程序”。 维基

---

这里到底发生了什么？

Babel用作 JSX 编译器，用于转换上述 JSX：

// Author's claim to avoid
const Component1 = ({ isLoggedIn }) => {
  return React.createElement(
    React.Fragment,
    null,
    isLoggedIn &&
      React.createElement(
        "div",
        null,
        React.createElement("h1", null, "Example")
      ),
    !isLoggedIn &&
      React.createElement(
        "div",
        null,
        React.createElement("h1", null, "Example not logged in"),
        React.createElement("div", null, "Some another div"),
        React.createElement(SomeComponent, null)
      )
  );
};

// Author's claim to write
const Component2 = ({ isLoggedIn }) => {
  return React.createElement(
    React.Fragment,
    null,
    isLoggedIn && React.createElement(LoggedInComponent, null),
    !isLoggedIn && React.createElement(NotLoggedInComponent, null)
  );
};

作者在转译 HTML 标签而不是将它们转换为组件时，对“未使用分支”(.isLoggedIn) 的冗余 memory 消耗挑剔。

为什么 component1 是一种不好的做法，应该避免呢？

这是不错的做法（至少在我工作的地方），你不应该避免它，继续关注可读代码。

作者的意见与在渲染 function 中声明常量时挑剔的规模相同：

const Component1 = () => {
  const x = 5;
  return <div>{x}</div>;
};

const x = 5;
const Component2 = () => {
  return <div>{x}</div>;
};

围绕“过早优化是万恶之源”主题（查找术语）有成千上万的类似问题和讨论。