React入門 (1)—使用指南（包括ES5和ES6對比）

時間 2019-11-08

標籤 react 入門使用指南包括 es5 es6 對比欄目 React 简体版

原文原文鏈接

前言

　　本篇會簡明扼要的介紹一下React的使用方法。代碼會用JSX+ES5和JSX+ES6兩種方式實現。　　javascript

React簡介　　

　　React來自Facebook，於2013年開源。至今不斷修改完善，如今已經到達了版本0.14.2。能夠注意到版本尚未到1.0, 廣泛應用到大部分產品中還須要必定的時間。2015年3月份，FaceBook發佈了React Native，一個用react來構建native app的框架。
　　步入正題，React是一個javascript的類庫，用於構建用戶界面。php

三個特色

JUST THE UI
　　不一樣於Angularjs框架，React不屬於MVC框架，它能夠算是MVC裏面的V層，因此相對來講入門也簡單一下（只指入門，深度研究的話也不簡單）。css
VIRTUAL DOM——虛擬DOM
　　虛擬dom實際上是輕量的js對象，只保留了原生dom的一些經常使用的屬性和方法。
- 自定義標籤
  　　學習React須要有一種全新的思路去看待view層的構建。除了使用html原生的標籤，開發者還能夠自定義標籤（即虛擬DOM，最終給瀏覽器渲染的時候會解析成原生dom），天然代碼解耦的效果會很明顯，也更易讀。
- 性能提高
  　　在你們優化代碼性能的時候，必定會關注有沒有多餘的dom操做，這是由於dom相關的操做耗時比較長。就算是建立一個空標籤，也許要初始化它的各類默認屬性和事件。
  　　React渲染頁面並不直接操做dom，而是先經過diff算法比較先後虛擬dom的差別。這最大程度的簡化dom操做，大大提升了性能。因爲只是局部更新dom，因此只是局部刷新。
  　　換而言之，虛擬dom的出現，是由於目前js的性能比DOM渲染的性能要好，因此能夠用更多的js操做換取更少的dom操做。也不排除若是未來有一天dom的性能和js差很少的時候，虛擬dom也許就沒那麼大的意義了。
DATA FLOW
React是單向響應的數據流。html

React相關知識簡介

jsx

　　一種特殊的js語法，能夠在js代碼中直接使用html標籤。是個語法糖，提升編寫代碼效率。
　　要注意不能在標籤的中間添加註釋，由於最終仍是要翻譯成原生js，標籤中添加註釋至關於在一行代碼還沒完的時候就添加註釋。
　　在jsx中，變量用花括號包圍起來，花括號內的語句將以js代碼的方式解析。
　　例如：java

// 用純js在react中建立a標籤
var newDom=<React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!');

// 用jsx在react中建立a標籤
var newDom=<a href="https://facebook.github.io/react/">Hello!</a>;

　　要讓瀏覽器認識這種新的語法，就須要下面介紹的babel了。react

babel

　　　是一個javascript代碼轉換器，在這裏咱們能夠用於jsx轉換爲原生js，es6轉換爲es5(大部分都能轉換)。固然它的功能不僅這些，有興趣的能夠去babel官網看看。它還有個線上的轉換器，代碼比較簡單的時候用這個排查問題或練習es6很方便。
　　介紹兩種經常使用的使用方式：webpack

一種是瀏覽器來編譯，由於實時編譯會很慢，因此適合代碼量比較小的。只需在html中引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

一種是本地使用。經過npm安裝，在webpack中配置：

//在webpack.config.js文件中配置
module.exports = {
    module: {
        loaders: [{
        test: /\.jsx?$/,
        loader: 'babel'
        }]
    }
}

　　能夠在本地編譯好代碼後，再將編譯後的代碼給html引用，提升性能，適合大項目。git

webpack

　　一個模塊打包工具，它把不一樣的、相互依賴的靜態資源都視做模塊，而且打包成咱們想要的靜態資源。
　　另外能夠方便的配置多種預處理器，如babel。
　　使用webpack，讓代碼組織更清晰，一個文件就是一個模塊。es6

ES6

　　ES6，也叫ECMAScript2015（如下統稱ES6），是ECMAScript標準的最新版本。詳細可見ES6的特性簡述（譯+部分解析）github

搭建簡單的運行環境

方式一：直接引入react、reactdom、babel的庫。
　　由於這種方式是瀏覽器負責即時編譯的，因此可想而知項目大了得時候解析速度會很慢，不建議使用。可是咱們只是學習react語法嘛，固然要搭的環境越簡單越好。
　　這種方式就是官網給出的實例所使用的方式。注意寫jsx的的js塊的type="text/babel",這樣才能被瀏覽器識別並用babel編譯。
　　如下是本章要用到的代碼框架(一個helloword的demo) :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
  </head>
  <body>
    <div id='example'></div>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
    <script type="text/babel">
      // react代碼寫到這裏
      ReactDOM.render(<h1>hello word!</h1>,document.getElementById('example'));
    </script>
  </body>
</html>

方式二：使用npm + webpack
　　篇幅限制，下篇說，歡迎看第二篇。

學會react的基本語法

　　通常從定義到使用組件的流程是：定義組件creatClass,實現render方法->將組件渲染到頁面ReactDOM.render()。

建立ReactElement

　　ReactElement對象能夠當作是虛擬DOM樹。它既是渲染組件ReactDOM.render(root,container)的第一個參數，又是建立組件React.createClass中render方法的返回值。記住ReactElement是惟一父節點的’dom樹‘就好。

react原生實現

React.createElement(
  string/ReactClass type, //type組件類型能夠是內置的標籤，如div；也能夠是由React.createClass(object specification)建立的虛擬組件
  [object props], // 標籤屬性,數組
  [children ...],// 標籤的innerHtml
)//返回類型是ReactElement

var newDom=React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!');

jsx實現

<a href=''>Hello</a>

把組件渲染到瀏覽器中

　　react-dom模塊中的方法。
　　ReactDom.render(root, container); root爲ReactElement類型，表示root替換container中的元素。注意是替換不是追加，因此有些狀況父元素應該設置爲空。

react原生

var content=React.createElement('h1',{},'hello');
ReactDOM.render(content,document.getElementById('example'));

ReactDOM.render(<h1>hello word!</h1>,document.getElementById('example'));

建立組件

　　組件是一個自定義的js對象，在es5中使用React.createClass();在es6中必須繼承React.component。
　　其中有個特殊的render方法，返回ReactElement對象。該方法會在咱們使用JSX語法的標籤時被調用，所以咱們在渲染組件時第一個參數可使用自定義標籤或者createElement。
　　如：ReactDOM.render(<MyElement />,document.getElementById('example')) 　　　

var NewDom = React.createClass({//類名必定要大寫開頭
    render: function() {
        return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  //得到元素的子元素
                  console.info(this);
                  console.info('child:'+child);
                  return <li>{child}</li>;//變量用花括號標識
                })//由於有多個子元素，因此返回的是數組。按照JSX變量是數組來解析。
              }
            </ol>
       );
    }
});
ReactDOM.render(
    <NewDom>
        <span>lala</span>
        <span>ass</span>
    </NewDom>,
     document.getElementById('example')
);

class NewDom extends React.Component{
    render() {//開頭花括號必定要和小括號隔一個空格，不然識別不出來
        return <ol>//標籤開頭必定要和return一行
          {
             React.Children.map(this.props.children, function (child) {
                   return <li>{child}</li>;
             })
          }
        </ol>;
    }
} 
ReactDOM.render(
    <NewDom>
        <span>lala</span>
        <span>ass</span>
    </NewDom>,
     document.getElementById('example')
);

組件的屬性props

一個js對象，對應於dom的屬性。

原生屬性
某些html的屬性名由於正好是js得保留字，因此須要從新命名。
- class
  由於js中class爲保留字，因此要寫成className。
  <a className="center"></a>
- style
  style屬性接受由css屬性構成的js對象。對於jsx來講第一是變量，第二是對象，所以要兩個花括號，key值用駝峯命名法轉化了，value值用引號括起來
  <a style={{backgroundImage: 'url(' + imgUrl + ')',font:'12px'}}></a>
新增屬性
this.props.children 表示組件的全部子節點，上一小節的示範代碼中有介紹
傳遞屬性值
在ReactDOM.Render第一個參數中直接寫入帶屬性的標籤便可： <a newProp="propValue"></a> 。這樣就能夠在this.props['newProp']中讀取值
設置默認屬性
- 在ES6中爲屬性：defaultProps(能夠標識static定義在class內，也能夠定義在class外)
- 在ES5中爲方法：getDefaultProps: function(){return {name:value}};
屬性的讀取
this.props['propName']得到屬性
新增功能：屬性校驗器propTypes
見代碼示例
代碼示範
- es5

var NewDom = React.createClass({//類名必定要大寫開頭
    getDefaultProps: function() {//設置默認屬性
       return {title:'133'};
    },
    propTypes: {
       title:React.PropTypes.string,
    },//屬性校驗器，表示必須是string
    render: function() {
       return <div>{this.props.title}</div>;//變量用花括號標識
    }
});

class NewDom extends React.Component{
  //不能再組件定義的時候定義一個屬性
  render() {
      return <div >1{this.props.title}</div>;
  }//開頭花括號必定要和小括號隔一個空格，不然識別不出來
}
//es6 這兩個屬性不能寫在class內。
NewDom.propTypes={//屬性校驗器，表示改屬性必須是bool，不然報錯
  title: React.PropTypes.bool,
}
NewDom.defaultProps={title:'133'};//設置默認屬性

組件的狀態state

　　一個js對象，存儲着組件當前的狀態以及其值的集合。
　　我的以爲這也是react的創新點之一，能夠把組件當作一個「狀態機」. 根據不一樣的status有不一樣的UI展現。只要使用setState改變狀態值，根據diff算法算出來有差之後，就會執行ReactDom的render方法，從新渲染頁面。
　　這避免了開發者直接操做dom對象已達到從新渲染頁面。開發者只須要關注state這個中間人，控制它就能夠控制頁面刷新。第二篇中評論框的渲染就是使用的state來控制。
　　是否是感受和props有些相似？通常區分兩個的原則是，可變的放在state中，不可變的放在props中。　

初始化
es5

class *** extends React.Component{
  getInitialState: function() {
    return {liked: false};
  }
}

class *** extends React.Component{
   constructor(props) {
    super(props);
    this.state = {liked: false};
  }
}

修改值
es5和es6中使用方法相同。
this.setState(新的state對象);
讀取值
其實就是讀取一個js對象。

事件

事件名
和屬性名相似，到了react中，事件名也成了駝峯命名法，好比onclick變爲了onClick.
事件定義
必定要注意es6中元素如何使用自定義事件。見代碼。
- es5

var NewDom = React.createClass({//類名必定要大寫開頭
    btnClick:function(ele){
       console.info(ele);
       console.info(this.refs.tex);
    },
    render: function() {
       return <div >
          <input type="text" ref="tex" />
          <input type="button" onClick={this.btnClick} value='click me' />
       </div>;//變量用花括號標識
    }
});

class NewDom extends React.Component{
    btnClick(){
        console.info(this);//this爲該組件類
        console.info(this.refs.tex);//this.refs.tex爲組件裏面索引爲tex的
    }
    render() {
        return <div >
            <input type="text" ref="tex" />
            <input type="button" onClick={this.btnClick.bind(this)} value='click me' />
        </div>;//注意bind後面的this
    }
}

事件target
下面是一個事件對應要執行的函數的定義：

handleChange: function(event) {
    this.setState({value: event.target.value});//event.target.value元素的值
  }

每一個控件取值不同，value是指input控件，下拉框爲selected，radiobutton爲checked。a標籤是innerHtml。能夠本身經過console.info(e.target) 調試出本身想要的那個字段

ES6的坑

類名(組件名)必定要用大寫開頭，不然自定義的組件沒法編譯，識別不出來。
類中定義render函數要注意兩點，見代碼註釋。

render() {//開頭花括號必定要和小括號隔一個空格，不然識別不出來
   return <ol>//標籤前一半必定要和return一行
     {
        React.Children.map(this.props.children, function (child) {
           return <li>{child}</li>;
        })
      }
   </ol>;
}

在class中使用class的變量或者方法，必定要加個this。如this.handlerclick。
es6 綁定事件須要onClick={this.func1.bind(this)}。
這樣func1和bind裏面的參數‘this’的做用域才綁定到了一塊兒（注意es5是不須要這個bind(this)的），func1中若是有this.name這類語句，至關因而使用參數‘this’裏面的變量值;或者使用箭頭函數func1= (e)=> {函數體}

小結

　　通過這番簡單的練習後，若是還想看看作一個項目中如何使用react參見下章，一個模仿微博展現的demo（編寫ing）。　　本文沒有對react做深刻的研究。經過學習react的使用方法能夠看到，react入門的話相對於其餘框架仍是比較簡單的，代碼邏輯也很清晰，好維護也好使用。重要的是，須要使用者把從前直接對dom操做的思惟方式轉換過來，相信會愛上它的。　　ps: react 還在發展期，學習的話建議英語好的直接看官方文檔，能夠少走一些彎路。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。