数组更新渲染过慢

Question

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很多的时候，更新渲染慢啊！！！
有其他的解决方案吗？
跪求，呜呜～～

Answer 1

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

Answer 2

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