React系列——React主要內容簡介

React主要有四個主要內容構成，下面分別來介紹一下：

第1章 

一、Virtual DOM

1.一、虛擬DOM是React的基石。

之因此引入虛擬DOM，一方面是性能的考慮。Web應用和網站不一樣，一個Web應用 中一般會在單頁內有大量的DOM操做，而這些DOM操做很慢。

在React中，應用程序在虛擬DOM上操做，這讓React有了優化的機會。簡單說， React在每次須要渲染時，會先比較當前DOM內容和待渲染內容的差別， 而後再決定如何最優地更新DOM。這個過程被稱爲reconciliation。

除了性能的考慮，React引入虛擬DOM更重要的意義是提供了一種一致的開發方 式來開發服務端應用、Web應用和手機端應用：

由於有了虛擬DOM這一層，因此經過配備不一樣的渲染器，就能夠將虛擬DOM的內容 渲染到不一樣的平臺。而應用開發者，使用JavaScript就能夠通吃各個平臺了。

至關棒的思路！

1.2 、Virtual DOM速度快的說明

在Web開發中，咱們總須要將變化的數據實時反應到UI上，這時就須要對DOM進行操做。而複雜或頻繁的DOM操做一般是性能瓶頸產生的緣由（如何 進行高性能的複雜DOM操做一般是衡量一個前端開發人員技能的重要指標）。React爲此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React都會從新構建整個DOM樹，而後React將當前 整個DOM樹和上一次的DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。並且React可以批處理虛擬 DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併，例如你連續的先將節點內容從A變成B，而後又從B變成A，React會認爲UI不發生任何變化，而若是經過手動控 制，這種邏輯一般是極其複雜的。儘管每一次都須要構造完整的虛擬DOM樹，可是由於虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是 Diff部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只須要 關心在任意一個數據狀態下，整個界面是如何Render的。

http://blog.csdn.net/yczz/article/details/49585313

二、React組件

2.1 、組件化概念

虛擬DOM(virtual-dom)不只帶來了簡單的UI開發邏輯，同時也帶來了組件化開發的思想，所謂組件，即封裝起來的具備獨立功能的UI部 件。React推薦以組件的方式去從新思考UI構成，將UI上每個功能相對獨立的模塊定義成組件，而後將小的組件經過組合或者嵌套的方式構成大的組件， 最終完成總體UI的構建。例如，Facebook的instagram.com整站都採用了React來開發，整個頁面就是一個大的組件，其中包含了嵌套 的大量其它組件，你們有興趣能夠看下它背後的代碼。

若是說MVC的思想讓你作到視圖-數據-控制器的分離，那麼組件化的思考方式則是帶來了UI功能模塊之間的分離。咱們經過一個典型的Blog評論界面來看MVC和組件化開發思路的區別。

對於MVC開發模式來講，開發者將三者定義成不一樣的類，實現了表現，數據，控制的分離。開發者更多的是從技術的角度來對UI進行拆分，實現鬆耦合。

對於React而言，則徹底是一個新的思路，開發者從功能的角度出發，將UI分紅不一樣的組件，每一個組件都獨立封裝。

在React中，你按照界面模塊天然劃分的方式來組織和編寫你的代碼，對於評論界面而言，整個UI是一個經過小組件構成的大組件，每一個組件只關心本身部分的邏輯，彼此獨立。

 

2.二、組件特性

React認爲一個組件應該具備以下特徵：

（1）可組合（Composeable）：一個組件易於和其它組件一塊兒使用，或者嵌套在另外一個組件內部。若是一個組件內部建立了另外一個組件，那麼說父組件擁有（own）它建立的子組件，經過這個特性，一個複雜的UI能夠拆分紅多個簡單的UI組件；

（2）可重用（Reusable）：每一個組件都是具備獨立功能的，它能夠被使用在多個UI場景；

（3）可維護（Maintainable）：每一個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

（4）可測試（Testable）：由於每一個組件都是獨立的，那麼對於各個組件分別測試顯然要比對於整個UI進行測試容易的多。

 

2.三、組件定義（這部分直接看英文官網首頁）

在React中定義一個組件也是至關的容易，組件就是一個 實現預約義接口的JavaScript類：

1、 組件渲染

ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。

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

而這個方法， 必須並且只能返回一個有效的React元素。這意味着，若是你的組件是由多個元素構成的，那麼你必須在外邊包一個頂層 元素，而後返回這個頂層元素。

好比咱們建立一個佈局組件：

render:function(){
    return React.createElement(
        "div",null,
        React.createElement("div",null,"header"),
        React.createElement("div",null,"content"),
        React.createElement("div",null,"footer")
    );
}

 

2、ES5方式定義組件

"use strict";
 
var HelloMessage = React.createClass({
  displayName: "HelloMessage",
 
  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
});
 
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

3、Jsx中定義組件

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
 
ReactDOM.render(<HelloMessage name="John" />, mountNode);

4、ES6中定義組件

import './Hello.css';
 import './Hello.scss';
 
 import React, {Component} from 'react';
 
 // 內聯樣式
 let style={
     backgroundColor:'blue'
 }
 
 export default class Hello extends Component {
     constructor(props) {
         super(props);
         this.state = { count: 'es6'};
     }
     render() {
         return (
             <div>
                 <h1 style={style}>Hello world{this.state.count}</h1>
                 <br/>
                 <image/>
             </div>
         )
     }
 }

 

5、注意事項

（1）你的React組件名稱的首字母應當大寫，關於大小寫的差別你會在後面發現。

（2）你應該會注意到div元素的樣式類是用 className而不是class聲明的，這是由於class 是JavaScript的保留字，渲染後，真實的DOM還會是：

<div>Hello, React!</div>

 

三、Jsx語法

3.一、什麼是jsx

在用React寫組件的時候，一般會用到JSX語法，粗看上去，像是在Javascript代碼裏直接寫起了XML標籤，實質上這只是一個語法糖，每個 XML標籤都會被JSX轉換工具轉換成純Javascript代碼，固然你想直接使用純Javascript代碼寫也是能夠的，只是利用JSX，組件的結 構和組件之間的關係看上去更加清晰

3.二、 Jsx語法使用

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它容許 HTML 與 JavaScript 的混寫。

var names = ['Alice', 'Emily', 'Kate'];
 
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

上面代碼體現了 JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代碼的arr變量是一個數組，結果 JSX 會把它的全部成員，添加到模板，運行結果以下。

四、Data Flow（數據流）

4.一、 傳統的mvc

到了 Flux 當中, 除了名字改變了, 重要的是大量的 Model 歸到了 Store, View 也統一了,從而獲得了所謂單向的數據流, 就是 Model 和 View 之間關係很是清晰了。這樣須要人爲管理的狀態就一下少了不少, 結果體如今開發應用的效率當中:

4.二、 Flux

1、詳細學習地址：https://hulufei.gitbooks.io/react-tutorial/content/flux.html

二、React 標榜本身是 MVC 裏面 V 的部分，那麼 Flux 就至關於添加 M 和 C 的部分，Flux 是 Facebook 使用的一套前端應用的架構模式。

三、一個 Flux 應用主要包含四個部分：

（1）dispatcher 處理動做分發，維護 Store 之間的依賴關係

（2）stores  數據和邏輯部分

（3）views  React 組件，這一層能夠看做 controller-views，做爲視圖同時響應用戶交互

（4）actions  提供給 dispatcher 傳遞數據給 store

4、單向數據流

先來了解一下 Flux 的核心「單向數據流「怎麼運做的：

Action -> Dispatcher -> Store -> View

更多時候 View 會經過用戶交互觸發 Action，因此一個簡單完整的數據流相似這樣：

整個流程以下：

·        首先要有 action，經過定義一些 action creator 方法根據須要建立 Action 提供給 dispatcher

·           View 層經過用戶交互（好比 onClick）會觸發 Action

·           Dispatcher 會分發觸發的 Action 給全部註冊的 Store 的回調函數

·           Store 回調函數根據接收的 Action 更新自身數據以後會觸發一個 change 事件通知 View 數據更改了

·           View 會監聽這個 change 事件，拿到對應的新數據並調用 setState 更新組件 UI

全部的狀態都由 Store 來維護，經過 Action 傳遞數據，構成了如上所述的單向數據流循環，因此應用中的各部分分工就至關明確，高度解耦了。

這種單向數據流使得整個系統都是透明可預測的。

4.三、Redux

Redux官方中文文檔：http://camsong.github.io/redux-in-chinese/index.html

4.四、其餘

Reflux：https://segmentfault.com/a/1190000002793786?utm_source=tuicool

 

免責說明

一、本博客中的文章摘自網上的衆多博客，僅做爲本身知識的補充和整理，並分享給其餘須要的coder，不會用於商用。

二、由於不少博客的地址看完沒有及時作保存，因此不少不會在這裏標明出處，很是感謝各位大牛的分享，也但願你們理解。