javascript - 无限滚动 React JS 回收 dom

Question

我完成了对我的组件的无限滚动流程。

一切都按预期工作。我想为此添加一个回收功能，当您向下滚动时，DOM 元素也会从顶部删除。然后在您向上滚动时添加回来。

一段时间以来，我一直在使用不同的方法。在我的情况下，您可以一次获取所有数据（52,000 条）记录，然后在查看方法中添加或删除它。但我希望它也能在获取限制的情况下工作。

因此，当您向 DOM 降低添加元素时获取数据，当您降低时它会从顶部删除它们，当您升高时它们会被添加回来。我不知所措。下面是组件的代码。以及它现在如何工作的 GIF。

var React = require('react');
import allTheStuffToMakeMyComponentWork = require'../alltheStuff.js'

class ClassInstancesListView extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            classInstancesArr: [],
            classInstanceStatusFilterStr: 'incomplete',
            limit: 25,
            search: '',
            scrolling: false
        };
    }

    componentDidMount() {
        //fetchTheData
        onClassInstancesStoreChange()
    }

    componentWillUnmount() {
        //destroying listeners
    }


    componentDidUpdate(prevProps, prevState, snapshot) {
        //adding the event listener once there is stuff fetched and on the dom
    }

    onClassInstancesStoreChange = (opInfo) => {
        //getting all my data
    };


    changeFilterStrAndRefetch = (filterStr) => {
        //changing drop down for filtering result
    };

    renderClassInstancePipelines() {
        //mapping through fetchewd data and rendering on cards
    }

    
    updateSearch(event) {
    //Event handler for using the search by type functionality.
    }


    loadMore = () => {
    //Will be called only  when the scroll event reaches the bottom of the page.
    };


    handleScroll = (e) => {
        //Scroll Listener which is initiatied on mount and listens for when the scroll reaches the last element in the #pipeLines list.
    };

    render() {
    return(
              //calling the function to render my stuff
    )

}

module.exports = ClassInstancesListView;

标签： javascripthtmlcssreactjsdom