基于多条件组合变量控制组件显示的实践合理性与拓展性咨询

你目前的实现逻辑本身是正确的，没有安全问题，但不属于可拓展的良好实践，少量条件下可以正常运行，条件多了之后很容易出逻辑错误。

现有实现的不足 #

• 当判断条件只有2-3个的时候，直接写test1 === false || test2 > 0是清晰的，但如果后续要新增test3、test4甚至更多判断规则，把所有逻辑堆叠在一行会导致可读性急剧下降，修改和排查问题的成本会很高
• 如果后续需要混用与（&&）、或（||）逻辑，很容易因为操作符优先级忘记加括号，出现不符合预期的逻辑错误
• 没办法给单个条件加注释，后续维护的人很难理解每个判断的业务含义

支持灵活拓展的优化方案 #

你可以根据后续逻辑的复杂程度选择下面两种优化方式：

1. 条件数组方案（适合单一逻辑关系的场景） #

如果所有条件都是「满足任意一个就展示组件」的或关系，或者「所有都满足才展示」的与关系，可以把条件放到数组里统一处理，新增条件只需要往数组里加就行：

const test1 = false
const test2 = 10
const test3 = 'new condition value' // 新增的判断变量

// 所有需要判断的规则，新增直接加元素即可
const showRules = [
  test1 === false,
  test2 > 0,
  test3 === 'new condition value' // 新增的判断规则
]

// 任意规则满足用some，所有规则都满足用every
const shouldShow = showRules.some(Boolean)

return shouldShow ? <MyComponent /> : null

2. 独立判断函数方案（适合复杂逻辑组合的场景） #

如果后续判断会出现与或混合的复杂逻辑，单独抽成判断函数会更清晰，也方便加注释说明每个判断的业务含义：

const test1 = false
const test2 = 10
const test3 = 'xxx'
const test4 = 3

const checkShouldShow = () => {
  // 基础展示规则：test1为假或者test2大于0
  const baseRule = test1 === false || test2 > 0
  // 拓展展示规则：test3等于指定值且test4小于5
  const extendRule = test3 === 'xxx' && test4 < 5
  return baseRule || extendRule
}

const shouldShow = checkShouldShow()

return shouldShow ? <MyComponent /> : null

运行预期与安全说明 #

• 不管是原有实现还是优化后的实现，只要判断条件的逻辑写的符合预期，运行结果都是可控的，也不存在额外的安全问题，React的条件渲染本身不会引入安全风险
• 原有实现理论上也可以新增条件，但是直接堆叠逻辑操作符的写法出错概率很高，比如新增&&条件忘记加括号改变了运算优先级，就会出现和预期不符的结果

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