使用React和react-router进行ajax调用的最佳实践

Question

我的React组件需要一个ajax调用来获取要呈现的数据。

最初，我使用该方法在Render中启动了一个ajax调用。这是我的伪代码...

export class MyView extends React.Component<any, any> {

    hasAjaxData: boolean = false;

    renderAndGetData() {
        const data = {

        };

        AjaxCall(data)
            .then((results) => {
                this.hasAjaxData = true;
                // save to store here, causing a rerender
                ...
                });
            })
            .catch((err: Error) => {
                console.error(err);
            });
        return (
            <SpinnerComponent />
        );
    }

    renderWithData() {
        return (
            <div>
                Render with data here
            </div>
        );
    }

    render() {
        return this.hasAjaxData ? this.renderWithData() : this.renderAndGetData();
    }
}

在阅读了关于呈现调用的React文档后，我有点担心在呈现调用中更改存储区，即使是异步的。

我提出了另一种使用componentDidMount和ComponentDidUpDate的方法。这最终变得稍微复杂一些，因为在最初呈现组件时，componentDidMount和componentDidUpdate都会被调用。任何后续更新（通过更改的URL，然后通过react-router重新执行）都不调用componentDidMount，而只调用componentDidUpdate（在初始装入期间也调用它）。为了避免任何不必要的呈现，需要仔细注意标志。

Answer 1

render函数应该是纯的。这意味着在render中进行AJAX调用是严格禁止的。原因是，如果您的呈现函数可以更改状态，它也可能导致重新呈现器，这可能导致您陷入呈现循环，这将是地狱调试。

但是，即使您谨慎地编写render函数，以确保永远不会陷入呈现循环，仍然有更多的理由保持renderpure：React希望render是纯的，因此它在处理呈现时不会期望状态发生变化。虽然您需要检查React的内部以确定，但我非常肯定在呈现时更改状态会对呈现性能产生严重影响，因为如果呈现时状态发生更改，则需要React中止呈现并重新启动。