Question

我需要有关在何处执行数据过滤以获得最佳性能的建议。假设我从远程API的一个端点接收了很多产品，而从另一个端点接收了产品类别。我将它们存储在Redux状态，并且还保存到Realm数据库中，以便可以脱机使用。

在我的应用中，我有一个Stack.Navigator，其中包含2个屏幕：ProductCategories和ProductsList。当您按下类别时，它会带您进入类别下的产品。目前，我在组件内部执行数据过滤，据我了解，每次渲染组件时都会触发数据过滤，我怀疑这种方法会使应用程序变慢。所以我想知道是否有更好的方法呢？也许在加载应用程序时预先过滤每个类别的数据？

我的代码如下：

const ProductCategories = (props) => {

const isFocused = useIsFocused();

useEffect(() => {
    if (isFocused) {
      setItems(props.productCategories);
    } 
  }, [isFocused]);

return ( 
 ...
 );
};

const mapStateToProps = (state) => ({
  productCategories: state.catalog.productCategories,
});

const ProductsList = (props) => {

const isFocused = useIsFocused();

const productsFilteredByCategory = props.products.filter((product) => {
    return product.category === id;
  });
  useEffect(() => {
    if (isFocused) {
      setItems(productsFilteredByCategory);
    } 
  }, [isFocused]);

return (
...
)


const mapStateToProps = (state) => ({
  products: state.catalog.products,
});

Answer 1

您必须将redux中的数据标准化（您可以看到主要原理here），到下一个视图：

// redux store
{
  categories: {
    1: { // id of category
      id: 1,
      title: 'some',
      products: [1, 2, 3] // ids of products
    },
    ...
  },
  products: {
    1: { // id of product
      id: 1,
      title: 'some product',
    },
    ...
  }
}

然后，您可以创建几个选择器，即使没有备忘，选择器也可以比过滤器更快地工作，因为按属性从对象获取数据的时间是恒定的

const getCategory = (state, categoryId) => state.categories[categoryId]
const getProduct = (state, productId) => state.products[productId]

const getCategoryProducts = (state, categoryId) => {
  const category = getCategory(state, categoryId);

  if (!category) return [];

  return category.products.map((productId) => getProduct(state, productId))
}

过滤数据React Native最佳实践

1 个答案: