在這里 React 很新。到目前為止，我只使用了不帶引數或道具的組件。然后，我總是使用表單渲染組件<SomeComponent {...props}/>
然而，我遇到了一種情況，我什至沒有意識到我創建的一些函式實際上是函式式組件，因為它們回傳的是 JSX。但是，它們與我習慣于制作和使用組件的方式明顯不同。它看起來像這樣：
const MoneyExample = (category, amount) => {
if (typeof amount !== "number" || typeof category !== "string") {
return;
}
return (
formatter.format(amount) !== "$0" && (
<>
<h4>{category.charAt(0).toUpperCase() category.slice(1)}</h4>
<p>{formatter.format(amount)}</p>
</>
)
);
};
然后使用這樣的方法在另一個組件中渲染它
{MoneyExample("Budget", someAmount)}
而不是更常見的形式
<MoneyExample budget={"Budget"} amount={someAmount} />
我試過四處尋找資訊，但我什至不確定如何表達這個問題。這種事情是違反 React 的原則還是完全沒問題？這兩者之間還有其他考慮因素或顯著差異嗎？對不起，如果這對某些人來說很明顯。
uj5u.com熱心網友回復：
{MoneyExample("Budget", someAmount)}
當您執行此操作時，MoneyExample不會被用作組件。它被用作輔助函式。里面的代碼MoneyExamples立即執行，然后使用它的回傳值。相比之下，<MoneyExample版本告訴 react 你想要一個MoneyExample帶有某些道具的東西，但MoneyExample實際上還沒有被呼叫（通常很快就會被呼叫）
在非常簡單的情況下，這可以正常作業，但是一旦您添加鉤子，您就會開始遇到麻煩。就 React 而言，這些鉤子是呼叫 的組件的MoneyExample一部分，而不是MoneyExample它本身的一部分。因此，您將強迫自己遵守鉤子的規則，這意味著MoneyExample必須在每次渲染時呼叫完全相同的次數。
此外，這樣做也意味著你不能使用 React.memo 來跳過渲染。即使沒有任何更改，該函式也必須始終執行。
簡而言之：我建議您堅持創建接受 props 的組件，然后使用 JSX 語法創建元素。
const MoneyExample = ({ category, amount }) => {
// ...
}
<MoneyExample budget={"Budget"} amount={someAmount} />
uj5u.com熱心網友回復：
你不能只是回傳，但你可以回傳null。
const MoneyExample = ({category, amount}) => {
if (typeof amount === "number" || typeof category === "string") {
const value = formatter.format(amount);
if(value !== "$0") {
return (
<>
<h4>{category.charAt(0).toUpperCase() category.slice(1)}</h4>
<p>{value}</p>
</>
);
}
}
return null;
};
你應該使用：
<MoneyExample budget={"Budget"} amount={someAmount} />
include via 函式在重新渲染組件時可能會有一些奇怪的行為。
https://griffadev.medium.com/just-a-friendly-reminder-that-react-isnt-really-just-javascript-don-t-nest-functional-components-a6a822dddd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/377615.html
標籤：javascript 反应
上一篇：有條件的解構
下一篇：不應在表中添加重復的用戶（條目）