1.If-else
2.三元运算符(?)
3.逻辑与(&&)
4.空值合并运算符(??)
5.Switch Case 语句
6.策略方案
高阶条件渲染场景
7.ErrorBoundry
8.高阶组件 (HOC)
9.render props
条件渲染的最佳实践
- If/Else 语句： 使用传统的 if/else 语句进行简单的分支逻辑渲染组件,简单易读。当条件简单且有限时，if/else 语句通常是一个不错的选择。
- 三元运算符 (?)： 三元运算符非常适合简洁的条件渲染，特别当需要基于单个条件渲染两个组件之一时。它非常适合希望保持 JSX 干净且可读的简单场景。
- 逻辑 AND (&&)： 当只想条件为真渲染组件时，逻辑 AND 运算符是一个干净而高效的选择。
- 空值合并运算符 (??)： 使用空值合并运算符为 null 或未定义的操作数提供默认值。当您需要确保组件不会因丢失数据而损坏时，它特别有用。即使数据可能不存在，该技术也能确保稳健的渲染。
- Switch Case 语句： 当您有多个条件导致不同的渲染时可使用 switch case 语句。这种方法可以保持代码的组织性和可读性，使其成为具有多个条件分支的复杂场景的绝佳选择。
- 策略方案： 可维护性高，但是条件复杂的时候会比较麻烦。
针对特定用例的高级技术：
- ErrorBoundry： 主要应用在捕获组件树的错误并展示兜底UI的场景。
- 高阶组件 (HOC)： HOC 对于封装和重用组件逻辑有用，并且在想要根据 props 或用户特定条件渲染组件的场景中尤其有用
- render Props： 当您需要对渲染进行细粒度控制并希望在组件之间共享渲染逻辑时，render props模式是一个不错的选择
注意事项
1. 过度使用三元运算符：
- 嵌套的三元运算符的可读性堪忧，如果发现使用了嵌套三元运算符，这可能表明应该重构为单独的组件或使用更合适的方法，例如
if语句或创建新的渲染函数。
2.滥用逻辑 ****&& 造成短路：
- 处理数字0或者空字符串时要小心。例如，如果 count 为 0，
{count && <Component />}则将无法渲染，因为 0 在 JavaScript 中是一个假值。
3. 滥用空值合并运算符 ****??：不要将它与逻辑||运算符混淆。value ?? alternative如果“value”为空或未定义，则表达式仅显示“alternative”，而value || alternative对于每个假值（例如，''、0、false）则显示“alternative”。
