异步代码的父子组件之间的componentDidMount顺序答案

【问题标题】：componentDidMount order between parent and child components for asynchronous code异步代码的父子组件之间的componentDidMount顺序
【发布时间】：2019-08-09 13:01:20
【问题描述】：

在react中，子组件的componentDidMount()方法先于父组件调用，如图here和here。

但是，如果孩子的 componentDidMount() 包含异步代码（例如 Fetch API），则情况并非如此。

只有在子的异步componentDidMount解决后，我如何运行父的componentDidMount()？

【问题讨论】：

从父级传递子级异步方法并从父级 componentDidMount() 方法调用，一旦您的子级异步调用完成，您就可以在父级中进行控制

标签： javascript reactjs

【解决方案1】：

做任何你想实现的更好的方法是在父组件中创建一个单独的函数并将它传递给子组件。当您的异步代码完成时，从子组件调用它。

【讨论】：

【解决方案2】：

只有在子的异步componentDidMount解决后，我如何运行父的componentDidMount()？

如果你可以避免这种依赖，我建议避免它。避免这种情况的一种方法是在父级中执行子级异步工作，并且仅在您拥有所有子级信息时才呈现子级（并将其作为道具传递，而不是让子级加载它）。

如果由于某种原因您不能这样做，您可以将父函数传递给他们在准备好时调用的子函数（作为道具），然后让 componentDidMount 中的代码等到所有孩子在工作之前已经回电了。

但同样，我会避免这种复杂性。

【讨论】：