所以，我在這里有這個功能
const [shopItems,setShopItems] = useState("");_
useEffect(()=> {
commerce.products.list().then((product) => {
setShopItems(product)
});
}, [])
function categorize(category) {
let categoryarray = []
if (shopItems!= "s") {
shopItems.data.forEach((el)=> {
for (let i =0; i < el.categories.length; i ) {
if (el.categories[i].slug == category) categoryarray.push(el)
}
})
}
return categoryarray;
}
useEffect Hook 僅用于背景關系，我最關心的是分類功能。無論如何要優化這個，因為我觀察到我的網站滾動非常緩慢，我認為這可能是滾動速度緩慢的罪魁禍首之一。提前致謝！
uj5u.com熱心網友回復：
我可以看到優化該代碼的唯一方法是在找到匹配項后立即退出。（我更喜歡while為此目的使用回圈）。
shopItems.data.forEach(el => {
let idx = 0;
while (idx < el.categories.length) {
if (el.categories[idx].slug == category) {
categoryarray.push(el);
break;
} else {
idx ;
}
}
});
如果您想要看起來稍微好一點的東西（例如，不混合forEach和for），您可以使用它：（盡管我可以看到沒有性能增強）
shopItems.data.forEach(el => {
if (el.categories.map(({ slug }) => slug).includes(category)) categoryarray.push(el);
});
甚至使用reduce：
let categoryarray = shopItems.data.reduce((a, c) => {
if (c.categories.map(({ slug }) => slug).includes(category) return a.concat(c);
else return a;
}, []);
第一個選項仍然是性能最好的，因為實際上它會更少地運行回圈。
uj5u.com熱心網友回復：
您可以使用 useMemo https://reactjs.org/docs/hooks-reference.html#usememo
useMemo 有 2 個引數。一個函式和一個依賴項陣列，如果任何依賴項發生變化，它會重新運行提供的函式并存盤該值，如果依賴項沒有改變，則下一步渲染它只使用以前的值。
const categories = useMemo(() =>
let categoryarray = []
if (shopItems!= "s") {
shopItems.data.forEach((el)=> {
for (let i =0; i < el.categories.length; i ) {
if (el.categories[i].slug == category) categoryarray.push(el)
}
})
}
return categoryarray;
}, [shopItems.data, category])
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/384934.html
標籤：javascript 反应
下一篇：如何在reactv6中重定向