记一次dom.appendChild 的坑

现象

首先，登录有两种方式，二维码和帐号，默认是二维码登录。

有个有趣的现象：每次打开默认的二维码可以正常显示，二维码失效后，点击刷新二维码也可以正常显示，但是当我切换成帐号登录，再切换成二维码登录后，二维码消失了。

获取二维码接口

//返回qrcode生成的链接qrCodeContent
const qrcodeInfo = await PassportSDK.refreshQRCode()

//真正生成二维码并放到我提供的domId下面
PassportSDK.generateByDom('qrcode', qrcodeInfo.qrCodeContent)

按理说调的都是同样的接口，为什么一开始以及点击刷新就可以正常生成二维码，但是切换登录方式之后就拿不到呢，我们看下接口实现方式

function generateByDom(domId, text) {
    //重新生成qrcode
    if (text) {
        this.qrCodeOrigin.makeCode(text);
    }
    
    //根据domId拿dom
    var dom = document.getElementById(domId);
    if (!dom) {
        return false;
    }
    
    //找到img
    var img = (0, _lodash4.default)(this.tempElement, ['children', 1]);
    if (!img) {
        return false;
    }
    
    //放到dom里
    dom.appendChild(img);
}

看起来真的没毛病，但仔细想想这句话

dom.appendChild(img);

下面上图

Screen Shot 2018-06-25 at 10.18.33 PM.png

执行完这句话，img就从tempElement移动到dom下了，所以后续刷新显示的都是同一个二维码

Screen Shot 2018-06-25 at 10.18.40 PM.png

当切换tab以后，之前的dom Unmount，但是img还是指向之前的img对象，tempElement还是没有img，导致切回二维码登录，component重新渲染，新的dom一直拿不到img

Screen Shot 2018-06-25 at 10.18.47 PM.png

不能直接移动img，那么我克隆一个它的副本，每次把副本放进dom总可以了吧

Screen Shot 2018-06-25 at 10.20.03 PM.png

又犯错了，不能一直往里面移呀，要去判断dom里面是不是已经有了img，有了就replace掉哦

Screen Shot 2018-06-25 at 10.20.08 PM.png