React.js virtual dom机制遇到的问题

在项目中有这样一个案例,是做一个卡片列表,每个卡片可以理解为一张银行卡,具体样式如下图:

card_image.png

卡片列表外部是一个Div ,通过fetch 会获取到一个卡片List的JsonArray,通过map 返回多张卡片Card 组件

测试在测试过程中,发现一个问题,假如在删除第一张卡片的时候,第二张卡片的银行卡图片会出现异常,(删除第一张卡片之后,第二张变成第一张)对不上号的问题.

删除的流程是这样的,删除确认之后,会重新获取网络数据,重新跟卡片JsonArray 赋值,但是为什么重新赋值卡片的图片会出现异常呢?我的第一反应该是React.js的复用机制(virtual dom)的问题,当然问题的出现是我们本身没有正确理解和使用react 的生命周期的问题造成的.

后来发现,render方法里面通过this.state.bankimage来获取的图片,而这个this.state.bankimage是在componentDidMount 里面来赋值的,但是为什么删除之后,这个值就不对呢,经过同事指导原来是删除之后,其实react 内部并不会移除第一个Card 组件,而是把第二个Card组件的数据给了第一张,第一个Card组件并不会销毁,说白了就是第一个Card组件并不会重新执行componentDidMount,会执行componentDidUpdate方法,而我们获取图片的方法是在componentDidMount里面执行的,所以这里并未获取新的数据,所以数据出现了错乱

解决办法:

1. 可以在render方法里面来获取图片地址,但是同事不建议这样做,他说render方法会执行多次,而且这个获取图片的方法是耗时的.这样会影响效率

2. 利用componentDidUpdate方法来执行,在componentDidMount先执行一遍,在
   componentDidUpdate判断一下数据是否变更,如果变更就重新获取图片地址,最终决定使用第二种方法来解决

solve method.png