Question

构建一个性能敏感的Redux应用程序，需要在整个用户会话中监听滚动/鼠标事件。

简单的英语实施将是：

＆＃34;当组件A位于用户的视口中时，调度FOO操作＆＃34;

根据我的理解，函数calculateViewPort +需要在每个滚动事件的商店中进行比较检查。

这看起来过于缓慢（尚未经过测试）。

我还有其他实施或方法吗？

我正在考虑使用像RxJS这样的Redux，但是想要考虑在引入新的性能库和用我现有的工具包解决它之间的权衡。

如果有一个传奇方法，我对此也更加开放。

Answer 1

有一个InfiniteScroll组件。你可以参考这个并以你的方式实现，或者你可以按原样使用。

注意：此组件未使用redux-saga。

最好与redux-saga一起使用，因为您只需要来自最新api调用（最后一次鼠标滚动）的响应takeLatest效果。

Answer 2

React Visibility Sensor可能是个不错的选择。您可以将组件包装在VisibilitySensor组件中，并在窗口视口上发送操作。

import React from 'react'
import { connect } from 'react-redux'
import VisibilitySensor from 'react-visibility-sensor'

import CUSTOM_ACTION from 'your-actions'

const CustomComponent = (noticeMe, ...children) => {
      const handleChange = (isVisible) => { if (isVisible) { noticeMe(); } }
      return <VisibilitySensor>{children}</VisibilitySensor>
    }
export connect({}, {
   noticeMe: () => dispatch(CUSTOM_ACTION)
})(CustomComponent)

redux和听滚动事件

2 个答案: