react使用行间style设置backgroundImage导致页面抖动

Question

如图所示，通过接口获取背景图片
问题：页面每次操作使用setState导致页面重新渲染，背景图都会闪烁一下，求解如何解决？

Answer 1

修改背景图肯定有一个下载图片再显示的过程，终究会闪动一下。

你可以手动下载了这个图片再设成背景，这样避免了加载过程。

核心代码

 axios.get(coverUrl, { responseType: "arraybuffer" }).then((response) => {
    const data = response.data;
    if (data.byteLength > 0) {
        const blob = new Blob([response.data], {
            type: response.headers["content-type"],
        });
        url = URL.createObjectURL(blob);
        containerRef.current.style.backgroudImage = `url(${url})`;
        // .....一些逻辑.....
        URL.revokeObjectURL(url); // ←用完revoke 注意规避内存泄漏
    }
});

Answer 2

加个 transition: all .5s 会不会好一些？