React：条件语句在肯定之前检查否定的优势？

Question

在Javascript中，if语句检查是否满足有利条件似乎是一种通用做法首先，

例如当前已定义参数或变量并可供使用：

const funcName = (necessaryParam) => {
  if (necessarryParam.length > 0) {
    console.log('condition met!');
    return; 
  }
console.log('condition not met!');
return;
}

在 React 中，我发现肯定肯定条件语句可以跳过整个 return 语句：

const Component = (props) => {
  if (props)
  return (
    <YourComponent withProps={props} />
  )
}

对于需要解析几行代码才能说它们没有足够的信息来优化运行的组件：

function YourComponent(props) {
  return (
    { props && (
        <ComponentEveryoneWantsThatNeedsProps withProps={props} />
      )
    }
    { !props && (
        <ComponentThatTellsYouYoureScrewed />
      )
   )
}

在一般情况下，如果我有一个组件的较大部分将在肯定条件下呈现，与较小部分在否定条件下呈现相比，我是否应该检查是否在 React 解析较大的肯定条件代码块之前，肯定条件 未满足 ？（这被认为是“良好做法”吗？）

例如更容易检查你是否没有我需要的东西，因为我可以告诉你早点离开...:[=14=]

function ConditionallyRenderedComponent(props) {
  return (
    { !props && (
      <div>
        <OneComponent />
      </div>
      )
    } // vs
    { props && (
      <div>
        <FirstComponent>
         <H1>
          <SecondComponent />
         </H1>
        </FirstComponent>
      </div>
      )
    }
  )
}

显然这些都是非常人为的例子，但希望我的问题是有道理的。

有没有理由先公开最简单的东西？是否有您认为效果最好的特定方法？

这真的重要吗？

关于在 React 中构建条件，您有任何有趣或有帮助的material想要分享吗？

Answer 1

条件检查的排序有多个注意事项。一些例子：

性能优化：例如过滤无效输入：

function calculateValue (...inputs) {
  if (!inputs.every(n => typeof n === 'number')) return NaN;
  // ...computationally expensive logic
  return expensiveResult;
}

在僵局中抛出异常以确保继续仅在有效状态下发生：

function findNestedSiblings () {
  // ...
  const element = document.querySelector(/* selector */);
  if (!element) throw new Error('msg');

  // element exists
  // continue...
}

除了性能优化之外，有时条件语句的结构可以帮助提高代码的可读性（这开始进入舆论领域）。如果您可以先处理终止条件（例如导致 return、throw、break、continue、yield 等），您通常不需要 else 块并且可以在范围内将代码保持在顶级缩进：我发现这非常有用并且通常与性能排序保持一致。

React：条件语句在肯定之前检查否定的优势？

React: Advantages for conditionals to check the negative before the affirmative?

javascript

if-statement

ternary

conditional-statements

reactjs