ReactJs和React Native的聯系和差異
1，React Js的目的 是為了使前端的V層更具組件化，能更好的復用，它能夠使用簡單的html標簽創建更多的自定義組件標簽，內部綁定事件，同時可以讓你從操作dom中解脫出來，只需要操作數據就會改變相應的dom。
2，React Native的目的 是希望我們能夠使用前端的技術棧就可以創建出能夠在不同平臺運行的一個框架。可以創建出在移動端運行的app，但是性能可能比原聲app差一點。
3，ReactJs和React Native的原理是相同的，都是由js實現的虛擬dom來驅動界面view層渲染。只不過ReactJs是驅動html dom渲染； React Native是驅動android/ios原生組件渲染。
4，React基於組件（component）開發，然後組件和組件之間通過props傳遞方法，每個組件都有一個狀態（state），當某個方法改變了這個狀態值時，整個組件就會重繪，從而達到刷新。另外，說到重繪就要提到虛擬dom了，就是用js模擬dom結構，等整個組件的dom更新完畢，才渲染到頁面，簡單來說只更新了相比之前改變了的部分，而不是全部刷新，所以效率很高。
虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當數據變化時，React都會重新構建整個DOM樹，然後React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的區別，然後僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合並。
React Native比起標準Web開發或原生開發能夠帶來的三大好處：
1、手勢識別：基於Web技術（HTML5/JavaScript）構建的移動應用經常被抱怨缺乏及時響應。而基於原生UI的React Native能避免這些問題從而實現實時響應。
2、原生組件：使用HTML5/JavaScript實現的組件比起原生組件總是讓人感覺差一截，而React Native由於采用了原生UI組件自然沒有此問題。
3、樣式和布局：iOS、Android和基於Web的應用各自有不同的樣式和布局機制。React Native通過一個基於FlexBox的布局引擎在所有移動平臺上實現了一致的跨平臺樣式和布局方案。
H5(hybrid)、React Native、Native分析
React Native來的正是時候，一則是因為H5發展到一定程度的受限；二則是移動市場的迅速崛起強調團隊快速響應和叠代；三則是用戶的體驗被放大，用戶要求極致的快感。React Native既綜合了Web布局的優勢，采用了FlexBox和JSX，又使用了Native原生組件。
1、原生應用的用戶體驗
2、跨平臺特性
3、開發人員單一技術棧
4、上手快，入門容易
5、社區繁榮
React Native-Android 環境搭建(windows)
1.安裝【JDK SDK Node Git】並配置PATH
註意SDK要安裝API23以上，因為React Native編譯Android會用到gradle自動化建構工具，gradle要求SDK-API23以上。
安裝Android Support Libraries和Android Support Repository。Android SDK Platform-Tools 24版本回報unable to detect adb version 替換成23的adb.exe即可。
2.安裝react-native腳手架
npm install -g react-native-cli
3.創建react-native工程
react-native init helloProject
4.進入工程目錄
cd helloProject
5.安裝工程依賴包
npm install
6.生成JS bundle
react-native start
瀏覽器輸入該鏈接檢驗工程是否正常啟動。
http://localhost:8081/index.android.bundle?platform=android
7.生成apk並在手機上進行安裝
react-native run-android
8.搖一搖手機，點擊Dev Settings後，點擊Debug server host & port for device,設置IP和端口。
9.設置完成後，回到空白頁面，再次搖一搖手機，選擇Reload JS，程序就運行起來。
10.Debug調試
10.1.http://192.168.1.100:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:3388
10.2.http://localhost:8081/debugger-ui
10.3.adb reverse tcp:8081
adb Andorid Debug Bridge
【Client端 用來發送adb命令；Deamon守護進程, 運行在調試設備中；Server端, 管理PC中的Client端和手機的Deamon之間的通信.】
常用命令：
adb devices
adb logcat
adb install/uninstall
adb pull/push
adb start/kill-server
adb shell 進入調試設備的shell界面
通過wifi進行遠程連接手機進行調試：adb connect/disconnect 手機IP：port[需要打開手機上的adb服務]。
通過連上usb開啟遠程調試模式進行調試。
adb shell am start <intent adb="" shell="" am="" force-stop="" <package="" pm="" list="" packages="" permissions="" features="" screencap="" sdcard="" screen.png="" screenrecord="" dumpsys="" input="" keyevent="" 26="" 82<="" code="">
ReactJS
簡單：只要表達出你的應用程序在任一個時間點應該長的什麽樣子就可以了。
聲明式： 數據變化後，React 就只會更新變化的部分。
構建可組合的組件：使代碼復用、測試和關註分離更加簡單。
React 顛覆傳統核心
響應式更新
組件就像是函數
JSX 語法 JavaScript+XML
沒有 JSX 的 React
1、React.createElement 來創建一個樹。第一個參數是標簽，第二個參數是一個屬性對象，第三個是子節點。
2、創建基於自定義組件的速記工廠方法。
3、React 已經為 HTML 標簽提供內置工廠方法。
JSX 文本中插入HTML 實體
為了防止各種 XSS 攻擊， React 默認會轉義所有字符串。
1.最簡單的是直接用 Unicode 字符。這時要確保文件是 UTF-8 編碼且網頁也指定為 UTF-8 編碼。
2.在數組裏混合使用字符串和 JSX 元素
{[‘First ‘, ·, ‘ Second‘]}3.直接使用原始 HTML
自動綁定和事件代理 :React 實際並沒有把事件處理器綁定到節點本身。當 React 啟動的時候，它在最外層使用唯一一個事件監聽器處理所有事件。當組件被加載和卸載時，只是在內部映射裏添加或刪除事件處理器。當事件觸發，React 根據映射來決定如何分發。
State 工作原理:常用的通知 React 數據變化的方法是調用 setState(data, callback)。這個方法會合並（merge） data 到 this.state，並重新渲染組件。渲染完成後，調用可選的 callback 回調。大部分情況下不需要提供 callback，因為 React 會負責把界面更新到最新狀態。
JSX 轉成標準的 JavaScript
1.在線 2.離線 npm install -g react-tools jsx --watch src/ build/ 3.預編譯 basic-jsx-precompile npm install -g babel-cli npm install babel-preset-react babel example.js --presets react --out-dir=build
watchify是一個browserify的封裝，其在packages.json中的配置與browserify完全一樣，且無需改變”browserify”字段名。因此，安裝了watchify後，你甚至不用修改browserify已有的配置，直接執行 watchify x.js -o x.out.js 即可。
Python內置了一個簡單的HTTP服務器，只需要在命令行下面敲一行命令，一個HTTP服務器就起來了， 這會將當前所在的文件夾設置為默認的Web目錄。
python -m SimpleHTTPServer
庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。
1、ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
2、React 允許將代碼封裝成組件（component），然後像插入普通 HTML 標簽一樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類。所有組件類都必須有自己的 render 方法，用於輸出組件。註意（組件類的第一個字母必須大寫，否則會報錯；組件類只能包含一個頂層標簽，否則也會報錯。）組件的用法與原生的 HTML 標簽完全一致，可以任意加入屬性，比如 ，就是 HelloMessage 組件加入一個 name 屬性，值為 John。
3、組件的屬性可以在組件類的 this.props 對象上獲取，比如 name 屬性就可以通過 this.props.name 讀取。添加組件屬性，有一個地方需要註意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
4、組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求。
5、有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性，this.refs.[refName] 就會返回這個真實的 DOM 節點。
6、this.setState 方法修改狀態值，每次修改以後，自動調用 this.render 方法，再次渲染組件。由於 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。
7、組件的生命周期 Mounting：已插入真實 DOM；Updating：正在被重新渲染；Unmounting：已移出真實 DOM。
8、will 函數在進入狀態之前調用，did 函數在進入狀態之後調用
componentWillMount() componentDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) componentWillUnmount() componentWillReceiveProps(object nextProps)//已加載組件收到新的參數時調用 shouldComponentUpdate(object nextProps, object nextState)//組件判斷是否重新渲染時調用。
9、開發流程
第一步：拆分用戶界面為一個組件樹
第二步： 利用 React ，創建應用的一個靜態版本
第三步：識別出最小的（但是完整的）代表 UI 的 state
第四步：確認 state 的生命周期
第五步：添加反向數據流
ReactJs和React Native的聯系和差異