React中逻辑运算符条件渲染返回操作数值而非布尔值，易导致渲染0、空字符串等异常；应显式转换布尔值、用??处理空值、复杂逻辑优先三元、高频判断抽离为Hook。
React 中直接用逻辑运算符（如 &&、||）做条件渲染很常见，但很多人没意识到：它们返回的不一定是布尔值，而是**操作数本身的值**。这个特性若用错，轻则渲染异常（比如显示 0、"" 或 null），重则触发 React 警告甚至白屏。
别让 && 意外吐出数字或空字符串
&& 返回最后一个为真值的表达式，或第一个假值——它不转成 true/false。比如：
-
0 && <div>Hello</div>→ 渲染出0（不是隐藏，是真·显示数字 0） -
"" && <span>Text</span>→ 页面上出现空白文本节点（React 允许，但可能破坏布局） -
[].length && <List />→0 && <List />同样渲染0
避坑建议：对可能为 0、""、null、undefined、false 的左侧值，显式转布尔：{Boolean(count) && <Badge count={count} />} 或 {count > 0 && <Badge count={count} />}
|| 不等于“默认渲染”，小心 null 和 undefined 被透传
|| 返回第一个真值，否则返回最后一个值。问题在于：null 和 undefined 是假值，但它们是合法的 React 子元素；而 0、"" 是假值，却会被当成“兜底内容”返回：
-
value || <Placeholder />：当value是0或""，会错误渲染<Placeholder /> -
user?.name || "Anonymous"：如果user.name是""，也会显示"Anonymous"（可能不符合业务预期）
避坑建议：需要区分“无值”和“空值”时，用可选链 + 空值合并 ??：{user?.name ?? "Anonymous"}（?? 只在 null 或 undefined 时生效，"" 和 0 仍保留）
三元运算符仍是多数场景最安全的选择
当条件逻辑稍复杂（比如要处理多个假值语义），硬套 &&/|| 容易翻车。三元运算符明确限定分支，且不依赖“真/假值”的隐式转换：
- ✅ 清晰：
{isLoading ? <Spinner /> : data ? <List items={data} /> : <Empty />} - ❌ 模糊：
{isLoading && <Spinner /> || data && <List items={data} /> || <Empty />}（一旦data是[]或0，行为就不可控）
不需要为了“简洁”牺牲可读性和健壮性。React JSX 中写三元完全自然，编辑器也友好支持折叠。
自定义 Hook 封装高频判断逻辑
如果某类判断反复出现（比如“有数据且非空数组才渲染列表”），别在每个组件里手写 Array.isArray(data) && data.length > 0，容易漏掉边界情况：
- 抽成 Hook：
const { hasData } = useDataGuard(data) - 或工具函数：
if (isNonEmptyArray(data)) { ... } - 再配合
&&：{hasData && <List items={data} />}—— 此时左侧已是明确布尔值，安全无忧
把“值到布尔”的转换收口，渲染层只管“布尔 → 元素”，职责清晰，不易出错。
