前言
這是一篇打基礎的文章，通過本文的基礎學習，會發現開啟了新世界的大門，要實現以下幾個目標
-
邊學邊練
-
探索學習資源
學習一門技術的最快的方式就是看它的文件，跑官方的demo.
快速開始
我使用chrome瀏覽器，在分離檔案時，文件中說要通過http服務，linux下可以建立軟鏈，於是我在在伺服器的網站目錄下，軟鏈到了現在的專案，這樣就能繼續使用這個專案的目錄，同時又能跑在http服務上。
ln -s /Users/wang-xuan/project/react /XAMPP/xamppfiles/hthocs/react -s 後面是原始檔路徑 最後是目標檔案路徑
提高開發效率
1.sublime設定
如果你是有的是sublime,而且對它還有一些小小的不滿意，可以設定一下，
推薦一篇設定文章：Sublime Text3 – 實用設定
2.React除錯工具
chrome和firefox都有除錯工具，用起來很方便。
教程
資源載入
-
為了每次訪問不必因為載入資源而太耗時，把資源都載入到本地檔案
-
使用marked是發現資源報錯，引入文件中的marked資源即可
-
編寫假介面，api資料放在：
public/api.comments
引用：<CommentBox url="./api/comments" />
總結
-
頁面資料
顯示在頁面上的變數有兩種，一種是由父級控制的，一種是由自己的-
props引用自父級，可以是變化的值，父級控制著資料變動；也可以是不變的。
-
state控制在本級，由元件自己控制狀態變化
-
-
獲取頁面變更
由於React建立的是虛擬DOM,在DOM樹建立完後才能引用，用refs來引用DOM,追蹤文件變化。 -
事件掛載
事件應該掛載到最底層的公共父節點，例如要讓CommentForm的改變反映到CommentList,則把控制處理掛載到CommentBox上，可以通過子元件的事件回撥呼叫這個父級掛載的事件來實現邏輯控制。
實戰進展
真正自己去編寫程式碼才能有真正的成長，沒有其它人可以代替你，選擇一個自己感興趣的小功能去親自實戰吧，我的實戰可以作為你的參考。
在教程中學習了元件的解偶及事件的合適掛載位置,將它應用在實戰中：
-
先寫整體的靜態結構，元件解偶，不要讓一個元件負責所有的事，拆分成父子結構更合理。
-
考慮資料如何傳遞，資料應該屬於自己控制還是伏擊控制，資料變化源在哪裡，沿著資料流動方向寫資料傳輸事件。
我重構了React<一>初接觸的簡歷小管家
深入理解 React
總結
專案的構建過程
-
劃分元件，確定最小元件單元
-
編寫靜態結構
-
確定state有哪些，在哪裡建立
-
編寫反向資料流
問題
-
SearchBar的渲染並不是基於ProductTable的，它的資料為什麼要受ProductTable的控制，應該去掉ProductTable向SearchBar的資料流
實戰進展
-
對著自己的應用重新走一遍官網中的流程，並作出相應的改進
-
看看應用有沒有刻意增加的功能，
我給簡歷小管家新增了搜尋功能
為什麼使用React
構建隨著時間資料不斷變化的大規模應用程式
資料呈現
資料呈現的理念
React最大的特點就是虛擬DOM，萬不得已不會操作真實DOM，主要是通過資料來改變頁面的顯示，頁面分割為若干個元件，每個元件只能渲染單個根節點，接受 props 和 state 來控制資料。
語法
React用JSX語法，可以用 HTML 語法去寫 JavaScript 函式呼叫。
我們把單一的功能單元拆分為元件，在元件中可以用HTML的語法直接建立節點，如：<a href="http://facebook.github.io/react/">Hello React!</a>
深入理解 JSX
JSX 里約定分別使用首字母大、小寫來區分本地元件的類和 HTML 標籤。
轉換
JSX 把類 XML 的語法轉成純粹 JavaScript
var Nav, Profile;
// 輸入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 輸出 (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);JavaScript 表示式
用｛｝包圍，可以是變數、表示式、子節點和註釋
表示式
var person = <Person name={window.isLoggedIn ? window.name : ``} />;子節點
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;註釋
{/* 一般註釋, 用 {} 包圍 */}實戰進展
簡歷小管家規範化註釋
JSX的延展屬性
如果想要對props屬性進行修改和擴充套件
不好的方式：
var component = <Component />;
component.props.foo = x; // 不好好的方式：
var props = {};
props.foo = x;
var component = <Component {...props} />;JSX 的陷阱
JSX 的文字中可以直接使用HTML實體，
<td>·已投遞公司</td>
但是要在表示式中傳遞實體會有問題
// 錯誤: 會顯示 “First · Second”
<div>{`First · Second`}</div>4種解決方法：
-
直接用 Unicode 字元
-
找到 實體的 Unicode 編號，在 JavaScript 字串裡使用
-
混合使用字串和 JSX 元素
-
直接使用原始 HTML
富互動性的動態使用者介面
事件處理
用React寫事件是基本不用做相容性處理的，也不用給元件的事件處理繫結this，因為它的底層已經處理好了，而且很高效。
一切變化的資料來源頭都是state來控制的，this.state 應該僅包括能表示使用者介面狀態所需的最少資料
複合元件
複合方式
父元件中通過render返回子元件的方式，將自元件複合起來，Parent 能通過專門的 this.props.children props 讀取子級。
子級校正及key的意義
什麼是子級校正
校正就是每次 render 方法呼叫後 React 更新 DOM 的過程。
例如先有3個dom：1、2、3，經過事件處理，要變為2、3，該如何校正呢？直觀上是刪除1，實際是1、2-－》2、3，然後刪除3，
可以通過隱藏元件而不是刪除它們來繞過這些問題。
key的意義
通過給子級設定惟一標識的 key，會確保它們被重新排序（而不是破壞）或者刪除（而不是重用）。
key的正確應用格式：把 key 新增到子級陣列裡元件本身上，而不是每個子級內部最外層 HTML 上
// 錯誤！
// 子元件ListItemWrapper中
return <li key={this.props.data.id}>{this.props.data.text}</li>;
// 正確 :)
// 父元件生成子元件時
return <ListItemWrapper key={result.id} data={result}/>;效能
父級控制資料變化，通過props傳遞給子元件的過程是一個遍歷子元件的過程，本身效能就很好，還可以通過shouldComponentUpdate() 方法返回 false ，來跳過一些子元件提高效能
可複用元件
複用是一項非常有用的技術，React元件為複用提供了簡單、安全的方式，可以設定預設值，還可以對資料進行校驗，還可以實現元件及邏輯的複用
Mixins
當一些元件需要共用一些耗效能的邏輯，我們希望這個通用的邏輯只存於呼叫這段邏輯的生命週期，Mixins可以做到！
傳遞 Props
React以元件的形式進行封裝，用props來進行資料間的傳遞。
從上層傳遞過來的屬性有兩種用途
-
本層使用
2，繼續傳遞供子層使用
如果上層傳遞過來的屬性有很多，向下傳遞的屬性也很多，一個一個傳遞事不現實的，需要批量傳遞，批量的同時又要摘除本層使用的屬性。
解決方法
-
在 JSX 裡使用 … 傳遞，可以實現批量
-
解構賦值模式可以實現摘除屬性
表單元件
在剛開始寫React的表單時會感覺奇怪，設定了value後無法在表單中輸入值，react由於自身的限制：node.getAttribute(`value`)一直是初始值，值不能改變。
於是，元件分為受限的和不受限的，受限的可以通過onChange事件來改變值。
另外的特別之處是：React通過default…來設定預設值。
瀏覽器中的工作原理
DOM
React是很快的，因為它從不直接操作DOM。React在記憶體中維護一個快速響應的DOM描述。render()方法返回一個DOM的描述，React能夠利用記憶體中的描述來快速地計算出差異，然後更新瀏覽器中的DOM。
通過Refs和findDOMNode()呼叫已掛載的DOM
生命週期
關於Refs的更多內容
不要試圖操作虛擬DOM，過Refs和findDOMNode()操作已掛載的DOM。
工具和外掛
找自己感興趣的進行探究
工具整合（Tooling Integration）
外掛
學習資源推薦
精益 React 學習指南 （Lean React）
React 學習指南及前端乾貨
每天都實戰一個React-Native專案
小菜鳥如何系統性學習React？