在jsx中，我们一般使用&&或者三目表达式来控制组件的渲染

// 使用三目表达式控制渲染哪个组件
{ hasKey? <TabBar />:<NoConnect />}

// 当只需要控制一个组件时，则可以使用&&运算符
{ hasKey && <TabBar /> }

当功能越来越复杂，jsx越来越庞大，这种写法多起来后，就严重影响了代码的可读性可维护性，一大堆的花括号，一大堆的三目表达式，一眼看过去非常的零乱。

于是，我便动手封装了一个替换三目表达式的组件

export default function IfElse({ condition, children }) {
  const childArr = React.Children.toArray(children);
  if(condition){
    return _.get(childArr, "[0]", null);
  }

  return _.get(childArr, "[1]", null);
}

很简单，只有一个if判断，使用后就像这样子

<IfElse condition={hasKey}>
  <TabBar />
  <NoConnect />
</IfElse>

看起来是不是要清爽很多，但是却有很大的安全隐患，之前React次级渲染中有提到过，逻辑代码将会优于组件先执行。这将导致本该是安全判断的前提代码失效，报出异常。

<IfElse condition={object && object.image}>
  <img src={object.image} />
</IfElse>

上述代码的条件语句object && object.image本是对image属性的安全判断，但是在IfElse组件中完全失效，object.image取值语句优先组件执行，所以会报出异常。如果项目泛用IfElse组件，那将导致无法预料的错误。（我立马从代码中删掉了IfElse组件...）

由此可见，组件封装jsx逻辑的思路并不安全，那么还有其他办法嘛？

JSX-Control-Statements 就是解决这个问题的一个Babel插件，它提供了诸如If、Choose、When、With、For等逻辑控制组件，但是这些都并不是真正的组件，而是在Babel编译阶段对其提供的组件进行转码成js代码，从而实现的一系列控制组件。

比如上面的例子，改用If组件写：

<If condition={object && object.image}>
  <img src={object.image} />
</If>

JSX-Control-Statements则会将其转译成这样

{
  object && object.image?<img src={object.image} />:null
}

使用了js三目运算符，所以避免了JSX组件中安全判断不再安全的问题。

那么，如果要控制多个组件渲染呢？再改写下，上上面的组件

<Choose>
  <When condition={ hasKey }>
    <TabBar />
  </When>
  <Otherwise>
    <NoConnect />
  </Otherwise>
</Choose>

这里使用了Choose、When、Otherwise三个组件，明显可以感觉到代码繁琐了很多，在处理多个组件渲染的时候，JSX-Control-Statements也并不是很方便，经过转译后，只是一个简单的三目表达式

{ hasKey? <TabBar />:<NoConnect />}

在使用With、For组件的时候，由于变量并未声明，所以ESlint将会报出错误

<For each="item" index="index" of={ items }>
  <span key={ item.id }>{ index }. { item.title }</span>
</For>

如上，item、index并未显式声明，虽然编译为js后没有错误，但是会逼死强迫症。所以这里还需要搭配eslint-plugin-jsx-control-statements使用。

相对于编译时长的增加，个人觉得将简单的代码繁琐化更加让人诟病，要不要使用JSX-Control-Statements主要还是取决个人喜好吧，反正也是编译成js代码，对于运行结果并没有什么影响。