过滤产品取决于用户选择

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

想要改进此问题吗？添加详细信息并通过

闭合 2年前。

Answer 1

我认为将所有内容都置于一种效果时没有错。使用具有不同依赖关系数组的多个效果的唯一好处是，如果只有一个参数更改，则可以跳过某些操作。

但是我认为对于您的用例并非如此，因为如果一个过滤器参数更改，则必须重新计算所有过滤器并再次排序。您唯一的好处是避免在仅排序参数更改时重新过滤。

即使那样，使用多种效果的性能提高也可能是可以忽略的。产品列表来自后端，因此我认为我们可以安全地认为它不是很大的 - 也许是数百个要素，但不是数百万或数十亿美元。过滤器操作很便宜，我们可以最后执行排序步骤。

因此，只需使用一个使用与组合依赖关系的挂钩。

 useEffect(() => {

    const applySort = (filteredList) => (sort.length === 0)
       ? filteredList
       : sort.includes('price.highest') 
       ? filteredList.slice().sort((a, b) => b.price - a.price)
       : filteredList.slice().sort((a, b) => a.price - b.price);
       
    const sizePredicate = (product) => (size.length === 0) 
      || product.size.includes(Number(...size));
        
    const brandPredicate = (product) => (brand.length === 0)
       || product.brand.includes(Number(...brand));

    const pricePredicate = (product) => (price.length === 0)
       || product.price > price[0][0]   
       && product.price < price[0][1];
 
    setFilteredProducts(
      applySort(
        data.getProducts()
          .filter(sizePredicate)
          .filter(brandPredicate)
          .filter(pricePredicate)
        )
      );
  
  }, [data.getProducts(), sort, price, brand, size]);