我對 React 很陌生，并且在我的公司創建了一個新視圖。我使用行內函式是因為許多指南都這樣做。一切都寫成函陣列件。
我這樣寫 onClick ：
onClick: () => onBackClick()
我的同事說這是一個無用的箭頭功能。
將嘗試為您提供全貌。父組件宣告了 onBackClick 函式
const Parent = () => {
const onBackClick = () => {backOff}
<Child {...{onBackClick}}/>
}
const Child = ({onBackClick}) => {
return (
<MyButton {...{onClick: () => onBackClick() }}/>
)
}
我的同事希望我這樣寫：
onClick: onBackClick
我沒有得到很好的解釋為什么并且真的很想學習。有人可以解釋一下為什么這是一種更好的撰寫方式。
問候。
uj5u.com熱心網友回復：
比較：
const onBackClick = () => { console.log("This does something useful"); };
const onClick = onBackClick;
onClick();const onBackClick = () => { console.log("This does something useful"); };
const onClick = () => onBackClick();
onClick();在第一個示例（您的同事的方式）中，有一個函式并且它被傳遞。
在第二個示例（您的方式）中，您創建了一個全新的函式，除了呼叫第一個函式之外什么都不做。
除了冗余之外，這還會在 React 中造成額外的低效率。
重新渲染組件時，會檢查輸出是否有更改。
onBackClick可能沒有改變，但是（當使用你的方式時）onClick已經改變了，所以 React 將從 DOM 中洗掉舊的事件處理程式，并使用onClick你創建的新的（但相同的）函式分配一個新的事件處理程式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/435177.html
標籤：javascript 反应
上一篇：反應路由器不作業并且控制臺中沒有錯誤或顯示編譯錯誤[反應路由器domv5]
下一篇：添加動態鍵設定狀態，反應