react 生命周期执行顺序

class App extends Component {
  componentDidMount() {
    console.log('app  componentDidMount');
  }
  componentWillMount(){
    console.log('app  componentWillMount');
  }
  render() {
    return (
      <div id='appId'>
        app 合并测试
        <span>自己做的选择 <i>深入一层，触发complete</i></span>
        <AL/>
        <BL/>
      </div>
    );
  }
}
class Al extends React.Component{
    componentDidMount(){
        console.log('AL componentDidMount')
    }
    componentWillMount(){
        console.log('AL componentWillMount')
    }
    render(){
        return <div>al</div>
    }
}
class BL extends React.Component{
    componentDidMount(){
        console.log('BL  componentDidMount');
    }
    componentWillMount(){
        console.log('BL  componentWillMount');
    }
    render(){
        return <div>Bl</div>
    }
}

主要是看 componentWillMount 和 componentDidMount 的执行先后顺序，此处不考虑代码的优雅等。打印如下：

// app  componentWillMount
// AL componentWillMount
// BL  componentWillMount
// AL componentDidMount
// BL  componentDidMount
// app  componentDidMount

调整代码的顺序如下：打印如下：

class App extends Component {
  componentDidMount() {
    console.log('app  componentDidMount');
  }
  componentWillMount(){
    console.log('app  componentWillMount');
  }
  render() {
    return (
      <div id='appId'>
        app 合并测试
        <span>自己做的选择 <i>深入一层，触发complete</i></span>
        <AL>
          <BL/>
        </AL>
      </div>
    );
  }
}
class Al extends React.Component{
    componentDidMount(){
        console.log('AL componentDidMount')
    }
    componentWillMount(){
        console.log('AL componentWillMount')
    }
    render(){
        return <div>al{this.props.children}</div>
    }
}

打印如下：

// app  componentWillMount
// AL componentWillMount
// BL  componentWillMount
// BL  componentDidMount
// AL componentDidMount
// app  componentDidMount

componentWillMount 是根据workLoop执行方式。componentDidMount 则先执行 BL。

这个和链表的执行有关。