Question

在我的反应应用程序中，我有一个app.jsx组件，我在其中执行基本功能，例如获取窗口大小，通过调用API函数读取用户信息等。

这实际上是入口点的顶级组件。这就是我的切入点：

render (
    <Provider store={store}>
        <App>
            <HomePageComponent />
        </App>
    </Provider>,
    document.getElementById('app')
);

我感到困惑的是，在主页组件中，我有一堆子组件。看起来主页内的子组件的componentDidMount()函数正在执行 componentDidMount()组件的App函数之前。

这是应该的方式吗？从里到外？我正在设置一些基本的内务管理功能，例如在App组件中获取用户信息，认为它将首先执行。

Answer 1

是的，这是应该的方式。这不是一个像JSX那样的React问题。 JSX只是转换为函数调用。例如，您的代码变为：

React.createElement(
    Provider,
    { store: store },
    React.createElement(
        App,
        null,
        React.createElement(HomePageComponent, null)
    )
);

就像下面这样：

doSomethingSecond(doSomethingFirst());

在该示例中，doSomethingFirst将首先执行，结果将作为参数传递给doSomethingSecond。类似地，在JSX转换的代码中，React.createElement(HomePageComponent, null)将首先执行，结果将作为参数传递给包装React.createelement调用，依此类推。

您可以更好地了解JSX如何在Babel's site上转换为JS。

Answer 2

是的，这是预期的行为。在this问题中有关于它的讨论。

一些亮点：

如果componentDidMount执行parent-first，那么你唯一能找到的就是你的节点，因为此时所有子节点都没有被挂载。这使得componentDidMount对大多数用例无用（例如，计算offsetWidth，附加第三方非React插件等）。的（gaearon）

这不是一个错误，但可能令人困惑的文档。它是DOM元素的创建顺序。它与文档中的内容无关，因为无论如何我们无法保证（因为根目录可能不在文档中）。的（sebmarkbage）

从技术上讲，生命周期方法只能保证您的特定组件已安装。对于它的孩子，它没有做出任何承诺。依赖此顺序通常表明您正在打破组件的封装边界。的（sebmarkbage）

Answer 3

使用

constructor（）方法，用于加载cookings的初始操作。稍后提供你的componentDidMount（）操作等等。

为了更好地理解，请参阅 React Component Life Cycle

对执行顺序感到困惑

3 个答案: