用的是Ant Pro Design这个架子,往下刷列表的时候,发现内存增涨特别快,而且元素渲染出来也有点慢
用这个架子也是为了图快,应该是对 React 的使用不到位,各位有好的建议吗?
1
azh7138m 2019-07-22 17:46:19 +08:00
列表是啥?如果你是说大 Table 的问题,那目前是没救的。
demo 也不给,测试数据也没有,debug 全靠猜? |
2
wszgrcy 2019-07-22 17:50:38 +08:00 via Android
你要说列表的话,当然是虚拟滚动性能最好了
|
3
salamanderMH OP @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> ``` 就是这么一个组件渲染的 |
4
azh7138m 2019-07-23 14:54:55 +08:00
https://codesandbox.io 请
你这么写,是没法 debug 的 |
5
salamanderMH OP |
6
azh7138m 2019-07-25 18:19:03 +08:00
@salamanderMH key 用 id,item 固定高度,我这边感觉还能看
我觉得是实际 item 会很复杂,一次渲染那么多浏览器也吃不消 |
7
azh7138m 2019-07-25 19:26:45 +08:00
csb 的代码,初始 12M,每次翻页增加 5M,感觉还行,中间不会无故增加,你那么多内存占用我觉得是因为跑在 dev 模式下,prod 下看没啥问题
|
8
salamanderMH OP @azh7138m 感谢指导,这种有类似 Android 的回收机制吗?
|
9
azh7138m 2019-07-25 21:20:09 +08:00
回收啥,都在页面上要展示的。。。看内存消耗几乎都是 react-dom,优化只能是 2L 说的,用 https://github.com/bvaughn/react-virtualized 这种方案
|