使用React和React路由器进行ajax调用的最佳实践

我的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();
    }
}

export类MyView扩展了React.Component，我有点担心在渲染调用中更改存储，即使是异步的

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

第二种方法似乎更复杂，涉及更多的函数重写

所以问题是：从渲染函数中发出ajax请求有什么不对吗

谢谢…
应该启用
渲染
功能。这意味着在
render
中进行AJAX调用是严格禁止的。原因是，如果渲染函数可以更改状态，它还可能导致重新渲染，这可能会导致您陷入渲染循环中，这将是非常难以调试的

但是，即使您仔细编写
render
函数，以确保永远不会陷入渲染循环，仍有进一步的理由保持
render
纯：React期望
render
为纯，因此在处理渲染时不期望状态更改。虽然您需要检查React的内部结构才能确定，但我非常确定在渲染时更改状态会对渲染性能产生严重影响，因为如果渲染时状态发生更改，则需要React中止渲染并重新启动。
应该启用
渲染
功能。这意味着在
render
中进行AJAX调用是严格禁止的。原因是，如果渲染函数可以更改状态，它还可能导致重新渲染，这可能会导致您陷入渲染循环中，这将是非常难以调试的

但是，即使您仔细编写
render
函数，以确保永远不会陷入渲染循环，仍有进一步的理由保持
render
纯：React期望
render
为纯，因此在处理渲染时不期望状态更改。尽管您需要检查React的内部结构才能确定，但我非常确定在渲染时更改状态会对渲染性能产生严重影响，因为如果渲染时状态发生更改，则需要React中止渲染并重新启动。
谢谢您的回复。我只是感到困惑，因为渲染本身并没有改变状态。直到ajax调用完成，状态才会更新，这是在render函数完全完成之后很长一段时间。使用我设置的标志，渲染只调用两次。一次用于加载视图，一次用于返回数据。没有循环发生。即使是异步的，您也不应该在
渲染
中启动任何副作用，因为React运行时希望您这样做，并且您应该假设运行时针对该用例进行了优化。即使它现在可以工作，它也可能在将来的React版本中崩溃。谢谢你的回复。我只是感到困惑，因为渲染本身并没有改变状态。直到ajax调用完成，状态才会更新，这是在render函数完全完成之后很长一段时间。使用我设置的标志，渲染只调用两次。一次用于加载视图，一次用于返回数据。没有循环发生。即使是异步的，您也不应该在
渲染
中启动任何副作用，因为React运行时希望您这样做，并且您应该假设运行时针对该用例进行了优化。即使它现在起作用，它也可能在React的未来版本中崩溃。