REACT-存储需要经常更新的数据作为全局变量而不是使用setState（） - 不推荐？

Question

我试图确定在我的React组件中提高onScroll事件监听器性能的最佳方法。我有一个跟踪scrollY的简单监听器为了跟踪这个（跨浏览器），我有以下内容：

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

现在，我需要确定用户是向上还是向下滚动。我希望实际的event对象会有某种旗帜，但我大多数人都认为人们建议跟踪之前的scrollTop并与函数的每次迭代进行比较。

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

因此，我没有调用setState，而是考虑在组件中存储global variable - 我认为更新单个var 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
  }
}

Answer 1

是! setState()是一个异步操作，但是在每个setState调用你的组件重新渲染之后，最终它会在像滚动处理程序那样非常频繁地调用时出现性能问题。

理想情况下，如果更改变量与更新DOM（更具体地说是虚拟DOM）无关，那么它不应该作为状态变量保存，而是可以使类变量像

constructor(props){
    super(props);

    this.someVar = someDefaultValue;

并且可以使用someVar在组件内的任何位置访问此变量this.someVar。