react 父子组件执行顺序错误

Question

在父子组件中都有componentDidMount周期函数，但发现每次都是父组件的componentDidMount先执行，之后在执行子组件的各个周期函数。这跟react所说的生命周期完全相反。这是为什么？

Answer 1

class Test extends Component{&nbsp; &nbsp; componentWillMount(){&nbsp; &nbsp; &nbsp; &nbsp; console.log('子组件将要挂载')&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; return(<p>{this.props.index}</p>)&nbsp; &nbsp; }}export default class TestPanel extends Component{&nbsp; &nbsp; componentDidMount(){&nbsp; &nbsp; &nbsp; &nbsp; console.log('父组件挂载完毕');&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Test index={1}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Test index={2}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Test index={3}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}根据你的描述，我自己写了个小demo，顺序是正确的，父组件引入了子组件，子组件先执行，最后父组件执行，即是如下：3*子组件将要挂载父组件挂载完毕

Answer 2

Text 组件在TestPanel组件的 render 中，当 TestPanel 调用 render 时 Text的所有生命周期都会重新来一遍,包括 constructor 方法。我怀疑你说的是 class Text extends TestPanel的这种形式.