React生命周期组件的调用顺序

Question

我有一些问题... 为什么我们有componentWillUnmount这样的序列？ 从父母到孩子。

是否可以扭转和冒泡？ 从孩子到父母？

CodeSandbox

import React from "react";
import ReactDOM from "react-dom";

class Man extends React.PureComponent {
  componentWillUnmount = () => {
    console.log("Man");
  };

  render = () => "Man";
}
class Hello extends React.Component {
  componentWillUnmount = () => {
    console.log("Hello");
  };

  render() {
    return <p>Hello {this.props.children}</p>;
  }
}
class Root extends React.PureComponent {
  state = {
    visible: true
  };

  render = () => (
    <React.Fragment>
      <button
        onClick={() => this.setState(({ visible }) => ({ visible: !visible }))}
      >
        Click
      </button>

      {this.state.visible && (
        <Hello>
          <Man />
        </Hello>
      )}
    </React.Fragment>
  );
}
ReactDOM.render(<Root />, document.getElementById("container"));