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
瀏覽器輸入該連結檢驗工程是否正常啟動。
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 顛覆傳統: Give it five minutes
**幾年前,我曾經是一個性急的人。每當有人說什麼,我就會想法兒來表示不同意。如果與我的世界觀不一致我就努力反擊。
** 就好像我必須是第一個有觀點的人——好像當了第一就意味著什麼。但是它真正意味的就是,我沒有仔細思考這個問題。你的反應越快,你思考得就越少。雖然並不總是這樣,但往往是。
**談論膝反射反應很容易,就好像他們只是發生在別人身上的事。其實你也有。如果你的鄰居不能避免,你也一樣。
**這問題變得更加嚴重的時候是在2007年。我在羅德島州普羅維登斯的商業創新工廠會議上發表講話，理查德·沃曼也是。在我演講之後理查德上來介紹自己並且還稱讚了我的演講。他真的是很有雅量的。他當然可以不用那麼做。
**可我做了什麼呢?我反駁了他所講的。當他在臺上發表自己的觀點時，我正忙著記錄我不同意的觀點。當有機會跟他說話時,我很快就反駁他的一些觀點。我看起來一定像個混蛋。
**他的回答改變了我的人生。這是一個簡單的事情。他說:“給它5分鐘。我問他什麼意思?他說,有異議很好,有反駁很好,有主見和信念更好,但是在你確定要反對我的觀點之前請給它們點時間。“五分鐘”代表“思考”,不是反應。他是完全正確的。而我來討論是想證明一些什麼,不是學習些什麼。
**這對我來說是一個重大時刻。
**理查德用他的職業生涯在思考這些問題。他花了30年。而我只花了幾分鐘。現在,當然他可能是錯的,我可能是對的,但是最好在你確定自己是對的之前能夠深入的思考一下。
**在提問題和反駁之間還是有區別的。反駁意味著你認為你已經知道。提問題意味著你想要知道。想要提更多的問題。
**學習先思考而不是反應快會是一生的追求。它是很難的。有時我仍然會在本不應該的時候頭腦發熱。但是我真的很享受我有所改善帶來的好處。
**如果你不知道為什麼這很重要,想想喬森納·艾維對於喬布斯崇敬的這句話:正如史蒂夫喜愛設計,喜歡製作東西,他帶著極高的敬意來對待創造的過程。
**你看,我認為他比任何人都明白當一個觀點最終如此有力時，他們也就開始變得脆弱了，很難形成一個思想，很容易被錯過，很容易妥協，很容易被擠扁。那是很深奧的。觀點很脆弱。他們通常一開始就很無力。他們幾乎不存在，很容易被忽視或遺漏或錯過。
**世上有兩件事不需要有技術含量：1.花別人的錢 2.忽略一種觀點
忽略一種觀點很容易因為它根本不涉及任何工作。你可以嘲笑它。你可以忽略它。你可以朝它吐口煙。那很容易。難的是去保護它，考慮它，沉浸它，探索它，重複它，嘗試它。正確的想法也被可以作為錯誤的想法來開啟生活。
**所以下次當你聽到的一些事，或人，談論一個觀點,給出一個觀點，或者提出一個觀點，給它5分鐘。反駁之前，說太難或工作量太大之前，考慮一下。這些東西可能是正確的，但也有可能會有另一個真相：它或許是值得的。
核心
響應式更新
元件就像是函式
JSX 語法 JavaScript+XML
沒有 JSX 的 React
1、React.createElement 來建立一個樹。第一個引數是標籤，第二個引數是一個屬性物件，第三個是子節點。
2、建立基於自定義元件的速記工廠方法。
3、React 已經為 HTML 標籤提供內建工廠方法。
JSX 文字中插入HTML 實體
為了防止各種 XSS 攻擊， React 預設會轉義所有字串。
1.最簡單的是直接用 Unicode 字元。這時要確保檔案是 UTF-8 編碼且網頁也指定為 UTF-8 編碼。
自動繫結和事件代理 :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=buildwatchify是一個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 的生命週期
第五步：新增反向資料流