bsp 過程 hold 初始化 create event method 區別 eth

一、定義 組件就像JavaScript的函數。組件可以接收任意輸入(稱為"props")， 並返回 React 元素，用以描述屏幕顯示內容。 二、組件的分類 1、函數式組件（無狀態組件） 它是為了創建純展示組件，這種組件只負責根據傳入的props來展示，不涉及到要state狀態的操作。在大部分React代碼中，大多數組件被寫成無狀態的組件，通過簡單組合可以構建成其他的組件等；這種通過多個簡單然後合並成一個大應用的設計模式被提倡。

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
}

特點： --組件不會被實例化，整體渲染性能得到提升。因為組件被精簡成一個render方法的函數來實現的，由於是無狀態組件，所以無狀態組件就不會在有組件實例化的過程，無實例化過程也就不需要分配多余的內存，從而性能得到一定的提升。 --組件不能訪問this對象。無狀態組件由於沒有實例化過程，所以無法訪問組件this中的對象 --組件無法訪問生命周期的方法。因為無狀態組件是不需要組件生命周期管理和狀態管理，所以底層實現這種形式的組件時是不會實現組件的生命周期方法。 --無狀態組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用 2、React.createClass

var InputControlES5 = React.createClass({
    propTypes: {//定義傳入props中的屬性各種類型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //組件默認的props對象
        initialValue: ‘‘
    },
    // 設置 initial state
    getInitialState: function() {//組件相關的狀態對象
        return
 
 {
            text: this.props.initialValue || ‘placeholder‘
        };
    },
    handleChange: function(event) {
        this.setState({ //this represents react component instance
            text: event.target.value
        });
    },
    render: function() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ‘‘
};

特點：與無狀態組件相比，React.createClass和後面要描述的React.Component都是創建有狀態的組件，這些組件是要被實例化的，並且可以訪問組件的生命周期方法。但是隨著React的發展，React.createClass形式自身的問題暴露出來：React.createClass會自綁定函數方法（不像React.Component只綁定需要關心的函數）導致不必要的性能開銷，增加代碼過時的可能性。 3、React.Component React.Component是以ES6的形式來創建react的組件的，是React目前極為推薦的創建有狀態組件的方式，最終會取代React.createClass形式；相對於 React.createClass可以更好實現代碼復用。

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 設置 initial state
        this.state = {
            text: props.initialValue || ‘placeholder‘
        };

        // ES6 類中函數必須手動綁定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
              value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ‘‘
};

三、React.createClass與React.Component區別 1、React.createClass創建的組件，其每一個成員函數的this都有React自動綁定，任何時候使用，直接使用this.method即可，函數中的this會被正確設置。 React.Component創建的組件，其成員函數不會自動綁定this，需要開發者手動綁定，否則this不能獲取當前組件實例對象。 2、React.createClass在創建組件時，有關組件props的屬性類型及組件默認的屬性會作為組件實例的屬性來配置，其中defaultProps是使用getDefaultProps的方法來獲取默認組件屬性的。React.Component在創建組件時配置這兩個對應信息時，他們是作為組件類的屬性，不是組件實例的屬性，也就是所謂的類的靜態屬性來配置的。

const TodoItem = React.createClass({
    propTypes: { // as an object
        name: React.PropTypes.string
    },
    getDefaultProps(){  // return a object
        return {
            name: ‘‘    
        }
    }
    render(){
        return <div></div>
    }
})

class TodoItem extends React.Component {
    static propTypes = {//類的靜態屬性
        name: React.PropTypes.string
    };

    static defaultProps = {//類的靜態屬性
        name: ‘‘
    };

    ...
}

3、React.createClass創建的組件，其狀態state是通過getInitialState方法來配置組件相關的狀態； React.Component創建的組件，其狀態state是在constructor中像初始化組件屬性一樣聲明的。

const TodoItem = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }
    render(){
        return <div></div>
    }
}

四、如何選擇 1、只要有可能，盡量使用無狀態組件創建形式。 2、否則（如需要state、生命周期方法等），使用`React.Component`這種es6形式創建組件

React學習—組件