React Native 中更好的列表视图
在我们在社区群组中发布预告后，许多人已经开始使用我们的一些新的列表组件了，但我们今天正式宣布它们！不再有ListView或DataSource、过时行、被忽略的 bug 或过多的内存消耗——通过最新的 React Native 2017 年 3 月发布候选版本（0.43-rc.1），您可以从新的组件套件中选择最适合您的用例的组件，开箱即用，具有出色的性能和功能集。
<FlatList>
这是用于简单、高性能列表的主力组件。提供一个数据数组和一个renderItem函数，就可以开始使用了。
<FlatList
data={[{title: 'Title Text', key: 'item1'}, ...]}
renderItem={({item}) => <ListItem title={item.title} />}
/>
<SectionList>
如果您想渲染一组分解成逻辑部分的数据，可能带有部分标题（例如，在字母地址簿中），并且可能带有异构数据和渲染（例如，带有按钮的个人资料视图，然后是作曲家，然后是照片网格，然后是朋友网格，最后是故事列表），这是最佳选择。
<SectionList
renderItem={({item}) => <ListItem title={item.title} />}
renderSectionHeader={({section}) => <H1 title={section.key} />}
sections={[ // homogeneous rendering between sections
{data: [...], key: ...},
{data: [...], key: ...},
{data: [...], key: ...},
]}
/>
<SectionList
sections={[ // heterogeneous rendering between sections
{data: [...], key: ..., renderItem: ...},
{data: [...], key: ..., renderItem: ...},
{data: [...], key: ..., renderItem: ...},
]}
/>
<VirtualizedList>
更灵活的 API 的幕后实现。如果您的数据不是纯数组（例如，一个不可变列表），则特别方便。
功能
列表在许多情况下使用，因此我们为新组件提供了许多功能，以处理大多数开箱即用的用例。
- 滚动加载 (
onEndReached)。 - 下拉刷新 (
onRefresh/refreshing)。 - 可配置的可见性（VPV）回调（
onViewableItemsChanged/viewabilityConfig）。 - 水平模式 (
horizontal)。 - 智能项目和节分隔符。
- 多列支持 (
numColumns) scrollToEnd、scrollToIndex和scrollToItem- 更好的 Flow 类型。
一些注意事项
-
当内容滚动出渲染窗口时，项目子树的内部状态不会保留。确保所有数据都捕获在项目数据或外部存储中，如 Flux、Redux 或 Relay。
-
这些组件基于
PureComponent，这意味着如果props保持浅层相等，它们将不会重新渲染。确保您的renderItem函数直接依赖的所有内容都作为在更新后不是===的 props 传递，否则您的 UI 可能不会在更改时更新。这包括dataprop 和父组件状态。例如<FlatList
data={this.state.data}
renderItem={({item}) => (
<MyItem
item={item}
onPress={() =>
this.setState(oldState => ({
selected: {
// New instance breaks `===`
...oldState.selected, // copy old data
[item.key]: !oldState.selected[item.key], // toggle
},
}))
}
selected={
!!this.state.selected[item.key] // renderItem depends on state
}
/>
)}
selected={
// Can be any prop that doesn't collide with existing props
this.state.selected // A change to selected should re-render FlatList
}
/> -
为了限制内存并实现平滑滚动，内容在屏幕外异步渲染。这意味着滚动速度可能快于填充率，并暂时看到空白内容。这是一个权衡，可以根据每个应用程序的需求进行调整，我们正在努力在幕后改进它。
-
默认情况下，这些新列表会在每个项目上查找一个
keyprop，并将其用作 React 键。或者，您可以提供一个自定义的keyExtractorprop。
性能
除了简化 API，新的列表组件还具有显著的性能增强，主要的一点是对于任意数量的行，内存使用量几乎恒定。这是通过“虚拟化”渲染窗口之外的元素来实现的，通过将它们从组件层次结构中完全卸载，并回收 React 组件的 JS 内存，以及阴影树和 UI 视图的本机内存。这有一个注意事项，即内部组件状态将不会保留，因此**请确保您在组件本身之外跟踪任何重要的状态，例如在 Relay 或 Redux 或 Flux 存储中。**
限制渲染窗口也减少了 React 和原生平台需要完成的工作量，例如视图遍历。即使您正在渲染数百万个元素中的最后一个，使用这些新列表也不需要迭代所有这些元素来渲染。您甚至可以使用scrollToIndex跳转到中间而不会过度渲染。
我们还对调度做了一些改进，这应该有助于提高应用程序的响应性。渲染窗口边缘的项很少渲染，并且在任何活动手势、动画或其他交互完成后以较低的优先级渲染。
高级用法
与ListView不同，渲染窗口中的所有项目在任何 props 更改时都会重新渲染。通常这没问题，因为窗口化将项目数量减少到恒定数量，但如果您的项目比较复杂，您应该确保遵循 React 性能最佳实践，并在您的组件中酌情使用React.PureComponent和/或shouldComponentUpdate来限制递归子树的重新渲染。
如果您可以在不渲染行的情况下计算行的高度，您可以通过提供getItemLayout属性来改善用户体验。这使得使用例如scrollToIndex滚动到特定项目更加流畅，并且会改善滚动指示器 UI，因为内容的高度可以在不渲染的情况下确定。
如果您有替代数据类型，例如不可变列表，则<VirtualizedList>是最佳选择。它接受一个getItem prop，允许您返回任何给定索引的项目数据，并且具有更宽松的 Flow 类型。
如果您有不寻常的用例，还可以调整许多参数。例如，您可以使用windowSize来权衡内存使用和用户体验，maxToRenderPerBatch来调整填充率和响应性，onEndReachedThreshold来控制何时发生滚动加载，等等。
未来工作
- 现有界面的迁移（最终废弃
ListView）。 - 根据我们的需求/意见增加更多功能（请告诉我们！）。
- 粘性节标题支持。
- 更多性能优化。
- 支持带状态的功能项目组件。
