React条件渲染之逻辑与和逻辑或详解

在React中，&&通常用于当条件为真是渲染某个元素（通常&&左侧是条件），否则不渲染任何内容。

注意：0或者是空字符串""会被视为真值，也就是说当左侧是0或者是""，会继续渲染右侧内容。可以使用!!显式转换为布尔值。

在React中，||通常用于设置默认值或条件渲染优先级。

当变量可以为null或undefined时，使用||提供默认值。

可以根据多个条件渲染不同的内容

注意：0或者空字符串""会被视为假值，这样的话会直接跳过左侧返回右侧的值。

这种用法不免想起JavaScript中的逻辑与和逻辑或用法。

逻辑与运算符 &&在 JavaScript 中有一个特性：如果左侧表达式为 真，则返回右侧表达式；如果左侧为 假，则直接返回左侧结果。

逻辑或运算符 || 在 JavaScript 中的特性是：如果左侧表达式为 假，则返回右侧表达式；如果左侧为 真，则直接返回左侧结果。

说实话看到这两个感觉还是不太懂，甚至有点绕，怎么去理解它们呢？

首先来看逻辑与

如果左侧是真，那么真假由右侧来决定，因为真&&真=真，真&&假=假。

​​​​​​如果左侧是假，那么这个表达式就一定为假，也就是由左侧决定，相当于返回左侧的表达式的值。

再来看看逻辑或

如果左侧是假，那么真假由右侧决定，也就是相当于返回右侧表达式的值。

如果左侧是真，那么这个表达式一定是真，也就是由左侧决定，返回左侧的值。

再来回到React中

React不会渲染false。

在逻辑与中，当左侧为真，当右侧不是假的时候就是真，就会渲染右侧内容

当左侧为假，真个表达式为false，就不会任何渲染。

在逻辑或中，当左侧为假，如果右侧不为假，那么就会渲染右侧内容

当左侧为真，整个表达式一定为真，就渲染左侧的值（不一定渲染出true，如果左侧不是true，只是一个普通的值，就渲染那个普通的值）