React中监听div等Dom元素首次加载完成的方法

2022-02-22

React中监听div首次加载完成，简单老套但兼容性高的方法是轮询元素是否存在，最好外加高度或宽度的判断，具体选择offsetHeight、clientHeight或者其他属性均可，看心情吧～

react_logo
useEffect(() => {
    let timer = null
    function check() {
        let dom = document.getElementById('myDiv')

        if (dom && dom.offsetHeight) {
            if (timer) {
                clearTimeout(timer)
                timer = null;
            }

            // 开始业务逻辑
            // app.init('myDiv');
        } else {
            timer = setTimeout(check, 0)
        }
    }

    check()

	return () => {
     // 
	}
}, []);

关于监测节点变化，HTML5中MutationObserver接口提供了监视对DOM树所做更改的能力，这应该算是标准处理方法，有兴趣可以研究下。

参考API

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

（版权归cpury.com所有，转载请注明出处。）

WEB开发