在 React 中等效于来自 React Native 的 FlatList

Posted 2023-02-16

【中文标题】在 React 中等效于来自 React Native 的 FlatList

【英文标题】：Equivalent of FlatList from React Native in React

【发布时间】：2019-03-04 05:14:36

【问题描述】：

React 中是否有与 React Native 中的 FlatList 组件等效的组件？在 React Native 中构建了一个移动应用程序后，我现在将其转换为 React 用于 Web 应用程序。 （考虑过使用react-native-web，但最终决定放弃，主要是想学习React。）

如果没有等价物，我一直在考虑仅使用 map() 通过我构建的 Item 组件来呈现所有项目，也如文档中的 here 和此 SO question 中所示。

【问题讨论】：

尝试使用 react-native-web，它可能会为您节省大量将代码转换为 web 的时间。您可以使所有组件跨平台。

【参考方案1】：

我为此创建了一个组件

export const FlatList = (
  items,
  RenderItem,
  ListHeaderComponent,
  ListFooterComponent,
  ListEmptyComponent,
) => 
  // console.log(Render)

  // console.log(items, "items");

  if (Array.isArray(items)) 
    const render = items.map((v, i) => 
      return RenderItem( data: v, key: i );
    );

    // console.log(render, "render");

    if (render.length) 
      return (
        <React.Fragment>
          ListHeaderComponent ? ListHeaderComponent() : null
          render
          ListFooterComponent ? ListFooterComponent() : null
        </React.Fragment>
      );
    

    return (
      <React.Fragment>
        ListHeaderComponent ? ListHeaderComponent() : null
        ListEmptyComponent ? ListEmptyComponent() : null
        ListFooterComponent ? ListFooterComponent() : null
      </React.Fragment>
    );
  

  if (ListHeaderComponent || ListEmptyComponent || ListEmptyComponent) 
    return (
      <React.Fragment>
        ListHeaderComponent ? ListHeaderComponent() : null

        ListEmptyComponent ? ListEmptyComponent() : null
        ListFooterComponent ? ListFooterComponent() : null
      </React.Fragment>
    );
  
  return null;
;

我是这样用的

            <FlatList items=dataAdmin RenderItem=RenderAdmins />

您不必担心密钥，该组件会自动处理。您的 RenderItem 组件应如下所示

const RenderAdmins = ( data, key ) => 
  const org = data.organization;
  if (org) 
    return (
      <StyledTableRow key=key>
        <StyledTableCell align="center">org.name</StyledTableCell>
        <StyledTableCell align="center">data.email</StyledTableCell>
        <StyledTableCell align="center">org.phone</StyledTableCell>
        <StyledTableCell align="center">data.phone</StyledTableCell>
        <StyledTableCell align="center">
          data.first_name + " " + data.last_name
        </StyledTableCell>
        <StyledTableCell align="center">org.address</StyledTableCell>
        <StyledTableCell align="center">Eti Osa</StyledTableCell>
      </StyledTableRow>
    );
  
  return null;
;

您的项目应该是一个数组。

【参考方案2】：

最好使用 React 组件创建自己的列表。如果您有兴趣，我会帮助您创建一个。

【讨论】：

那么，如何像flatlist那样在reactjs中实现可见内容的渲染？

【参考方案3】：

官方反应网站suggestsreact-window和react-virtualized

【参考方案4】：

有一个名为 flatlist-react (npm install flatlist-react) 的 react 组件，您可以使用它来呈现如下列表：

<FlatList list=[1, 2, 3] renderItem=item => <li>item</li>/>

它还为您处理排序、分组、过滤和布局样式等事情。

项目：

https://github.com/ECorreia45/flatlist-react

【参考方案5】：

没有像 react-native 那样的特定组件来做这种事情，所以我通常只是使用map() 来实现这种事情。

但如果它是可重用的，您当然可以为自己创建一个 List 组件，这样您就不必每次都为同一个列表编写 map() 函数。

有点像这样：

function Item(props) 
   return <li>props.value</li>;


function MyList(items) 
   return (
    <ul>
      items.map((item) => <Item key=item.key value=item />)
    </ul>
  );

【讨论】：

FlatList 的好处是它只呈现在屏幕上可见的组件。使用map 不会这样做

【参考方案6】：

React-Native 通过 javascript 暴露原生 Andriod 和 ios 组件来工作。

android 和 iOS 有各自的 ListViews，在使用 FlatList 时会在内部调用它们。

html 没有与 iOS 和 Android 上的 ListViews 等效的列表组件。 您可以使用类似 https://github.com/Flipkart/recyclerlistview 的库来执行此操作，或者使用 Array.map 返回您想要呈现的 divs 并自己实现等效的滚动逻辑。

【讨论】：

recyclerlistview 在动态高度项上效果不佳，这是没用的，因为很多列表视图都有动态高度

【参考方案7】：

这个项目包含了很多 Flat List/List View 的特性——但似乎很赞同，它适用于 React Native 和 Web，你可以阅读这篇文章：

https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

一些有趣的点：

平面列表：

FlatList 非常棒，并带有大量功能。它甚至可以让你 渲染分隔符并带有内置的可自定义视图跟踪器 这是我们感兴趣的事情。

FlatList 是一个虚拟化列表视图，它通过卸载视图来实现 已超出视口。它确实有助于降低整体内存 使用率下降，但这种方法有缺点：

本机端的视图被破坏，导致大量垃圾收集。 现在需要在向上滚动时重新创建视图，这可能是 如果滚动很快就会出现问题。

项目：

https://github.com/Flipkart/recyclerlistview