摘要：介紹是內(nèi)部的一個(gè)類庫并開源，可用于創(chuàng)建用戶交互界面。主要有四個(gè)主要概念構(gòu)成，下面分別來簡(jiǎn)單介紹一下之所以引入虛擬，一方面是性能的考慮。允許直接在模板插入變量。這種單向數(shù)據(jù)流使得整個(gè)系統(tǒng)都是透明可預(yù)測(cè)的。

React是Facrbook內(nèi)部的一個(gè)JavaScript類庫并開源，可用于創(chuàng)建Web用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。那些需要手動(dòng)更新DOM、費(fèi)力地記錄每一個(gè)狀態(tài)的日子一去不復(fù)返。React使用很新穎的方式解決了這些問題。你只需要聲明地定義各個(gè)時(shí)間點(diǎn)的用戶界面，而無序關(guān)系在數(shù)據(jù)變化時(shí)，需要更新哪一部分DOM。在任何時(shí)間點(diǎn)，React都能以最小的DOM修改來更新整個(gè)應(yīng)用程序。

React主要有四個(gè)主要概念構(gòu)成，下面分別來簡(jiǎn)單介紹一下

之所以引入虛擬DOM，一方面是性能的考慮。Web應(yīng)用和網(wǎng)站不同，一個(gè)Web應(yīng)用 中通常會(huì)在單頁內(nèi)有大量的DOM操作，而這些DOM操作很慢

在React中，應(yīng)用程序在虛擬DOM上操作，這讓React有了優(yōu)化的機(jī)會(huì)。簡(jiǎn)單說， React在每次需要渲染時(shí)，會(huì)先比較當(dāng)前DOM內(nèi)容和待渲染內(nèi)容的差異， 然后再?zèng)Q定如何最優(yōu)地更新DOM

除了性能的考慮，React引入虛擬DOM更重要的意義是提供了一種一致的開發(fā)方式來開發(fā)服務(wù)端應(yīng)用、Web應(yīng)用和手機(jī)端應(yīng)用

因?yàn)橛辛颂摂MDOM這一層，所以通過配備不同的渲染器，就可以將虛擬DOM的內(nèi)容 渲染到不同的平臺(tái)。而應(yīng)用開發(fā)者，使用JavaScript就可以通吃各個(gè)平臺(tái)了。相當(dāng)棒的思路！且虛擬DOM是內(nèi)存數(shù)據(jù)，性能是極高的，而對(duì)實(shí)際DOM進(jìn)行操作的僅僅是 Diff部分，因而能達(dá)到提高性能的目的

對(duì)于React而言，則完全是一個(gè)新的思路，開發(fā)者從功能的角度出發(fā)，將UI分成不同的組件，每個(gè)組件都獨(dú)立封裝。
在React中，你按照界面模塊自然劃分的方式來組織和編寫你的代碼，對(duì)于評(píng)論界面而言，整個(gè)UI是一個(gè)通過小組件構(gòu)成的大組件，每個(gè)組件只關(guān)心自己部分的邏輯，彼此獨(dú)立。

組件化開發(fā)特性:

React認(rèn)為一個(gè)組件應(yīng)該具有如下特征：

1.可組合（Composeable）：一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部。如果一個(gè)組件內(nèi)部創(chuàng)建了另一個(gè)組件，那么說父組件擁有（own）它創(chuàng)建的子組件，通過這個(gè)特性，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡(jiǎn)單的UI組件；

2.可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè)UI場(chǎng)景；

3.可維護(hù)（Maintainable）：每個(gè)小的組件僅僅包含自身的邏輯，更容易被理解和維護(hù)；

4.可測(cè)試（Testable）：因?yàn)槊總€(gè)組件都是獨(dú)立的，那么對(duì)于各個(gè)組件分別測(cè)試顯然要比對(duì)于整個(gè)UI進(jìn)行測(cè)試容易的多。

組件定義

在React中定義一個(gè)組件也是相當(dāng)?shù)娜菀?，組件就是一個(gè) 實(shí)現(xiàn)預(yù)定義接口的JavaScript類：

組件渲染

ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點(diǎn)。

ReactDOM.render(
  
Hello, world!
,
  document.getElementById("example")
);

而這個(gè)方法， 必須而且只能返回一個(gè)有效的React元素。這意味著，如果你的組件是由多個(gè)元素構(gòu)成的，那么你必須在外邊包一個(gè)頂層 元素，然后返回這個(gè)頂層元素。比如我們創(chuàng)建一個(gè)布局組件：

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

ES5方式定義組件

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

ES6方式定義組件

import "./Hello.css";
import "./Hello.scss";
import React, {Component} from "react";
// 內(nèi)聯(lián)樣式
let style={
    backgroundColor:"blue"
}
export default class Hello extends Component {
    constructor(props) {
        super(props);
        this.state = { count: "es6"};
    }
    render() {
        return (
            

                
Hello world{this.state.count}
                

                
            
        )
    }
}

JSX方式定義組件

var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});
ReactDOM.render(, mountNode);

什么是jsx

在用React寫組件的時(shí)候，通常會(huì)用到JSX語法，粗看上去，像是在Javascript代碼里直接寫起了XML標(biāo)簽，實(shí)質(zhì)上這只是一個(gè)語法糖，每一個(gè) XML標(biāo)簽都會(huì)被JSX轉(zhuǎn)換工具轉(zhuǎn)換成純Javascript代碼，當(dāng)然你想直接使用純Javascript代碼寫也是可以的，只是利用JSX，組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰

Jsx語法使用

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

var names = ["Alice", "Emily", "Kate"];
ReactDOM.render(
  

  {
    names.map(function (name) {
      return 
Hello, {name}!
    })
  }
  
,
  document.getElementById("example")
);

上面代碼體現(xiàn)了 JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。

JSX 允許直接在模板插入 JavaScript 變量。如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開這個(gè)數(shù)組的所有成員

var arr = [
  
Hello world!
,
  
React is awesome
,
];
ReactDOM.render(
  
{arr}
,
  document.getElementById("example")
);

上面代碼的arr變量是一個(gè)數(shù)組，結(jié)果 JSX 會(huì)把它的所有成員，添加到模板，運(yùn)行結(jié)果如下。

單向數(shù)據(jù)流

先來了解一下 Flux 的核心“單向數(shù)據(jù)流“怎么運(yùn)作的：
Action -> Dispatcher -> Store -> View
更多時(shí)候 View 會(huì)通過用戶交互觸發(fā) Action，所以一個(gè)簡(jiǎn)單完整的數(shù)據(jù)流類似這樣：

整個(gè)流程如下：

1.首先要有 action，通過定義一些 action creator 方法根據(jù)需要?jiǎng)?chuàng)建 Action 提供給 dispatcher
2.View 層通過用戶交互（比如 onClick）會(huì)觸發(fā) Action
3.Dispatcher 會(huì)分發(fā)觸發(fā)的 Action 給所有注冊(cè)的 Store 的回調(diào)函數(shù)
4.Store 回調(diào)函數(shù)根據(jù)接收的 Action 更新自身數(shù)據(jù)之后會(huì)觸發(fā)一個(gè) change 事件通知 View 數(shù)據(jù)更改了
5.View 會(huì)監(jiān)聽這個(gè) change 事件，拿到對(duì)應(yīng)的新數(shù)據(jù)并調(diào)用 setState 更新組件 UI
所有的狀態(tài)都由 Store 來維護(hù)，通過 Action 傳遞數(shù)據(jù)，構(gòu)成了如上所述的單向數(shù)據(jù)流循環(huán)，所以應(yīng)用中的各部分分工就相當(dāng)明確，高度解耦了。
這種單向數(shù)據(jù)流使得整個(gè)系統(tǒng)都是透明可預(yù)測(cè)的。