React.js入門必須知道的那些事

首先，React.js是facebook在2013年5月開源的一個前端框架，React不是一個MVC框架，它是構建易於可重複調用的web組件，側重於UI, 也就是view層， React爲了更高超的性能而使用虛擬DOM做爲其不一樣的實現。 它同時也能夠由服務端Node.js渲染 － 而不須要太重的瀏覽器DOM支持， React實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。因其新穎獨特， 目前在國內尚未不少的應用。可是其性能出衆，代碼邏輯簡單，近來愈來愈火。目前尚未比較好的完整教程能夠學習，一方面是由於剛開始走紅，你們都沒有經驗，另外一方面是由於React自己還在不斷變更，API還在調整，至今尚未發佈1.0的版本。

react的官網：https://facebook.github.io/react/

react中文網更新速度比較慢，建議仍是看英文官網來學。起步仍是比較容易的，語法也比較好理解。可是，這裏面也有一些地方須要特別注意的。

1、本地文件直接引入，會報跨域請求錯誤

 

其實，react官網也有說明的：

官網上解釋說Chrome等瀏覽器直接引入本地文件是須要在服務器上運行的。

這樣的話，解決方法有兩個:

①用webstorm編輯器打開，由於webstorm原本打開html文件就是在服務器環境上運行的。

②安裝Tomcat。而後把項目放在Tomcat中的webapps目錄下，而後再bin目錄下找到startup.bat，啓動Tomcat。啓動成功以後，經過http://localhost:8080/+項目名稱/+具體目錄下的具體文件，便可訪問。

2、用react.js進行項目開發

一、最簡單的就是不用配置任何環境，直接引入相關的js文件，而後就能夠參照官網的例子去寫。這裏就不說了。

二、用gulp+browserify，在node的環境下，用require的語法進行模塊化的方式開發。這裏重點說一下具體的流程。

簡單瞭解gulp：

gulp是一個nodejs的streaming構建工具，所謂的streaming大體意思就是把構建流程想成一個個連接的管道（pipe），是一款基於任務的設計模式的自動化工具，經過插件的配合解決全套前端解決方案，如靜態頁面壓縮、圖片壓縮、JS合併、SASS同步編譯並壓縮CSS、服務器控制客戶端同步刷新。

簡單瞭解browserify：

browserify 命令運行時以一個 JavaScript 文件做爲輸入，經過分析文件中對於 require 方法的調用來遞歸查找所依賴的其餘模塊。把輸入文件所依賴的全部模塊文件打包成單個文件並輸出。如「browserify greet.js > bundle.js」把 greet.js 及其所依賴的模塊文件打包成單個 bundle.js 文件。

具體步驟：

①新建一個項目

②以管理員身份打開命令行，進入到項目目錄中。或者直接在項目目錄中打開git bash

③開始安裝環境：輸入npm init

④安裝gulp    輸入 npm install --save-dev gulp

備註：

若是輸入npm安裝插件比較慢的話，能夠用cnpm，cnpm是一個淘寶鏡像。

直接安裝cnpm clie

npm install -g cnpm

或者徹底不須要安裝也行

alias cnpm="npm --registry=http://registry.cnpmjs.org --cache=$HOME/.npm/.cache/cnpm"

# Or alias it in .bashrc or .zshrcecho '\n#alias for cnpm\nalias cnpm="npm --registry=http://registry.cnpmjs.org \
  --cache=$HOME/.npm/.cache/cnpm"' >> ~/.zshrc && source ~/.zshrc

具體能夠參考網址：http://blog.fens.me/nodejs-cnpm-npm/

 

⑤定義gulpfile文件

var gulp = require('gulp');

gulp.task('default',function(){

//將你的默認任務代碼放在這裏

});

⑥測試gulp是否安裝成功，輸入gulp（注意，必需要定義好gulpfile文件）

結果：

⑦以上成功了以後，繼續安裝browserify相關工具

輸入：npm install browserify --save

輸入：npm install reactify --save   //用於轉換的插件

輸入：npm install vinyl-source-stream --save

這個插件的做用就是把browserify生成的代碼打包成gulp能理解的代碼。由於browserify的一些輸出不能直接用在gulp上面，經過這個插件就能夠把browserify的輸出做爲gulp的輸入，經過pipe鏈接起來。

⑧安裝react相關模塊

npm install react --save

npm install react-dom --save

npm install react-addons --save

至此，須要安裝的東西都裝完了。

下面看看一個具體的代碼例子：

完整目錄截圖：

備註：

項目中的commentBox就是打包後的js文件，這個文件是一個包含了react.js框架代碼的文件，因此只須要引入一個文件就能夠。可是在實際開發中，這樣也存在一些問題：

一、暫時用不到的代碼也會被打包，這樣就致使體積大，首次加載的速度慢

二、只要一個文件模塊更新，整個文件緩存失敗

Broserify的解決方案：entry point，入口點技術。就是說每一個入口點打包一個文件，兩個入口點的相同移來模塊單獨打包爲common.js，但同時增長了依賴維護成本

這個後續再繼續深刻了解。

gulpfile文件相關配置及說明：

index.html

最終把組件們集合到一塊兒的commentBox.jsx

3、瀏覽器常見報錯

①：Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

解決方法：應該要把你要渲染的那個組件exports出來。

例如：

var React = require('react/addons');

var CommentBox = React.createClass({

  render: function() {

    return (

      <div className="commentBox">

        <h1>Comments</h1>

        <CommentList />

        <CommentForm />

      </div>

    );

  }

});

module.exports = CommentBox;

②Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.

解析：這個警告是由於這是舊的寫法，新版本已經不建議這樣寫。

解決方法：

var React = require('react');

var addons = require('react-addons');

使用addons的時候就 var classSet = addons.classSet;

更多詳細解釋請查看：https://www.npmjs.com/package/react-addons

4、react基礎知識（摘錄）

React主要的原理

Virtual DOM 虛擬DOM
傳統的web應用，操做DOM通常是直接更新操做的，可是咱們知道DOM更新一般是比較昂貴的。而React爲了儘量減小對DOM的操做，提供了一種不一樣的而又強大的方式來更新DOM，代替直接的DOM操做。就是Virtual DOM,一個輕量級的虛擬的DOM，就是React抽象出來的一個對象，描述dom應該什麼樣子的，應該如何呈現。經過這個Virtual DOM去更新真實的DOM，由這個Virtual DOM管理真實DOM的更新。

爲何經過這多一層的Virtual DOM操做就能更快呢？ 這是由於React有個diff算法，更新Virtual DOM並不保證立刻影響真實的DOM，React會等到事件循環結束，而後利用這個diff算法，經過當前新的dom表述與以前的做比較，計算出最小的步驟更新真實的DOM。

virtual DOM

Components 組件
在DOM樹上的節點被稱爲元素，在這裏則不一樣，Virtual DOM上稱爲commponent。Virtual DOM的節點就是一個完整抽象的組件，它是由commponents組成。

component 的使用在 React 裏極爲重要, 由於 components 的存在讓計算 DOM diff 更高效。

State 和 Render
React是如何呈現真實的DOM，如何渲染組件，何時渲染，怎麼同步更新的，這就須要簡單瞭解下State和Render了。state屬性包含定義組件所須要的一些數據，當數據發生變化時，將會調用Render重現渲染，這裏只能經過提供的setState方法更新數據。

應用狀況

國外應用的較多，facebook、Yahoo、Reddit等。在github能夠看到一個列表Sites-Using-React，國內的話，查了查，貌似比較少，目前知道的有一個杭州大搜車。大多技術要在國內應用起來通常是較慢的，不過React確實感受比較特殊，特別是UI的組件化和Virtual DOM的思想，我我的比較看好，有興趣繼續研究研究。

比較分析

和其餘一些js框架相比，React怎樣，好比Backbone、Angular等。

• React不是一個MVC框架，它是構建易於可重複調用的web組件，側重於UI, 也就是view層
• 其次React是單向的從數據到視圖的渲染，非雙向數據綁定
• 不直接操做DOM對象，而是經過虛擬DOM經過diff算法以最小的步驟做用到真實的DOM上。
• 不便於直接操做DOM，大多數時間只是對 virtual DOM 進行編程