javascript - 使用 React.JS 向容器填充内容

Question

我有一个容器元素，它也是一个 React 组件，具有特定的高度。我还有一个 API，可以根据请求的 ID 返回可变长度的内容 block 。

<Contents/>

我想从 API 请求新的内容 block ，直到容器溢出。

我的代码可以工作，但它会重新渲染所有内容 block 并在每次渲染中添加一个内容 block ，直到容器已满。这似乎是一个糟糕的方法。

class Contents extends React.Component {

    constructor() {
        super();

        this.state = {
            numElements: 0
        };
    }

    render() {
        const elements = [];
        for(let i = 0; i < this.state.numElements; i++) {
            elements.push(this._getElementContents(i));
        }

        return(<div id="contents">
            {elements.map(element => element)}
        </div>);
    }


    componentDidMount() {
        // start the 'filling loop'
        this._addElement();
    }

    componentDidUpdate() {
        // keep adding stuff until container is full
        if(document.getElementById('contents').clientHeight < window.outerHeight - 400) {
            this._addElement();
        }
    }

    _addElement() {
        // setState will cause render() to be called again
        this.setState({numElements: this.state.numElements + 1});
    }

    _getElementContents(i) {
        // simplified, gets stuff from API:
        let contents = api_response;
        return(<Element key={i} body={contents} />);
    }
}

如何将元素附加到容器直到填满，而无需在每个循环上重新添加、重新查询 API 和重新渲染现有元素？

Answer 1

我看不到您如何调用 API 或在什么条件下调用。根据我的理解，你应该做两件事。

将 elements 数组保留到 state 对象中，并在新元素到达时推送它们。

使用具有完全相同条件的 shouldComponentUpdate 而不是 componentDidUpdate 来判断何时必须从 API 请求更多元素。

最终绘制state.elements。每当您收到一个新组件时，您只需使用之前获得的本地元素来重绘该组件，而不用重新进行所有 API 调用