React组件软刷新不显示仅硬刷新生效，querySelector返回null问题

问题核心原因 #

• 代码执行时机过早：你调用document.querySelector('.gb_1d.gb_3a.gb_Pd.gb_4d')时，目标DOM元素还没完全加载完成，所以返回null。硬刷新时浏览器清空缓存，页面加载顺序刚好让元素在代码执行前就绪，因此能正常显示。
• 手动在控制台执行时页面已经完全加载，元素自然存在，这和代码执行时机的差异是问题关键。

具体解决方法 #

方法1：等待DOM完全加载后执行代码 #

把挂载逻辑放到DOMContentLoaded事件回调里，确保目标元素已存在：

import React from "react";
import ReactDOM from "react-dom";

class IconComp extends React.Component {
    render() {
        return (
            <div id="IconIDIconID">I</div>
        )
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const app: HTMLElement = document.createElement('div') as HTMLElement;
    const pos: HTMLElement | null = document.querySelector('.gb_1d.gb_3a.gb_Pd.gb_4d');
    if (pos) { // 增加判断避免null报错
        pos.appendChild(app);
        ReactDOM.render(<IconComp />, app);
    }
});

方法2：用MutationObserver监听目标元素出现 #

如果目标元素是其他脚本动态生成的，DOMContentLoaded可能也抓不到，这时用MutationObserver监听元素的出现：

import React from "react";
import ReactDOM from "react-dom";

class IconComp extends React.Component {
    render() {
        return (
            <div id="IconIDIconID">I</div>
        )
    }
}

function waitForElement(selector: string): Promise<HTMLElement> {
    return new Promise(resolve => {
        const element = document.querySelector(selector);
        if (element) {
            resolve(element as HTMLElement);
            return;
        }

        const observer = new MutationObserver(mutations => {
            const element = document.querySelector(selector);
            if (element) {
                observer.disconnect();
                resolve(element as HTMLElement);
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

// 调用监听函数
waitForElement('.gb_1d.gb_3a.gb_Pd.gb_4d').then(pos => {
    const app: HTMLElement = document.createElement('div') as HTMLElement;
    pos.appendChild(app);
    ReactDOM.render(<IconComp />, app);
});

额外注意事项 #

• 不要强制用as HTMLElement断言，先判断元素是否存在，避免出现Cannot read property 'appendChild' of null的报错。
• 硬刷新能生效是偶发的加载顺序巧合，完全不可靠，必须从代码执行时机上彻底解决问题。

内容的提问来源于stack exchange，提问作者Matheus Irineu