宏觀認識
1.?What does Apple think of React Native ?
2.《如何評價 React Native？》：來自知乎的這個回答詳細介紹了 Facebook 即將開源的 React Native 的相關(guān)知識，包括核心實現(xiàn)、設(shè)計考慮、以及 React Native 的優(yōu)勢和劣勢。
他們實現(xiàn)了一套類似css的子集，用來解決樣式問題，相當復(fù)雜和強大，靠這個才能將Native的核心組件組成JS層的基本組件再組成業(yè)務(wù)端的業(yè)務(wù)組件
2.5《First Impressions using React Native》：作者介紹了他使用 Facebook 即將開源的 React Native 的感受。
JavaScriptCore，using div and a you use things like View andText
3.《React.js Conf 2015 Keynote – Introducing React Native》：這是 Facebook 出品的 react.js 的視頻介紹。Facebook 打算用它來統(tǒng)一移動端的編程語言，react.js 把界面全部用 native 控件實現(xiàn)，js 只作為后端邏輯層。Facebook 也打算開源該框架，如果這個框架成功，將改變整個業(yè)界的移動開發(fā)效率，因為 iOS 和 android 代碼可以大部分復(fù)用。注：視頻來自 youtube。
came from扯了一堆，講了一堆 Native 不好的地方，迭代復(fù)雜，上手難。然后十多分才進入 RN，用的是Native的UI控件，底層用js調(diào)方法。
《React.js Conf 2015 Keynote 2 - A Deep Dive into React Native》
可以用chrome調(diào)試 構(gòu)建iOS app的js代碼。
4. 《跨平臺開發(fā)時代的 (再次) 到來？》：這篇文章主要想談?wù)勛罱止纹鸬囊苿娱_發(fā)跨平臺之風，并著重介紹和對比一下像是 Xamarin，NativeScript 和 React Native 之類的東西。
5.?一種跨平臺的App開發(fā)解決方案??--? 設(shè)計上主要考慮的問題，對初學來說有點意思。
6. 也許，DOM 不是答案? --? Web App vs. Native App，為什么Web app有性能瓶頸？FlipBoard沒有使用DOM，用canvas輸出
源碼解析
布局
《react-native 之布局篇》：天貓前端@橫天同學對?css-layout?的布局能力做了一些實驗，給出了一些有價值的結(jié)論，如：react 寬度基于pt為單位；flex能實現(xiàn)網(wǎng)格系統(tǒng)需求，且網(wǎng)格能夠各種嵌套無bug；padding 設(shè)置在Text元素上所有padding變成了marginBottom...
JS/OC不會頻繁通信，會在事件觸發(fā)時批量傳遞，提高效率。
《React Native 通信機制詳解》：React Native 是 facebook 剛開源的框架，可以用 javascript 直接開發(fā)原生 APP，先不說這個框架后續(xù)是否能得到大眾認可，單從源碼來說，這個框架源碼里有非常多的設(shè)計思想和實現(xiàn)方式值得學習，本文介紹了它最基礎(chǔ)的 JavaScript-ObjectC 通信機制。
1. ?JS-OC通信實際上很簡單，OC向JS傳信息，webview的-stringByEvaluatingJavaScriptFromString?方法可以直接在當前context上執(zhí)行一段JS腳本，并且可以獲取執(zhí)行后的返回值，返回值就相當于JS向OC傳遞信息。
React Native也是以此為基礎(chǔ)，通過各種手段，實現(xiàn)了在OC定義一個模塊方法，JS可以直接調(diào)用這個模塊方法并還可以無縫銜接回調(diào)。
舉個例子，OC定義了一個模塊RCTSQLManager，里面有個方法-query:successCallback:，JS可以直接調(diào)用RCTSQLManager.query并通過回調(diào)獲取執(zhí)行結(jié)果。
2. 底層實現(xiàn)：模塊配置表
入門
1.《React 入門實例教程》：React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站。本文是阮一峰原創(chuàng)的入門教程。
ReactDOM.render()
JSX 語法 - JSX使得你在代碼當中編寫標記語言，HTML 與 JavaScript 的混寫
基本語法規(guī)則：遇到 HTML 標簽（以<開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以{開頭），就用 JavaScript 規(guī)則解析。
React.createClass - 注意，組件類的第一個字母必須大寫，否則會報錯。組件類只能包含一個頂層標簽，否則也會報錯。
添加組件屬性，class屬性需要寫成className，for屬性需要寫成htmlFor，這是因為class和for是 JavaScript 的保留字。
React.Children.map來遍歷子節(jié)點，this.props.children表示組件的所有子節(jié)點，(1) undefined (2) object (3) array
組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求
getDefaultProps方法可以用來設(shè)置組件屬性的默認值。
組件并不是真實的 DOM 節(jié)點，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。根據(jù) React 的設(shè)計，所有的 DOM 變動，都先在虛擬 DOM 上發(fā)生，然后再將實際發(fā)生變動的部分，反映在真實 DOM上，這種算法叫做DOM diff，它可以極大提高網(wǎng)頁的性能表現(xiàn)。
真實的DOM節(jié)點 - ref屬性，由于 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。
this.state 狀態(tài)機，this.props表示那些一旦定義，就不再改變的特性，而this.state是會隨著用戶互動而產(chǎn)生變化的特性
<input type="text"? value={value}? onChange={this.handleChange} />，不能用props，要用事件回調(diào) event.target.value 讀取用戶輸入。
組件的生命周期，- will & did
Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM
Ajax
{{}} ?== 這是因為React 組件樣式是一個對象，所以第一重大括號表示這是 JavaScript 語法，第二重大括號表示樣式對象。
2. HackerNews-React-Native：HackerNews-React-Native 是用 React Native 完成的 HackerNews 客戶端。
3. f8Conf-React-Native:?2016 官方F8 app 源碼
實時修復(fù)Bug，動態(tài)運營，動態(tài)增加功能
JSPatch用iOS內(nèi)置的JavaScriptCore.framework作為JS引擎，但沒有用它JSExport的特性進行JS-OC函數(shù)互調(diào)，而是通過Objective-C Runtime，從JS傳遞要調(diào)用的類名函數(shù)名到Objective-C，再使用NSInvocation動態(tài)調(diào)用對應(yīng)的OC方法。
JSPatch和wax一樣都是通過OC Runtime的接口通過字符串反射找到對應(yīng)的類和方法進行調(diào)用，這中間的字符串處理會損耗一定的性能，另外兩種語言間的類型轉(zhuǎn)換也有性能損耗
所以動態(tài)添加業(yè)務(wù)模塊目前還是推薦嘗試React Native，但React Native并不會提供原生OC接口的反射調(diào)用和方法替換，無法做到修改原生代碼，JSPatch以小巧的引擎補足這個缺口，配合React Native用統(tǒng)一的JS語言讓一個原生APP時刻處于可擴展可修改的狀態(tài)。
方法調(diào)用 -- OC runtime ( 類名/方法名 -> 類和方法，替換實現(xiàn)，動態(tài)添加類+方法+注冊)
JSPatch 基本原理：JS 傳遞字符串給 OC，OC 通過 Runtime 接口調(diào)用和替換 OC 方法。
require
踩坑
nuclide + react + ES2015 + Redux
atom -> nuclide
react -- 27876 total
安裝：
- node是基于Chrome V8引擎的Javascript運行環(huán)境。
- watchman是 facebook 的一個開源項目，用來監(jiān)視文件并且記錄文件的改動情況，當文件變更它可以觸發(fā)一些操作，例如執(zhí)行一些命令等等。
- flow同樣是facebook的一個開源項目，是Javascript的靜態(tài)類型檢查器，用于發(fā)現(xiàn)JS程序中的類型錯誤，以提高程序員的效率和代碼質(zhì)量。
<1>Node.js not linked error- 加權(quán)限 sudo chown -R $(whoami) /usr/local，再?brew link --overwrite node
<2>npm ERR! fetch failedhttp://registry.cnpmjs.org/react-native-cli/download/react-native-cli-1.0.0.tgz
這個坑最少找了幾十種方法：
npm config set registryhttps://registry.npm.taobao.org
npm config set disturlhttps://npm.taobao.org/dist
<3> react-native init? xxx 卡住不動? --React-Native init 失敗
降級 == sudo npm install -g npm@2.14.6
<4> could not connect to development server.
running npm startfrom react-native directory
Run npm starton local machine to start the development server. React Native relies on a development server to communicate with the app running in the simulator.
<5> 用 main.bundle 就是 Unable to execute JS call: __fbBatchedBridge is undefined.
用 url 就是 Could not connect to development server.
this page?has a good overview of?ES2015?features.
Props
State - You can also use a state container like?Redux?to control your data flow.
Style
height + width
Layout - flexDirection（行 和 列），alignItems（分布方式，頭，中，尾，around，between），justifyContent（第二坐標系，對應(yīng)flexDirection，頭，中，尾，stretch(不需要w或者h)）
