代码之家 › 专栏 › 技术社区 › Kevin H

有什么方法可以优化功能吗?

reactjs javascript

Kevin H · 技术社区 · 3 年前

所以,我这里有这个函数

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只是用于上下文,我最关心的是分类函数。有没有什么可以优化的,因为我观察到我的网站滚动速度很慢,我认为这可能是滚动速度慢的罪魁祸首之一。提前感谢!

2 回复 | 直到 3 年前

Jack Bashford 3 年前

我能看到的优化代码的唯一方法是在找到匹配项后立即退出。(我更喜欢使用 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;
}, []);

第一个选项仍然是最具性能的,因为它在循环中运行的次数更少。

Yftach 3 年前

您可以使用useMemo https://reactjs.org/docs/hooks-reference.html#usememo

useMemo有两个参数。一个函数和一个依赖项数组,如果任何依赖项发生变化,它将重新运行提供的函数并存储值,如果依赖项没有发生变化,则下一次渲染时只使用以前的值。

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])

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前