使用可自定义的道具对本地FlatList作出反应(良好实践)

Question

这个问题是关于在泛化组件时的良好实践和模式。

我正在实现一个FlatList包装组件"UserList"，它呈现"UserListItem“。

我的想法是使它变得灵活，允许将诸如"keyExtractor“或"renderItem”这样的定制道具作为可选的道具。如果道具未被传递，则列表将使用自己的方法。

因此，我有以下几点：

const UserList = memo(
  (props) => {
     const {
        data,
        keyExtractor,
        listKey,
        ListEmptyComponent,
        initialNumToRender,
        onRefresh,
        onEndReached,
     } = props;


     const _keyExtractor = useCallback((...) => ..., []);

     const _renderItem = useCallback((...) => ..., []);

     ...

     return (
        <FlatList
           ...
           keyExtractor={keyExtractor || _keyExtractor}
           renderItem={renderItem || _renderItem} 
           ...
           // some default configurations (updateCellsBatchingPeriod, windowSize, ...) for this type of component
        />    
  }
  (prevProps, nextProps) => { 
     ...
  }
);

像我一样实现列表和使用defaultProps来定义默认的keyExtractor和renderItem之间有什么区别吗？

我是说，就像这样：

UserList.defaultProps = {
  keyExtractor = (...) => ...,
  renderItem = (...) => ...
};

避免组件内部的定义。

此外，您是否考虑让可重用的FlatLists包装组件成为一种良好的实践？

制作另一个具有自己的FlatList和keyExtractor (避免对当前UserList组件的泛化)的包装组件是否更专业、更容易阅读？

Answer 1

在函数组件中使用defaultProps并不经常(如果有的话)，因为您可以在函数签名上直接定义默认值/回退值。使用props对象的析构赋值很容易。

const UserList = memo(
  ({
    data = [],
    keyExtractor = (...) => ...,
    renderItem = (...) => ...,
    listKey,
    ListEmptyComponent,
    initialNumToRender,
    onRefresh,
    onEndReached,
  }) => {
     ...

     return (
        <FlatList
           ...
           keyExtractor={keyExtractor}
           renderItem={renderItem} 
           ...
           // some default configurations (updateCellsBatchingPeriod, 
           //   windowSize, ...) for this type of component
        />    
  }
  (prevProps, nextProps) => { 
     ...
  }
);

此外，您是否考虑让可重用的

包装组件成为一种良好的实践？

React是为使用组合而设计的，在这里封装和组合这些默认配置似乎是一种有效的使用。不过，我会说，您封装的更多组合和配置开始限制组件的通用性/可重用性。换句话说，它开始转向更具体的用例。

是否更专业，更容易阅读，制作另一个具有自己的renderItem和keyExtractor的FlatList包装组件(避免了当前UserList组件的泛化)？

我不认为仅仅为了一些支持就需要或使用另一个平面列表组件，大多数平面列表组件API是足够通用的。我认为将自定义renderItem或keyExtractor函数定义为一组重要的实用程序会更有意义，如果您想减少代码复制，这些实用程序可以使用(而不是每次都定义)。