{flag && <Demo />} 对吗？

自从写了React后，会经常看到这样的代码：

<div>
  {flag && <Demo />}
</div>

这段代码意思是如果 flag 为真，就显示后面的 Demo 组件，但偶尔会出现一些问题，比如只显示了一个 0。

这时，就到了去查mdn的时刻，在这里，简单来说，如下：

expr1 && expr2 如果 expr1 是 true ，返回 expr2 ; 否则，返回 expr1

这就说的很清晰了，比如：

1. true && 123 返回是 123
2. false && 123 返回是 flase
3. 0 && 123 返回是 0

可以直接在控制台看一下，所以我认为上面写法可以改为如下：

<div>
  {!flag || <Demo />}
</div>

因为有了 ! 所以会做强制转为 boolen 类型，和最上面的代码是相等的。

当然，你也可以写成如下2种形式：

<div>
  {!!flag && <Demo />}
</div>

<div>
  {flag ? <Demo /> : null}
</div>

但明显，下面这2个就没有第1个骚气。

但其实，我个人并不喜欢这种方式：

1. 根据 React 的 diff 策略，应该尽量少的改动 DOM 结构，这样写就代表要经常增加或删除 DOM 节点
2. 这样写导致每次都会重新触发React的一次全部生命周期，是一种偷懒的写法，作为一名优秀的前端娱乐圈明星，应该善用生命周期函数。