在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 決議更大的肯定條件代碼塊之前？（這被認為是“良好做法”嗎？）
例如，檢查您是否沒有我需要的東西會更容易，因為我可以告訴您早點滾蛋……：
function ConditionallyRenderedComponent(props) {
return (
{ !props && (
<div>
<OneComponent />
</div>
)
} // vs
{ props && (
<div>
<FirstComponent>
<H1>
<SecondComponent />
</H1>
</FirstComponent>
</div>
)
}
)
}
顯然，這些都是非常人為的例子，但希望我的問題是有道理的。
有沒有先暴露最簡單的事情的論據？有沒有一種特別的方法讓你覺得最有效？
這真的很重要嗎？
關于在 React 中構建條件，您有什么有趣或有用的材料想要分享？
uj5u.com熱心網友回復：
條件檢查的排序有多種考慮因素。一些例子：
性能優化：例如過濾無效輸入：
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塊并且可以在范圍內以頂級縮進維護您的代碼：我發現這非常有用并且通常與性能排序保持一致。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/399461.html
標籤：javascript 反应 if 语句 条件语句 三元