Order of componentDidMount in React components hierarchy

问题

I have an React application that has the following structure:

component A is composed of B and C

When the component B calls it's componentDidMount method, is this true that all component finished mounting?

Or in other words does React fire componentDidMount after all components in the tree were mounted?

or e.g. Components B componentDidMount is called when component A mounted?

回答1:

According to the documentation, the order of the lifecycle methods on first mount is as follows:

constructor()
componentWillMount()
render()
componentDidMount()

Let's say you have this component:

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

When A is mounted, it will fire componentDidMount(). That will happen after render. Since B and C do not exist before A's render() is called, the completion of A's mounting requires that B and C finish their respective lifecycles. A's componentDidMount() will fire after B and C are mounted. A's componentWillMount() fires before A's render(), and therefore it also fires before B or C are mounted

UPDATE

As of React 16.3, componentWillMount starts the deprecation process, along with componentWillUpdate and componentWillReceiveProps. The above example will work fine in any 16.x release of react, but it will get deprecation warnings. There are new methods that take place of the deprecated ones, with their own lifecycle. More about them in the component API docs. Here is a cheatsheet diagram for the new lifecycles

回答2:

The React docs state:

componentWillMount() is invoked immediately before mounting occurs. It is called before render()...

Each component will fire its own componentDidMount. A will its own, then B, then C.

So I guess the answer to your question is, no, not all components would have finished mounting, s they fire the life cycle method 'immediately before mounting'.

回答3:

Parent's componentDidMount fires after children's.

Similar issue: In which order are parent-child components rendered?

来源：https://stackoverflow.com/questions/48323746/order-of-componentdidmount-in-react-components-hierarchy

标签

reactjs

react-fiber