Javascript REACT-将需要频繁更新的数据存储为全局变量，而不是使用setState（）-不推荐使用？

我试图确定在React组件中提高onScroll事件侦听器性能的最佳方法。我有一个简单的监听器，它跟踪滚动条以跟踪此跨浏览器，我有以下功能：

handleScroll = (event) => {
    let scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
}

现在，我需要确定用户是向上还是向下滚动。我希望实际的事件对象会有某种标志，但我经常看到有人建议跟踪上一个scrollTop并与函数的每次迭代进行比较

我想知道，每次我的滚动句柄运行时调用this.setState{scrollY:scrollTop}对性能有什么影响？当我使用滚动条向下滚动页面时，我的事件处理程序将触发大约50-70次。我知道React.Component.setState确实有一些异步/批处理行为，调用它50次似乎太过分了

因此，我没有调用setState，而是考虑在组件中存储一个全局变量——我认为将单个变量更新50次影响较小。我也在考虑限制函数，但是如果我希望函数相对敏感并且不错过滚动事件，我可以限制函数吗

这基本上就是我想要做的：

// Global Variable ...
let avoidNameCollidePrevScrollTop

class WatchMeScroll extends Component {
  handleScroll = (event) => {
    let scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)

    if (avoidNameCollidePrevScrollTop && scrollTop > avoidNameCollidePrevScrollTop && this.state.scrollDir !== 'Scrolling Down') { 
             this.setState({
                 scrollDir: 'Scrolling Down'
             })
         }

    if (avoidNameCollidePrevScrollTop && scrollTop < avoidNameCollidePrevScrollTop && this.state.scrollDir !== 'Scrolling Up') { 
             this.setState({
                 scrollDir: 'Scrolling Up'
             })
        }
    // { Handle UI changes by checking if user is scrolling Up/Down into different sections of the app using Ref.getBoundingClientRect() }
    // Set ScrollTop position for next iteration of handleScroll - avoiding setState firing excessively
    avoidNameCollidePrevScrollTop = scrollTop
  }
}

对!！setState是一个异步操作，但是在每次调用setState之后，组件都会重新呈现，最终在频繁调用（如滚动处理程序）时可能会出现性能问题

理想情况下，如果更改变量与更新DOM（更具体地说是虚拟DOM）无关，则不应将其保留为状态变量，而应将其设置为类变量

constructor(props){
    super(props);

    this.someVar = someDefaultValue;

---

这个变量someVar可以在组件内部的任何地方使用。someVar。

我只想指出，如果状态或道具发生变化，组件只会重新渲染，而且由于React 16与Fiber一起使用，我不确定将变量保持在该状态是否真的值得注意。不过，如果有人对此进行了基准测试，我将非常有兴趣了解细节。