react學習

react腳手架大集合

react4.0 官網
redux入門教程
react-native中文官網
react官方文檔
webpack實戰腳手架
bfd-ui企業級腳手架
rekit.js react腳手架
antd-react
antd-react mobile
里面有你想要的手腳架
react基礎入門
Ant-Tool 簡介
react-redux react-antd-mobile 四步走
antd mobile組件代碼及體驗
一段人人都應該知道的從vue到react的過渡史
react項目搭建
dva數據交互以及render去掉后處理案例
dva快速上手
react 視頻教程
react 視頻教程源碼
react中文索引
react awnsome資源整理
webpack打包優化
構建大型項目架構

CDN

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

目前網上沒有比較全的中文文檔，極客學院以及w3c react教程也停留在0.14，只有查看官方文檔，才能更好的學習react。

npm install create-react-app
create-react-app hello-world
cd hello-world
npm start
//在瀏覽器中輸入localhost:3000

react創建組件的三種方式：
1丶無狀態函數式組件

無狀態函數式組件形式是在.14版本才開始推出，為了展示純組件，這種組件只根據傳入的props值進行數據渲染，不涉及到state的組件類。官方指出：

在大部分react代碼中，大多數組件被寫成無狀態的組件，通過簡單組合可以構建成成其他的組件等，這種通過多個簡單的組件然后合并成一個大的應用的設計模式被提倡。

無狀態函數式組新形式上表現為一個只帶有一個render方法的組件類，通過函數形式或者es6 arrow function 的形式在創建，并且該組件是無state狀態的。具體參考形式如下：

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

無狀態組件的創建形式使代碼的可讀性更好，并且減少了大量冗余的代碼，精簡至只有一個render方法，大大的增強了編寫一個組件的便利，除此之外無狀態組件還有以下幾個顯著的特點：
<ol>
<li>組件不會被實例化，整體渲染性能得到提升
因為組件被精簡成一個render方法的函數來實現的，由于是無狀態組件，所以無狀態組件就不會在有組件實例化的過程，無實例化過程也就不需要分配多余的內存，從而性能得到一定的提升。</li>
<li>組件不能訪問this對象
無狀態組件由于沒有實例化過程，所以無法訪問組件this中的對象，例如：this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來創建組件</li>
<li>組件無法訪問生命周期的方法
因為無狀態組件是不需要組件生命周期管理和狀態管理，所以底層實現這種形式的組件時是不會實現組件的生命周期方法。所以無狀態組件是不能參與組件的各個生命周期管理的。</li>
<li>無狀態組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用</li></ol>
無狀態組件被鼓勵在大型項目中盡可能以簡單的寫法來分割原本龐大的組件，未來React也會這種面向無狀態組件在譬如無意義的檢查和內存分配領域進行一系列優化，所以只要有可能，盡量使用無狀態組件。

2丶React.createClass

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.createClass的mixins不夠自然、直觀；React.Component形式非常適合高階組件（Higher Order Components--HOC）,它以更直觀的形式展示了比mixins更強大的功能，并且HOC是純凈的JavaScript，不用擔心他們會被廢棄。HOC可以參考無狀態組件(Stateless Component) 與高階組件。

3丶React.Component
React.Component是以es6的形式來創建react的組件的，是react目前極為推薦的創建有狀態組件的方式，最終會取代React.createClass的方式，相對于React.createReact可以更好的實現代碼的復用，將上面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: ''
};

React.createClass 與 React.Component區別
根據上面展示代碼中二者定義組件的語法格式不同之外，二者還有很多重要的區別，下面就描述下二者的區別。

函數this自綁定

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

const Contacts = React.createClass({
  handleClick() {
    console.log(this);
  },
  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);  //構造函數中綁定
}

<div onClick={this.handleClick.bind(this)}></div> //使用bind來綁定

<div onClick={() => this.handleClick()}></div> //使用arrow function 來綁定

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

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

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

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

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

組件初始狀態state的配置不同

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

const TodoItem = React.createClass(){
  getInitialState(){
    return {
      isEditing:false
    }
  }
}

class TodoItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      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();
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    )
  }
})

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

如何選擇哪種方式創建組件

由于React團隊已經聲明React.createClass最終會被React.Component的類形式所取代，但是在找到Mixins替代方案之前是不會廢棄掉React.createClass形式。所以：

能用React.Component創建的組件的就盡量不用React.createClass形式創建組件

除此之外，創建組件的形式選擇還應該根據下面來決定：

1 丶只要有可能，盡量使用無狀態組件創建形式

2 丶否則(如需要state丶生命周期方法等)，使用React.Component這種形式創建
補充一點

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

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

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

具體參考文獻
react創建組件的三種模式
React 組件構造方法: ES5 (createClass) 還是 ES6 (class)？
React.createClass 對比 extends React.Component
應該如何選擇：React.createClass, ES6 Classes, 無狀態函數式組件
React中函數式聲明組件
React Mixin 的前世今生

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • React創建組件的三種方式及其區別 React推出后，出于不同的原因先后出現三種定義react組件的方式，殊途同...
    程序猿吳彥祖閱讀 270評論 0贊 0
  • 在介紹React渲染機制之間先來說一說下面幾個概念，對于新入手React的學員來說，經常會被搞蒙圈。 Rea...
    殊一ONLY閱讀 5,686評論 0贊 4
  • 官網地址https://facebook.github.io/react/docs/hello-world.htm...
    pixels閱讀 716評論 0贊 6
  • 原教程內容詳見精益 React 學習指南，這只是我在學習過程中的一些閱讀筆記，個人覺得該教程講解深入淺出，比目前大...
    leonaxiong閱讀 2,860評論 1贊 18
  • 安裝： 概述 React起源于FaceBook的內部項目,因為該公司對市場上所有的JavaScript MVC框架...
    姒沝無痕閱讀 738評論 0贊 0