React中JSX无用分支写法解析：Component1为何是不良实践？

先明确核心差异：Component1 会创建所有分支的虚拟DOM，即便分支不渲染；Component2 仅会初始化满足条件的组件，不满足的分支连虚拟DOM都不会创建。下面拆解具体原理和问题：

一、JSX 编译与执行的核心逻辑 #

JSX 是 React.createElement() 的语法糖，所有写在组件 return 里的 JSX，都会被编译成对应的 createElement 调用。还原两个组件的编译后逻辑，就能看清差异：

Component1 编译后逻辑 #

const Component1 = ({ isLoggedIn }) => {
  // 不管 isLoggedIn 真假，两个 createElement 都会执行，生成虚拟DOM对象
  const loggedInElement = React.createElement("div", null, /* 大量JSX对应的虚拟DOM */);
  const notLoggedInElement = React.createElement("div", null, /* 大量JSX对应的虚拟DOM */);

  return React.createElement(React.Fragment, null, 
    isLoggedIn && loggedInElement,
    !isLoggedIn && notLoggedInElement
  );
};

这里的关键是：无论条件是否成立，两个分支的虚拟DOM都会被创建，只是最终通过逻辑判断决定是否把它们加入渲染结果。如果分支包含复杂子组件、大量DOM节点，会产生不必要的CPU和内存开销。

Component2 编译后逻辑 #

const Component2 = ({ isLoggedIn }) => {
  return React.createElement(React.Fragment, null, 
    // 只有条件为真时，才会执行 createElement 创建组件的虚拟DOM
    isLoggedIn && React.createElement(LoggedInComponent, null),
    !isLoggedIn && React.createElement(NotLoggedInComponent, null)
  );
};

当 isLoggedIn 为 true 时，第二个 React.createElement(NotLoggedInComponent) 根本不会执行，NotLoggedInComponent 的函数体也不会被调用——连它内部的JSX编译、状态初始化、副作用逻辑都不会触发。

二、Component1 的不良实践点 #

1. 性能浪费
   大量无用的虚拟DOM创建会占用额外资源，尤其是当分支包含复杂组件、图片资源（即便不渲染，浏览器可能预加载src）、或者计算密集型逻辑时，开销会被放大。

2. 代码可维护性差
   所有分支的JSX混在同一个组件里，代码量快速膨胀，后续修改、调试不同分支逻辑时，需要在大量代码中定位，复用性极低。

3. 潜在意外行为
   如果分支里包含直接执行的函数（比如 <div>{fetchUserInfo()}</div>），不管条件真假，这些函数都会被调用——可能导致不必要的API请求、状态变更，引发难以排查的bug。

三、二者的本质区别 #

简单来说：Component1 是在渲染层面做分支过滤，先把所有内容准备好再筛选；Component2 是在组件初始化层面做分支控制，只对满足条件的内容进行完整的渲染流程。

内容的提问来源于stack exchange，提问作者Charitha Goonewardena