React列表渲染中图片闪烁问题

问题:videoList数据更新后,列表中的图片会闪烁。

原因:使用了函数式组件
由于数据更新render方法调用VideoItems返回的是一个新的React Dom节点,React不能有效在render中diff列表变化,以至页面重绘列表图片重新加载

解决办法1:不使用函数式组件渲染列表,如下:

解决办法2:

使用useCallbak hook对数据进行监听,数据更新时组件重新渲染