反應 useMemo 和 useCallback

Question

我對useMemo和useCallback的用法存疑

const componentName = () => {

...

const renderItems = () => elements.map(elem => <div> {elem.name} </div>

...
return (
   <div>
    {renderItems()}
   </div>
);
}

第一個是：我應該在函數 renderItems 中使用鈎子 useCallback 嗎？

另一個問題是我有一個導出常量的外部文件：

export const labels = ["label1", "label2", "label3"];

我應該在與組件位於不同文件中的變量標簽上使用鈎子 useMemo 嗎？

謝謝！

Answer 1

1. 不需要使用useCallback因為不需要使它本身成為一個函數。 更簡潔的寫法應該是：

return (
   <div>
    {elements.map(elem => <div> {elem.name} </div>}
   </div>
);

但無論如何： useMemo首先用於值， useCallback用於函數定義。 在上面的代碼中使用useCallback只是節省了函數定義的執行時間。 該功能仍將運行。 如果你想記憶，你可以記憶輸出，這樣函數只運行一次，如下所示：

const renderedJSX = useMemo(() => 
{
const val = elements.map(elem => <div> {elem.name}</div>);
return val;
},[elements]);

然后將它與您的 return 語句一起使用：

return (
   <div>
    {renderedJSX}
   </div>
);

這樣你最好創建一個將elements作為道具的新組件並開始使用React.memo 。

無論您使用哪一個（ useCallback或useMemo ），您都必須使用elements作為依賴項。 一旦元素更改，您的代碼將重新運行。 elements是一個數組，因此它會在每次渲染時發生變化。

2. 如果變量的范圍僅限於反應組件，您可以將它們保留在函數體內。 memoize如果你想使用useMemo但這對於這樣一個簡單的變量來說就太過分了。 即使在單獨的文件中聲明，代碼在解析時也只會運行一次，因此您不必擔心。