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 shell 進入調試設備的shell界面?
通過wifi進行遠程連接手機進行調試：adb connect/disconnect 手機IP：port[需要打開手機上的adb服務]。?
通過連上usb開啟遠程調試模式進行調試。
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 默認會轉義所有字符串。
自動綁定和事件代理 :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 的生命周期?
第五步：添加反向數據流
總結
以上是生活随笔為你收集整理的ReactJs和React Native的那些事的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java创建型模式的讨论
- 下一篇： 动手动脑及课后实践3