React中類組件和函數式組件？

1. 函數式組件和類組件--初識

1.1 函數式定義的無狀態組件

定義組件的最簡單方法是編寫JavaScript函數

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

此函數是一個有效的React組件，由於它接受單個「props」（表明屬性）對象參數與​​數據並返回一個React元素。咱們稱這些組件爲「函數組件」，由於它們其實是JavaScript函數。

1.2 es6形式的extends React.Component定義的組件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

從React的角度來看，上述兩個組件是等效的。

以上內容來自於react官方文檔

1.3 es5原生方式React.createClass定義的組件

class Welcome extends React.CreatClass {
 render() {
   return <h1>Hello, {this.props.name}</h1>;
 }
}

2. React建立組件的三種方式及其區別

2.1 React建立組件的三種方式

• 純函數式定義的無狀態組件
• React.createClass 定義的組件
• Extends React.Component 定義的組件

2.2 純函數式(無狀態)組件的特色

無狀態組件式從React 0.14 版本開始的。爲了建立純展現組件，這種組件只負責根據傳入的props來展現，不涉及到要state狀態的操做。

其官方指出：在大部分React代碼中，大多數組件被寫成無狀態的組件，經過簡單組合能夠構建成其餘的組件等；這種經過多個簡單而後合併成一個大應用的設計模式被提倡。

目前Reart已發展到16.9,引入了Hook,推薦使用無狀態組件。

無狀態函數式組件形式上表現爲一個只帶有一個render方法的組件類，經過函數形式或者ES6 arrow function的形式在建立，而且該組件是無state狀態的。具體的建立形式以下：
第一個參數是 props，第二個是 context

function Welcome(props, context) {
  return <h1>Hello, {props.name}</h1>;
}
ReactDOM.render(<Welcome name="whongliang" />, mountNode)

無狀態組件的建立形式使代碼的可讀性更好，而且減小了大量冗餘的代碼，精簡至只有一個render方法，大大的加強了編寫一個組件的便利，除此以外無狀態組件還有如下幾個顯著的特色：

• 組件不會被實例化，總體渲染性能獲得提高

由於組件被精簡成一個render方法的函數來實現的，因爲是無狀態組件，因此無狀態組件就不會在有組件實例化的過程，無實例化過程也就不須要分配多餘的內存，從而性能獲得必定的提高。

• 組件不能訪問this對象

無狀態組件因爲沒有實例化過程，因此沒法訪問組件this中的對象，例如：this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來建立組件

• 組件沒法訪問生命週期的方法

由於無狀態組件是不須要組件生命週期管理和狀態管理，因此底層實現這種形式的組件時是不會實現組件的生命週期方法。因此無狀態組件是不能參與組件的各個生命週期管理的。

• 無狀態組件只能訪問輸入的props，一樣的props會獲得一樣的渲染結果，不會有反作用

無狀態組件被鼓勵在大型項目中儘量以簡單的寫法來分割本來龐大的組件，將來React也會這種面向無狀態組件在譬如無心義的檢查和內存分配領域進行一系列優化，因此只要有可能，儘可能使用無狀態組件。

補充

無狀態組件內部實際上是可使用ref功能的，雖然不能經過this.refs訪問到，可是能夠經過將ref內容保存到無狀態組件內部的一個本地變量中獲取到。

例以下面這段代碼可使用ref來獲取組件掛載到dom中後所指向的dom元素：

function TestComp(props){
    let ref;
    return (<div>
        <div ref={(node) => ref = node}>
            ...
        </div>
    </div>)
}

2.3 React.createClassd的特色

React.createClass是React剛開始推薦的建立組件的方式，這是ES5的原生的JavaScript來實現的React組件，其形式以下：

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都是建立有狀態的組件，這些組件是要被實例化的，而且能夠訪問組件的生命週期方法。可是隨着React的發展，React.createClass形式自身的問題暴露出來：

• React.createClass會自綁定函數方法（不像React.Component只綁定須要關心的函數）致使沒必要要的性能開銷，增長代碼過期的可能性。
• React.createClass的mixins不夠天然、直觀；React.Component形式很是適合高階組件（Higher Order Components--HOC）,它以更直觀的形式展現了比mixins更強大的功能，而且HOC是純淨的JavaScript，不用擔憂他們會被廢棄。HOC能夠參考無狀態組件(Stateless Component) 與高階組件。

2.3 React.createClassd的特色

React.Component是以ES6的形式來建立react的組件的，最終會取代React.createClass形式；相對於 React.createClass能夠更好實現代碼複用。將上面React.createClass的形式改成React.Component形式以下：

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: ''
};

2.3.1 React.createClass與React.Component區別

根據上面展現代碼中兩者定義組件的語法格式不一樣以外，兩者還有不少重要的區別，下面就描述一下兩者的主要區別。

函數this自綁定

React.createClass建立的組件，其每個成員函數的this都有React自動綁定，任什麼時候候使用，直接使用this.method便可，函數中的this會被正確設置。

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

React.Component建立的組件，其成員函數不會自動綁定this，須要開發者手動綁定，不然this不能獲取當前組件實例對象。

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // null
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }

固然，React.Component有三種手動綁定方法：能夠在構造函數中完成綁定，也能夠在調用時使用method.bind(this)來完成綁定，還可使用arrow function來綁定。拿上例的handleClick函數來講，其綁定能夠有：

//構造函數中綁定
constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
}
// 使用bind來綁定
<div onClick={this.handleClick.bind(this)}></div>
// 使用arrow function來綁定
<div onClick={()=>this.handleClick()}></div>

組件屬性類型propTypes及其默認props屬性defaultProps配置不一樣

eact.createClass在建立組件時，有關組件props的屬性類型及組件默認的屬性會做爲組件實例的屬性來配置，其中defaultProps是使用getDefaultProps的方法來獲取默認組件屬性的

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

React.Component在建立組件時配置這兩個對應信息時，他們是做爲組件類的屬性，不是組件實例的屬性，也就是所謂的類的靜態屬性來配置的。對應上面配置以下：

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

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

    ...
}

組件初始狀態state的配置不一樣

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>
    }
}

Mixins的支持不一樣

Mixins(混入)是面向對象編程OOP的一種實現，其做用是爲了複用共有的代碼，將共有的代碼經過抽取爲一個對象，而後經過Mixins進該對象來達到代碼複用。具體能夠參考React Mixin的前世此生。

React.createClass在建立組件時可使用mixins屬性，以數組的形式來混合類的集合。

var SomeMixin = {  
  doSomething() {

  }
};
const Contacts = React.createClass({  
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

可是遺憾的是React.Component這種形式並不支持Mixins，至今React團隊尚未給出一個該形式下的官方解決方案；可是React開發者社區提供一個全新的方式來取代Mixins,那就是Higher-Order Components，具體細節能夠參考這篇文章

3 總結

• react中有三種建立組件的形式
• 函數式組件能夠引入類組件，類組件中能夠引入函數式組件
• 純函數不會被實例化，不能訪問this，沒有生命週期
• 儘量的使用純函數拆分複雜型組件

4 參考文獻

• React 組件構造方法: ES5 (createClass) 仍是 ES6 (class)？
• React.createClass 對比 extends React.Component
• 應該如何選擇：React.createClass, ES6 Classes, 無狀態函數式組件
• React中函數式聲明組件
• React Mixin 的前世此生