1. 程式人生 > >React學習—組件

React學習—組件

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學習—組件