js的条件渲染(conditional rendering)

对于以下视图树

let show = false;
return <div>
    {show ? <span>hi</span>: null}
    {show ? <span>hi</span>: null}
   <button>submit</button>
    {show ? <span>hi</span>: null}
</div>

如何实现视图树中的三目操作符呢

React的做法是生成虚拟树，与旧树diff
在Vanilla js中怎么做？
视图树中的三目操作符实际上表达了两种操作：

1. 添加节点
2. 删除节点

删除节点好删，直接删了就是
添加节点呢，又分为两步

1. 创建节点
2. 插入到指定位置

这插入到指定位置就麻烦了，需要知道要插入到哪个位置呢？信息不足啊。
有如下方案：

1. 这是声明式的视图，所以可以在内存中保存此声明式视图，更新时从中提取
2. 记录前一个节点是谁，因为前一个节点也可能为null,所以可以记录为前一个节点的Wraper,这样就变成了引用链，总能找到要在哪个节点之后插入
3. 创建一个包装节点，这个节点不删除就好了

let show = false;
return <div>
    <div>{show ? <span>hi</span>: null}</div>
    <div>{show ? <span>hi</span>: null}</div>
   <button>submit</button>
    <div>{show ? <span>hi</span>: null}</div>
</div>