react前端踩坑记录（5）：按钮小背景图片强制缓存浏览器方法

项目中的很多按钮都是通过设置不同的背景图片还变化样式和颜色。在写代码的时候通常是直接给按钮的css文件设置background-image属性。

会造成一个问题就是，在按钮的背景图片切换的时候，浏览器就会频繁删除之前的背景图片。造成再换回原来的按钮图片时，浏览器又会重新请求图片。

这样会造成显示的时候，按钮的背景图片消失，后端请求过于频繁等问题。

 

解决方法：

在按钮所在的组件的构造函数中，声明要用的图片。这样图片的生命周期就跟组件的生命周期进行了绑定，浏览器就不会轻易删除图片。

constructor(props) {
    super(props);

 this.myImg = new Image();
    this.myImg .src =
      "./xxx/xxx/xxx.png";
    
}