数组更新渲染过慢

user_k6OfdZ9N
  • 1
新手上路,请多包涵

react-hooks组件里,维持了个数组,去map出jsx,但是当数组过多的时候,更新渲染过慢,有其他的解决办法吗?
类似如下

const [arr ,setarr] = useState([1,2,3,4,5])
...
return (<>
arr.map(item=>{
return(<div>{item}</div>)
})
</>)

实际:数据比这多,return的jsx比这复杂很多,每次setarr,全部更新渲染,当arr很多的时候,更新渲染慢啊!!!
有其他的解决方案吗?
跪求,呜呜~~

回复
阅读 1.3k
2 个回答
BeliefRC
  • 1k
  1. 我们在循环渲染列表时,react建议我们给列表中每一项绑定一个key值第一次渲染时,毕竟有这个多dom元素,渲染的过程是必须的,但是后续更新时,react会根据key值判断是否需要重新渲染该dom
  2. 我们循环渲染的dom内容,应该是抽离成一个子组件,子组件接收相应的属性,并且根据这些属性去渲染,props未发生改变时,本身就不会重新渲染。并且可以通过shouldcomponentupdate或者useMemo去做性能优化
  3. 如果数据真的很多,是否可以考虑做懒加载,第一次只渲染十条数据,后续通过某种交互触发一个事件,再在列表上去追加数据。

把list中的每一个item封装成一个hooks组件,然后组件中用useMemo,这样如果数据不变,就不会重新渲染,当然你的数组必须是Array<anyObject>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏