React Native ListView 回收
React Native ListView Recycling
我正在玩 React Native,并尝试使用用户可以滚动浏览的 ListView 组件创建一长串卡片(非常类似于 Facebook 当前的应用程序)。我注意到的是,当我创建大量卡片时,应用程序的内存占用量会随着它们的滚动而持续增长。除非我滚动,否则它不会增长。
我对此的解释是,ListView 仅在视图变得可见之前渲染视图,这正是它应该做的。然而,我看不到的是,一旦视图从屏幕上滚动不可见,它是否会释放视图。是否需要设置一些属性才能启用此功能?我如何在 React Native 中管理长列表的内存?
ListView 保留其所有行组件,因为它们可能是有状态的(即具有 this.state
),但您可以使用 removeClippedSubviews
属性告诉它释放底层原生视图:
This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
https://facebook.github.io/react-native/docs/view.html#removeclippedsubviews。
看来有人已经在正确的道路上了。
https://github.com/facebook/react-native/issues/499#issuecomment-128836161
我正在玩 React Native,并尝试使用用户可以滚动浏览的 ListView 组件创建一长串卡片(非常类似于 Facebook 当前的应用程序)。我注意到的是,当我创建大量卡片时,应用程序的内存占用量会随着它们的滚动而持续增长。除非我滚动,否则它不会增长。
我对此的解释是,ListView 仅在视图变得可见之前渲染视图,这正是它应该做的。然而,我看不到的是,一旦视图从屏幕上滚动不可见,它是否会释放视图。是否需要设置一些属性才能启用此功能?我如何在 React Native 中管理长列表的内存?
ListView 保留其所有行组件,因为它们可能是有状态的(即具有 this.state
),但您可以使用 removeClippedSubviews
属性告诉它释放底层原生视图:
This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
https://facebook.github.io/react-native/docs/view.html#removeclippedsubviews。
看来有人已经在正确的道路上了。
https://github.com/facebook/react-native/issues/499#issuecomment-128836161