React条件渲染疑似Bug：单一父元素下仍存在异常

嘿，我看了你的代码，你遇到的问题其实不是React条件渲染的Bug，而是因为你的写法不符合JSX的语法规范，导致React的Diff算法没法正确处理DOM更新～

问题出在哪？ #

你在条件渲染的两个分支里，都直接返回了多个相邻的顶级<div>元素，但JSX要求单个表达式只能返回一个根元素（或者用Fragment包裹多个元素）。虽然有些编译工具可能不会直接报错，但这种写法会让React把这些元素当作无key的数组来处理，Diff算法无法准确识别每个元素的身份，自然就会出现不符合预期的渲染结果。

怎么修复？ #

只需要用Fragment（或者外层容器）把每个分支里的多个元素包裹起来就行，这样React就能正确识别和对比不同分支的内容了。修改后的代码如下：

import React, { Component } from 'react';
class Foo extends Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    return(
      <div>
        { isLoggedIn ? (
          <>
            <div>one</div>
            <div>two</div>
          </>
        ) : (
          <>
            <div>one</div>
            <div>two</div>
            <div>three</div>
          </>
        )}
      </div>
    );
  }
}
export default Foo;

如果你的React版本低于16.2，没法用<>这种简化的Fragment语法，就换成<React.Fragment>就行：

// 替换分支里的<>为<React.Fragment>
<React.Fragment>
  <div>one</div>
  <div>two</div>
</React.Fragment>

为什么这样能解决问题？ #

当用Fragment包裹后，每个分支都返回了单个根节点（Fragment本身不会渲染成真实DOM节点），React的Diff算法就能清晰地对比两个分支的结构：当isLoggedIn状态切换时，它会准确判断出false分支比true分支多了一个<div>three</div>，从而正确地添加或移除这个节点，不会再出现异常的渲染行为。

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