React应用中使用querySelector获取DOM滚动至页底报null引用错误

• getBoundingClientRect空引用报错：本质是DOM节点不存在导致的引用失效。当用户滚动到页面最底部触发scroll事件回调时，若发生路由切换、对应组件已经卸载，#stepTwo、#stepThree节点会从DOM树移除，此时querySelector返回null，直接调用节点方法就会抛出类型错误。之前的实现没有做空值兜底，加上滚动事件触发逻辑没有做组件生命周期状态校验，就会出现“功能正常、只在滚到最底时报错”的现象——路由跳转后页面剩余滚动距离较短，不会触发最后一次位置检查，一旦滚到最底刚好命中残留的事件回调。
• SASS样式全局污染：编写的组件样式没有加作用域隔离，所有选择器都是全局注册的，没有限定作用范围的情况下，同页面其他位置的同名类元素会被误匹配修改。
• 构造函数统一bind后出现setState异常：早期实现中，绑定和移除scroll监听时分别对方法做临时bind操作，每次bind都会生成独立的函数引用，导致移除监听时传入的函数和绑定的函数根本不是同一个引用，监听永远无法被清除。后续改成构造函数统一绑定本来是正确的实现，但之前残留的未清除的旧监听依然存在，当对应的React组件已经卸载后，旧监听触发回调时会在卸载的组件上调用setState，触发状态更新异常。

• 空引用报错修复：
  • 把方法绑定统一放在构造函数中生成固定引用，不要在绑定/移除监听的位置临时bind：构造函数中执行this.checkCoordinates = this.checkCoordinates.bind(this)，后续绑定监听传this.checkCoordinates，移除监听也传同一个引用，保证能正常移除事件。
  • 在checkCoordinates方法内获取目标DOM节点后先做非空判断，再执行位置计算：

    const stepTwoEl = document.querySelector('#stepTwo')
    const stepThreeEl = document.querySelector('#stepThree')
    if (!stepTwoEl || !stepThreeEl) return // 节点不存在直接终止逻辑，不调用getBoundingClientRect
    

• 样式污染修复：
  • 给组件样式加作用域隔离，要么使用React支持的CSS Modules（将样式文件命名为*.module.scss），要么在组件最外层加唯一标识类，所有内部样式嵌套在该类选择器下编写，避免全局样式泄漏。
• setState异常修复：
  • 给组件加生命周期标记位：组件挂载时设置this._isMounted = true，组件卸载阶段设置this._isMounted = false，在checkCoordinates方法中执行setState前先判断标记位状态，哪怕有残留的事件监听触发，也不会在已经卸载的组件上执行状态更新操作。

内容的提问来源于stack exchange，提问作者Rachael O'James