是的,可以使用useMemo来存储并传递memoized对象给useEffect中的依赖数组。这将确保只有在memoized对象发生更改时,useEffect才会重新运行。以下是一个示例:
import React, { useMemo, useEffect, useState } from "react";
function App() {
const [isLoading, setIsLoading] = useState(true);
const memoizedData = useMemo(() => {
// perform heavy calculations or API fetch
return [1, 2, 3]; // dummy data
}, []);
useEffect(() => {
if (!isLoading) {
console.log("Data has been loaded");
}
}, [memoizedData]);
return (
<div>
<h1>My App</h1>
{isLoading ? <p>Loading...</p> : <p>Data has been loaded</p>}
<button onClick={() => setIsLoading(false)}>Load Data</button>
</div>
);
}
export default App;
在上面的示例中,memoizedData是通过useMemo存储的,并传递给useEffect中的依赖数组。当isLoading状态改变时,useEffect将只在memoizedData发生更改时运行。这将有效地防止在应用程序中不必要地重复获取数据。