React 组件层次结构中 componentDidMount 的顺序

IT技术 reactjs react-fiber
2021-05-02 20:37:19

我有一个具有以下结构的 React 应用程序:

A组分BC组成

当组件B调用它的componentDidMount方法时,所有组件都安装完成了吗?

或者换句话说,在树中的所有组件都被挂载之后React 会触发componentDidMount吗?

或者例如安装组件A时调用组件B componentDidMount

3个回答

根据文档,第一次挂载的生命周期方法的顺序如下:

  1. 构造函数()
  2. 组件WillMount()
  3. 使成为()
  4. 组件DidMount()

假设你有这个组件:

class A extends Component {
  render() {
    return (
      <div>
        <B />
        <C />
      </div>
    )
  }
}

A被挂载时,它会触发componentDidMount()这将在 render 之后发生由于在render()调用A 之前 B 和 C 不存在,因此完成 A 的挂载需要 B 和 C 完成各自的生命周期。AcomponentDidMount()将在 B 和 C 安装后触发。AcomponentWillMount()在 A 之前触发render(),因此它也在 B 或 C 安装之前触发

更新

从 React 16.3componentWillMount开始开始弃用过程,以及componentWillUpdatecomponentWillReceiveProps上面的示例在任何 16.x 版本的 react 中都可以正常工作,但会收到弃用警告。有一些新方法取代了已弃用的方法,它们具有自己的生命周期。有关它们的更多信息,请参阅组件 API 文档这是新生命周期备忘单图

React 文档说明:

componentWillMount() 在挂载发生前立即被调用。它在 render() 之前调用...

每个组件都会触发自己的 componentDidMount。A 将它自己,然后 B,然后 C。

所以我想你的问题的答案是,不,并非所有组件都会完成安装,因为它们“在安装之前立即”触发生命周期方法。

父母的componentDidMount火灾孩子的。

类似问题:父子组件以什么顺序呈现?