React 父子组建生命周期

React 和 ReactNative 是亲兄弟，都是 facebook的儿子，只不过ReactNative拥有自己的一套标签库，因此他们的生命周期一样，要讲React的生命周期的话，网上一搜一大堆，很多比我写得还好。

---

我先附上React 生命周期的图，然后再进入主题。

---

我今天要讲的是 React 父子组建组合的时候，React 生命周期的变化。事实上我们做 React / React Native 开发时，免不了会使用多个组件组合使用。例如下面这段代码。

class App extends Component {    render() {        return (            <View>                <Button>login</Button>            </View>        );    }}class Button extends Component {    render() {        return (            <TouchableOpacity>                {this.props.children}            </TouchableOpacity>        );    }}

根据上面的 React 生命周期图来看，一个 React 正常的执行顺序会是

现在我是父组建和子组件进行整合，他的执行顺序会是怎样呢？
这里大家可以先思考下。

---

我写了代入如下来验证结果

//根组件class RootContainer extends Component {    constructor(props) {        super(props);        console.log('RootContainer constructor');    }    componentWillMount() {        console.log('RootContainer componentWillMount');    }    render() {        console.log('RootContainer render');        return (            <div className="root">                <h3>This is RootContainer</h3>                <ChildView/>            </div>        );    }    componentDidMount() {        console.log('RootContainer componentDidMount');    }    componentWillUnmount() {        console.log('RootContainer componentWillUnmount');    }    componentWillReceiveProps(nextProps) {        console.log('RootContainer componentWillReceiveProps(nextProps)');    }    componentWillUpdate(nextProps, nextState) {        console.log('RootContainer componentWillUpdate(nextProps, nextState)');    }    shouldComponentUpdate(nextProps, nextState) {        console.log('RootContainer shouldComponentUpdate(nextProps, nextState)');        return true;    }    componentDidUpdate(prevProps, prevState) {        console.log('RootContainer componentDidUpdate(prevProps, prevState)');    }}//子组件class ChildView extends Component {    constructor(props) {        super(props);        console.log('ChildView constructor');    }    componentWillMount() {        console.log('ChildView componentWillMount');    }    render() {        console.log('ChildView render');        return (            <div className="child">                <h4>I am a Child</h4>            </div>        );    }    componentDidMount() {        console.log('ChildView componentDidMount');    }    componentWillUnmount() {        console.log('ChildView componentWillUnmount');    }    componentWillReceiveProps(nextProps) {        console.log('ChildView componentWillReceiveProps(nextProps)');    }    shouldComponentUpdate(nextProps, nextState) {        console.log('ChildView shouldComponentUpdate(nextProps, nextState)');        return true;    }    componentWillUpdate(nextProps, nextState) {        console.log('ChildView componentWillUpdate(nextProps, nextState)');    }    componentDidUpdate(prevProps, prevState) {        console.log('ChildView componetDidUpdate(prevProps, prevState)');    }}

运行之后，控制台输出语句如下

RootContainer constructor
RootContainer componentWillMount
RootContainer render
— ChildView constructor
— ChildView componentWillMount
— ChildView render
— ChildView componentDidMount
RootContainer componentDidMount

此时可以分析出，当父组建 render 时遇到子组件，然后进入子组件的生命周期，当执行完子组件生命周期中的componentDidMount 时会回到父组建继续执行父组建未完成的生命周期。

---

更深级别的层级效果也是如此

RootContainer constructor
RootContainer componentWillMount
RootContainer render
— ChildView constructor
— ChildView componentWillMount
— ChildView render
—— Grandson constructor
—— Grandson componentWillMount
—— Grandson render
—— Grandson componentDidMount
— ChildView componentDidMount
RootContainer componentDidMount