減少和監聽滾動事件

構建一個性能敏感的Redux應用程序，需要在整個用戶會話中監聽滾動/鼠標事件。減少和監聽滾動事件

純英文的實現是：

「當組分A是在用戶的視口，調度FOO行動」

從我的理解，功能calculateViewPort +對比檢查將需要在要進行存儲每個滾動事件。

這似乎過度和緩慢（還沒有測試過）。

是否還有其他的實施方法或方法，我還沒有考慮？

我在考慮爲Redux使用RxJS之類的東西，但要考慮引入新的性能庫和解決它與我現有的工具包之間的權衡。

如果有一個傳奇的方法，我也更加開放。

來源

2016-12-15 Anthony Chung

有一個InfiniteScroll組件。你可以參考這個，並以你的方式實現，或者你可以照原樣使用。

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

與redux-saga一起使用會更好，因爲您只需使用來自最新API調用（最後一次鼠標滾動）的響應以及takeLatest效果。

來源

2016-12-16 10:18:07 Thaadikkaaran

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)

來源

2017-07-24 03:39:53

減少和監聽滾動事件

回答

相關問題