React 父子组建生命周期

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