过滤掉数据 React Native最佳实践

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