问题

用的是Ant Pro Design这个架子，往下刷列表的时候，发现内存增涨特别快，而且元素渲染出来也有点慢

用这个架子也是为了图快，应该是对 React 的使用不到位，各位有好的建议吗？

架子

渲染

React

Ant

9 条回复 • 2019-07-25 21:20:09 +08:00

azh7138m

2019-07-22 17:46:19 +08:00

列表是啥？如果你是说大 Table 的问题，那目前是没救的。
demo 也不给，测试数据也没有，debug 全靠猜？

wszgrcy

2019-07-22 17:50:38 +08:00 via Android

你要说列表的话，当然是虚拟滚动性能最好了

salamanderMH

2019-07-23 13:40:40 +08:00

@azh7138m
```
<InfiniteScroll
initialLoad={false}
loadMore={this.fetchHots}
hasMore={!loading && hasMore}
useWindow
>
<List
dataSource={items}
itemLayout="vertical"
loading={items.length === 0 && !!loading}
renderItem={item => <ItemWrapper myData={item} />}
/>
{!!loading && items.length > 0 ? (
<div style={{ textAlign: 'center' }}>
<Spin />
</div>
) : null}
</InfiniteScroll>

```
就是这么一个组件渲染的

azh7138m

2019-07-23 14:54:55 +08:00

https://codesandbox.io 请
你这么写，是没法 debug 的

salamanderMH

2019-07-25 16:00:09 +08:00

@azh7138m https://codesandbox.io/embed/compassionate-aryabhata-tsmo3
大致例子就这样，只是实际 List 中元素多一点

azh7138m

2019-07-25 18:19:03 +08:00

@salamanderMH key 用 id，item 固定高度，我这边感觉还能看
我觉得是实际 item 会很复杂，一次渲染那么多浏览器也吃不消

azh7138m

2019-07-25 19:26:45 +08:00

csb 的代码，初始 12M，每次翻页增加 5M，感觉还行，中间不会无故增加，你那么多内存占用我觉得是因为跑在 dev 模式下，prod 下看没啥问题

salamanderMH

2019-07-25 19:58:36 +08:00

@azh7138m 感谢指导，这种有类似 Android 的回收机制吗？

azh7138m

2019-07-25 21:20:09 +08:00

回收啥，都在页面上要展示的。。。看内存消耗几乎都是 react-dom，优化只能是 2L 说的，用 https://github.com/bvaughn/react-virtualized 这种方案

前端页面渲染特别慢？

问题