React list本地搜索render渲染慢

#1

最近在做一个项目，一个list列表大概100条记录，由于接口不能提供搜索接口，所以只能在利用js做本地搜索；
现在我的做法是：将返回的props.data 存至state中，当输入框输入的时候要求实时搜索，所以我就在onchange事件里对state.data进行filter，然后在render 里map.(lstRender)，但是现在发现一个性能问题：ios手机还好；但是安卓手机配置越低map渲染感觉约卡，让人感觉不是本地搜索。所以问问大神有没有遇到过这种问题，是filter+map的用法问题还是别的什么问题或者说有什么优化方案没?我项目的架子是 react+redux+webpack+router

#2

你可以先用10条数据测试一下，然后不断增加数据量，看看是不是数据过多导致的卡顿。

#3

是的，现在用slice(1,10)很快，slice(0,15)还行 总共也就100条，map所有就卡了，而且还会影响输入框的输入，当list所有都渲染出来了，input的值才会被填上

#4

一个页面渲染100条？为何不采用异步渲染的方式呢？

#6

请教如何做？不是很懂

#7

用 debounce/throttle 控制下输入频率， 有没有简化后的 demo 啊？

#8

做一下节流，不然每次按一个键就render了

#9

也就是有人回答的节流，使用定时器，假设ajax请求到100条，你可以先存入50条到state，然后react会监听state的改变去渲染这50条数据，接着n秒后，定时器执行，存入后50条数据到state，这样分开渲染可以使得页面加载的更加流畅。

#10

感谢已用react-debounce-input进行控制了