reactjs - 我可以在 ReactDOM.render 回调中做一些初始工作吗？

Question

我发现 ReactDOM.render 有一个 callback 参数。

ReactDOM.render(element, container, [callback]);

所以，我的想法是，也许我可以在其中做一些初步工作。

可以是:

调度全局操作以从服务器获取数据以初始化我的全局状态。

我的问题是我想让我的组件尽快呈现。

呈现静态内容后，我将执行一些 ajax 运算符来获取数据。

这是工作吗？或者，我可以用这个 callback 参数做什么？

这是我的案例:

现在，src/index.js

//some initial work
//sync and async work.
//...

ReactDOM.render(<App/>, document.getElementById('app'))

我的想法是像这样改变src/index.js:

ReactDOM.render(<App/>, document.getElementById('app'), () => {
    //some initial work
    //sync work will block the html parse and render.
    //my idea is let react component render as soon as possible
})

不知道我的想法对不对。感谢您的回复。

编辑

最初的工作不仅意味着ajax，还可能是cordova 或native client 提供的东西。

Answer 1

对于您尝试使用它的任务，无需使用 render() 方法回调。事实上，据我所知，这个回调并不是为了发出初始化请求；事实上，您将无法访问回调中的组件，而您可能需要在初始化时设置一些状态完成...

编辑评论后的部分:我个人对 ReactDOM 渲染回调的看法是，它主要用于将 React 与另一个不了解 React 的库/框架集成。比如:你需要在渲染组件时执行一个 Action ，只要它在 DOM 树中可用；调用渲染回调后，您确定组件已渲染到 DOM。

在您的情况下，我宁愿创建一个根组件 并将AJAX 调用委托(delegate)给它。我会渲染一个 App 组件，它会依次渲染所有其他组件。在这个 App 组件中，我会在 componentDidMount 中进行初始化。

另一种选择是创建容器组件，即。具有“包装”更简单组件的逻辑的组件。然后，像前面的解决方案一样实现 componentDidMount。

一些灵感:React AJAX best practices