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

Reactjs React生命周期组件WillUnmount的调用顺序,reactjs,react-lifecycle,react-lifecycle-hooks,Reactjs,React Lifecycle,React Lifecycle Hooks,我有一些问题。。。 为什么我们有这样的组件卸载序列从父项到子项。 是否有可能反转并使其冒泡从孩子到父母? 从“React”导入React; 从“react dom”导入react dom; 类Man扩展了React.PureComponent{ 组件将卸载=()=>{ 控制台日志(“Man”); }; 渲染=()=>“人”; } 类Hello扩展了React.Component{ 组件将卸载=()=>{ console.log(“你好”); }; render(){ return你好{this

我有一些问题。。。 为什么我们有这样的组件卸载序列从父项到子项。

是否有可能反转并使其冒泡从孩子到父母?

从“React”导入React;
从“react dom”导入react dom;
类Man扩展了React.PureComponent{
组件将卸载=()=>{
控制台日志(“Man”);
};
渲染=()=>“人”;
}
类Hello扩展了React.Component{
组件将卸载=()=>{
console.log(“你好”);
};
render(){
return你好{this.props.children}

; } } 类根扩展了React.PureComponent{ 状态={ 可见:正确 }; 渲染=()=>( this.setState(({visible})=>({visible:!visible}))} > 点击 {this.state.visible&&( )} ); } render(,document.getElementById(“容器”);
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"));