条件渲染易错点

不要使用length等可能是0的值

对于

{arr.length && <Component data={arr} />} 

如果长度为0，会渲染一个 0 出来，因为0 是一个有效的 React 节点，所以这种条件判断必须确保左侧是 布尔值或者null、undefined，或者使用三元运算符。

{Boolean(arr.length) && <Component data={arr} />}
{arr.length ? <Component data={arr} /> : null                         }

|| 比 && 有更高的优先级

{a || b && <Component />}
// 等效于
{a || (b && <Component />)}

三元运算符是相同组件时不会重新挂载

{isShow ? <ComponentA data={data1} /> : <ComponentA data={data2} />}

当 isShow 改变时，因为两个组件是同一组件，在相同位置，React并不会重新挂载实例，而是保持当前挂载的实例，更新data数据，等效于

{<ComponentA data={isShow ? data1 : data2} />}

所有建议在使用三元运算符且相同组件时，带上key标签，具有相同 key 的元素是相同的逻辑元素。