React useMemo鉤子函數傳參失效詳解及解決方案
在React開發中，useMemo 鉤子函數是性能優化的利器，它可以緩存計算結果，避免不必要的重復計算。然而，在使用過程中，開發者可能會遇到傳參失效的問題。本文將分析一個典型案例，并提供有效的解決方案。
案例分析：參數遮蔽導致useMemo傳參失效
以下代碼片段展示了一個常見的useMemo傳參失效場景：
const oncellchange = useMemo((value, type, idx) => { console.log("77777", sortrulelist); // sortrulelist在此處有值 const tmpfunc = (value, type, idx, sortrulelist) => { console.log("99999", sortrulelist); // sortrulelist在此處為空 const arr = sortrulelist; // ...后續代碼 } return tmpfunc; }, [sortrulelist]);
問題根源在于tmpfunc函數的參數sortrulelist與外部作用域的sortrulelist變量同名，造成了參數遮蔽。內部函數的sortrulelist參數接收的是一個新的、空值，而不是外部作用域中已賦值的sortrulelist變量。因此，console.log(“99999”, sortrulelist)打印結果為空。
解決方案：避免參數名沖突
為了解決參數遮蔽問題，只需修改tmpfunc函數的參數列表，移除冗余的sortrulelist參數：
const onCellChange = useMemo((value, type, idx) => { console.log("77777", sortRuleList); const tmpFunc = (value, type, idx) => { console.log("99999", sortRuleList); // 現在可以正確訪問外部作用域的sortRuleList const arr = sortRuleList; // ...后續代碼 } return tmpFunc; }, [sortRuleList]);
通過移除tmpfunc函數中多余的sortrulelist參數，內部函數可以直接訪問外部作用域中已定義的sortRuleList變量，從而避免參數遮蔽，確保useMemo鉤子函數能夠正確地使用外部變量。 注意，我們也建議使用更具描述性的變量名，例如將sortrulelist改為sortRuleList，提高代碼可讀性。
通過以上修改，useMemo鉤子函數就能正確地使用外部變量，避免傳參失效的問題，提升代碼的可靠性和可維護性。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
