React 簡介

React 介紹

React是Facrbook內部的一個JavaScript類庫並開源，可用於建立Web用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。那些須要手動更新DOM、費力地記錄每個狀態的日子一去不復返。React使用很新穎的方式解決了這些問題。你只須要聲明地定義各個時間點的用戶界面，而無序關係在數據變化時，須要更新哪一部分DOM。在任什麼時候間點，React都能以最小的DOM修改來更新整個應用程序。

React主要有四個主要概念構成，下面分別來簡單介紹一下

Virtual DOM

• 之因此引入虛擬DOM，一方面是性能的考慮。Web應用和網站不一樣，一個Web應用 中一般會在單頁內有大量的DOM操做，而這些DOM操做很慢
• 在React中，應用程序在虛擬DOM上操做，這讓React有了優化的機會。簡單說， React在每次須要渲染時，會先比較當前DOM內容和待渲染內容的差別， 而後再決定如何最優地更新DOM
• 除了性能的考慮，React引入虛擬DOM更重要的意義是提供了一種一致的開發方式來開發服務端應用、Web應用和手機端應用

由於有了虛擬DOM這一層，因此經過配備不一樣的渲染器，就能夠將虛擬DOM的內容 渲染到不一樣的平臺。而應用開發者，使用JavaScript就能夠通吃各個平臺了。至關棒的思路！且 虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是 Diff部分，於是能達到提升性能的目的

React組件

對於React而言，則徹底是一個新的思路，開發者從功能的角度出發，將UI分紅不一樣的組件，每一個組件都獨立封裝。
在React中，你按照界面模塊天然劃分的方式來組織和編寫你的代碼，對於評論界面而言，整個UI是一個經過小組件構成的大組件，每一個組件只關心本身部分的邏輯，彼此獨立。

• 組件化開發特性:

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

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

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

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

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

• 組件定義

在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")
    );
}

1. ES5方式定義組件

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

1. 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>
        )
    }
}

1. JSX方式定義組件

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

Jsx語法

• 什麼是jsx

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

• 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（單向數據流）

• 單向數據流

先來了解一下 Flux 的核心「單向數據流「怎麼運做的：
Action -> Dispatcher -> Store -> View
更多時候 View 會經過用戶交互觸發 Action，因此一個簡單完整的數據流相似這樣：

整個流程以下：

1.首先要有 action，經過定義一些 action creator 方法根據須要建立 Action 提供給 dispatcher2.View 層經過用戶交互（好比 onClick）會觸發 Action3.Dispatcher 會分發觸發的 Action 給全部註冊的 Store 的回調函數4.Store 回調函數根據接收的 Action 更新自身數據以後會觸發一個 change 事件通知 View 數據更改了5.View 會監聽這個 change 事件，拿到對應的新數據並調用 setState 更新組件 UI全部的狀態都由 Store 來維護，經過 Action 傳遞數據，構成了如上所述的單向數據流循環，因此應用中的各部分分工就至關明確，高度解耦了。這種單向數據流使得整個系統都是透明可預測的。