摘要：前言的主要思想是通過(guò)構(gòu)建可復(fù)用組件來(lái)構(gòu)建頁(yè)面所謂組件其實(shí)就是有限狀態(tài)機(jī)通過(guò)狀態(tài)渲染對(duì)應(yīng)的界面且每個(gè)組件都有自己的生命周期它規(guī)定了組件的狀態(tài)和方法需要在哪個(gè)階段改變和執(zhí)行子組件子組件子組件子組件初探生命周期當(dāng)首次掛載組件時(shí)按順序執(zhí)行當(dāng)卸載組件

React的主要思想是通過(guò)構(gòu)建可復(fù)用組件來(lái)構(gòu)建頁(yè)面.
所謂組件,其實(shí)就是有限狀態(tài)機(jī)(FSM),通過(guò)狀態(tài)渲染對(duì)應(yīng)的界面,且每個(gè)組件都有自己的生命周期,
它規(guī)定了組件的狀態(tài)和方法需要在哪個(gè)階段改變和執(zhí)行.

class Collections extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 1
        }
    }
    add = () => {
        this.setState({
            a: this.state.a + 1
        });
    }
    componentWillMount() {
        console.log("componentWillMount");
    }
    componentDidMount() {
        console.log("componentDidMount");
        this.setState({
            a: 2
        });
    }
    componentWillUnMount() {
        console.log("componentWillUnMount");
    }
    render() {
        console.log("render");
        return (
            

                { this.state.a }
                
                btn
            
        );
    }
}

import React, { Component, PropTypes } from "react";

export default class Example extends Component {
    static propTypes = {
        a: PropTypes.number.isRequired
    };
    static defaultProps = {
        a: 0
    }; 
    constructor(props) {
        super(props);
        this.state = {
            b: 1
        };
    }
    add = () => {
        this.setState({
            b: this.state.b + 1
        });
    }
    componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        if (nextProps.a === 4) {
            this.setState({
                b: 1000
            });
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log(nextProps);
        console.log(nextState);
        if (nextState.b === 4) {
            return false;
        }
        return true;
    }
    componentWillMount() {
        console.log("子組件componentWillMount");
    }
    componentDidMount() {
        console.log("子組件componentDidMount");
    }
    render() {
        console.log("子組件render");
        return (
            

                
a:{ this.props.a }
                
b:{ this.state.b }
                子組件add
            
        );
    }
}

當(dāng)首次掛載組件時(shí),按順序執(zhí)行g(shù)etDefaultProps,getInitialState,componentWillMount,render,componentDidMount
當(dāng)卸載組件時(shí),執(zhí)行componentWillUnMount
當(dāng)再次渲染組件時(shí),組件接收到更新?tīng)顟B(tài),此時(shí)按順序執(zhí)行componentWillReceiveProps,shouldComponentUpdate,
componentWillUpdate,render和componentDidUpdate

createClass是創(chuàng)建自定義組件的入口方法,負(fù)責(zé)管理生命周期方法中的getDefaultProps.
該方法在整個(gè)生命周期中只執(zhí)行一次,這樣所有實(shí)例初始化的props將會(huì)被共享.
通過(guò)createClass創(chuàng)建自定義組件,利用原型繼承ReactClassComponent父類,
按順序合并minin,設(shè)置初始化defaultProps,返回構(gòu)造函數(shù).
當(dāng)使用ES6 classes編寫React組件時(shí),class MyComponent extends React.Component
其實(shí)就是調(diào)用內(nèi)部方法createClass創(chuàng)建組件.

var ReactClass = {
    // 創(chuàng)建自定義組件
    createClass: function(spec) {
        var Constructor = function(props, context, updater) {
            // /自動(dòng)綁定
            if (this._reactAutoBindPairs.length) {
                bindAutoBindMethods(this);
            }

            this.props = props;
            this.context = context;
            this.refs = emptyObject;
            this.updater = updater || ReactNoopUpdateQueue;
            this.state = null;
            // ReactClass沒(méi)有構(gòu)造函數(shù),通過(guò)getInitialState和componentWillMount來(lái)代替
            var initialState = this.getInitialState ? this.getInitialState() : null;
            this.state = initialState;
        };

        // 原型繼承父類
        Constructor.prototype = new ReactClassComponent();
        Constructor.prototype.constructor = constructor;
        Constructor.prototype._reactAutoBindPairs = [];

        // 合并mixin
        injectedMixins.forEach(
            minSpecIntoComponent.bind(null, Constructor)
        );

        minSpecIntoComponent(Constructor, spec);

        // 所有mixin合并后初始化defaultProps(在整個(gè)生命周期中,getDefaultProps只執(zhí)行一次)
        if (Constructor.getDefaultProps) {
            Constructor.defaultProps = Constructor.getDefaultProps();
        }
        // 減少查找并設(shè)置原型的時(shí)間
        for (var methodName in ReactClassInterface) {
            if (!Constructor.prototype[methodName]) {
                Constructor.prototype[methodName] = null;
            }
        }

        return Constructor;
    }
};

mountComponent負(fù)責(zé)管理生命周期中的getInitialState,componentWillMount,render和componentDidMount
由于getDefaultProps是通過(guò)構(gòu)造函數(shù)進(jìn)行管理的,所以也是整個(gè)生命周期中最先開(kāi)始執(zhí)行的.
react是利用更新隊(duì)列this._pendingStateQueue以及更新?tīng)顟B(tài)this._pendingReplaceState
和this._pendingForceUpdate來(lái)實(shí)現(xiàn)setState的異步更新機(jī)制.
其實(shí),mountComponent本質(zhì)上是通過(guò)遞歸渲染內(nèi)容的,由于遞歸的特性,父組件的componentWillMount
在其子組件的componentWillMount之前調(diào)用,而父組件的componentDidMount在其子組件的componentDidMount之后調(diào)用.

updateComponent負(fù)責(zé)管理生命周期中的componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,
render和componentDidUpdate.
若存在componentWillReceiveProps,則執(zhí)行.
如果此時(shí)在componentWillReceiveProps中調(diào)用setState,是不會(huì)觸發(fā)re-render的,而是會(huì)進(jìn)行state合并.
且在componentWillReceiveProps,shouldComponentUpdate和componentWillUpdate中也還是無(wú)法獲取到更新后的this.state,
即此時(shí)訪問(wèn)的this.state仍然是未更新的數(shù)據(jù),因此只有render和componentDidUpdate中才能獲取到更新后的this.state

componentWillReceiveProps(nextProps) {
    console.log(nextProps);
    if (nextProps.a === 4) {
        this.setState({
            b: 1000
        }, () => {
            console.log(this.state.b);
        });
    }
}

unmountComponnet負(fù)責(zé)管理生命周期中的componentWillUnMount
如果存在componentWillUnMount,則執(zhí)行并重置所有相關(guān)參數(shù),更新隊(duì)列以及更新?tīng)顟B(tài),
如果此時(shí)在componentWillUpdate中調(diào)用setState,是不會(huì)觸發(fā)re-render的,這是因?yàn)?br>所有更新隊(duì)列和更新?tīng)顟B(tài)都被重置為null,并清除了公共類,完成了組件卸載操作.

無(wú)狀態(tài)組件只是一個(gè)render方法,并沒(méi)有組件類的實(shí)例化過(guò)程,也沒(méi)有實(shí)例返回.
無(wú)狀態(tài)組件沒(méi)有狀態(tài),沒(méi)有生命周期,只是簡(jiǎn)單的接受props渲染生成DOM結(jié)構(gòu),
是一個(gè)純粹為渲染而生的組件.
由于無(wú)狀態(tài)組件有簡(jiǎn)單,便捷,高效等諸多優(yōu)點(diǎn),所以如果可能的話請(qǐng)盡量使用無(wú)狀態(tài)組件.

import React from "react";

const HelloWorld = (props) => {
    return (
        
{ props.a }
    );
}

export default HelloWorld;