介紹?
1，React Js的目的 是為了使前端的V層更具組件化，能更好的復(fù)用，它能夠使用簡單的html標簽創(chuàng)建更多的自定義組件標簽，內(nèi)部綁定事件，同時可以讓你從操作dom中解脫出來，只需要操作數(shù)據(jù)就會改變相應(yīng)的dom。?
2，React Native的目的 是希望我們能夠使用前端的技術(shù)棧就可以創(chuàng)建出能夠在不同平臺運行的一個框架。可以創(chuàng)建出在移動端運行的app，但是性能可能比原聲app差一點。?
3，ReactJs和React Native的原理是相同的，都是由js實現(xiàn)的虛擬dom來驅(qū)動界面view層渲染。只不過ReactJs是驅(qū)動html dom渲染； React Native是驅(qū)動android/ios原生組件渲染。?
4，React基于組件（component）開發(fā)，然后組件和組件之間通過props傳遞方法，每個組件都有一個狀態(tài)（state），當某個方法改變了這個狀態(tài)值時，整個組件就會重繪，從而達到刷新。另外，說到重繪就要提到虛擬dom了，就是用js模擬dom結(jié)構(gòu)，等整個組件的dom更新完畢，才渲染到頁面，簡單來說只更新了相比之前改變了的部分，而不是全部刷新，所以效率很高。

虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現(xiàn)了一套DOM API。基于React進行開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進行，每當數(shù)據(jù)變化時，React都會重新構(gòu)建整個DOM樹，然后React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結(jié)構(gòu)的區(qū)別，然后僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環(huán)（Event Loop）內(nèi)的兩次數(shù)據(jù)變化會被合并。

React Native比起標準Web開發(fā)或原生開發(fā)能夠帶來的三大好處：?
1、手勢識別：基于Web技術(shù)（HTML5/JavaScript）構(gòu)建的移動應(yīng)用經(jīng)常被抱怨缺乏及時響應(yīng)。而基于原生UI的React Native能避免這些問題從而實現(xiàn)實時響應(yīng)。?
2、原生組件：使用HTML5/JavaScript實現(xiàn)的組件比起原生組件總是讓人感覺差一截，而React Native由于采用了原生UI組件自然沒有此問題。?
3、樣式和布局：iOS、Android和基于Web的應(yīng)用各自有不同的樣式和布局機制。React Native通過一個基于FlexBox的布局引擎在所有移動平臺上實現(xiàn)了一致的跨平臺樣式和布局方案。

H5(hybrid)、React Native、Native分析?
React Native來的正是時候，一則是因為H5發(fā)展到一定程度的受限；二則是移動市場的迅速崛起強調(diào)團隊快速響應(yīng)和迭代；三則是用戶的體驗被放大，用戶要求極致的快感。React Native既綜合了Web布局的優(yōu)勢，采用了FlexBox和JSX，又使用了Native原生組件。?
1、原生應(yīng)用的用戶體驗?
2、跨平臺特性?
3、開發(fā)人員單一技術(shù)棧?
4、上手快，入門容易?
5、社區(qū)繁榮

React Native-Android 環(huán)境搭建(windows)?
1.安裝【JDK SDK Node Git】并配置PATH?
注意SDK要安裝API23以上，因為React Native編譯Android會用到gradle自動化建構(gòu)工具，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.創(chuàng)建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,設(shè)置IP和端口。?
9.設(shè)置完成后，回到空白頁面，再次搖一搖手機，選擇Reload JS，程序就運行起來。?
10.Debug調(diào)試?
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端 用來發(fā)送adb命令；Deamon守護進程, 運行在調(diào)試設(shè)備中；Server端, 管理PC中的Client端和手機的Deamon之間的通信.】?
常用命令：

adb devices adb logcat adb install/uninstall adb pull/push adb start/kill-server

?
adb shell 進入調(diào)試設(shè)備的shell界面?
通過wifi進行遠程連接手機進行調(diào)試：adb connect/disconnect 手機IP：port[需要打開手機上的adb服務(wù)]。?
通過連上usb開啟遠程調(diào)試模式進行調(diào)試。

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?
簡單：只要表達出你的應(yīng)用程序在任一個時間點應(yīng)該長的什么樣子就可以了。?
聲明式： 數(shù)據(jù)變化后，React 就只會更新變化的部分。?
構(gòu)建可組合的組件：使代碼復(fù)用、測試和關(guān)注分離更加簡單。?
React 顛覆傳統(tǒng): Give it five minutes?
**幾年前,我曾經(jīng)是一個性急的人。每當有人說什么,我就會想法兒來表示不同意。如果與我的世界觀不一致我就努力反擊。?
** 就好像我必須是第一個有觀點的人——好像當了第一就意味著什么。但是它真正意味的就是,我沒有仔細思考這個問題。你的反應(yīng)越快,你思考得就越少。雖然并不總是這樣,但往往是。?
**談?wù)撓シ瓷浞磻?yīng)很容易,就好像他們只是發(fā)生在別人身上的事。其實你也有。如果你的鄰居不能避免,你也一樣。?
**這問題變得更加嚴重的時候是在2007年。我在羅德島州普羅維登斯的商業(yè)創(chuàng)新工廠會議上發(fā)表講話，理查德·沃曼也是。在我演講之后理查德上來介紹自己并且還稱贊了我的演講。他真的是很有雅量的。他當然可以不用那么做。?
**可我做了什么呢?我反駁了他所講的。當他在臺上發(fā)表自己的觀點時，我正忙著記錄我不同意的觀點。當有機會跟他說話時,我很快就反駁他的一些觀點。我看起來一定像個混蛋。?
**他的回答改變了我的人生。這是一個簡單的事情。他說:“給它5分鐘。我問他什么意思?他說,有異議很好,有反駁很好,有主見和信念更好,但是在你確定要反對我的觀點之前請給它們點時間。“五分鐘”代表“思考”,不是反應(yīng)。他是完全正確的。而我來討論是想證明一些什么,不是學(xué)習(xí)些什么。?
**這對我來說是一個重大時刻。?
**理查德用他的職業(yè)生涯在思考這些問題。他花了30年。而我只花了幾分鐘。現(xiàn)在,當然他可能是錯的,我可能是對的,但是最好在你確定自己是對的之前能夠深入的思考一下。?
**在提問題和反駁之間還是有區(qū)別的。反駁意味著你認為你已經(jīng)知道。提問題意味著你想要知道。想要提更多的問題。?
**學(xué)習(xí)先思考而不是反應(yīng)快會是一生的追求。它是很難的。有時我仍然會在本不應(yīng)該的時候頭腦發(fā)熱。但是我真的很享受我有所改善帶來的好處。?
**如果你不知道為什么這很重要,想想喬森納·艾維對于喬布斯崇敬的這句話:正如史蒂夫喜愛設(shè)計,喜歡制作東西,他帶著極高的敬意來對待創(chuàng)造的過程。?
**你看,我認為他比任何人都明白當一個觀點最終如此有力時，他們也就開始變得脆弱了，很難形成一個思想，很容易被錯過，很容易妥協(xié)，很容易被擠扁。那是很深奧的。觀點很脆弱。他們通常一開始就很無力。他們幾乎不存在，很容易被忽視或遺漏或錯過。?
**世上有兩件事不需要有技術(shù)含量：1.花別人的錢 2.忽略一種觀點?
忽略一種觀點很容易因為它根本不涉及任何工作。你可以嘲笑它。你可以忽略它。你可以朝它吐口煙。那很容易。難的是去保護它，考慮它，沉浸它，探索它，重復(fù)它，嘗試它。正確的想法也被可以作為錯誤的想法來開啟生活。?
**所以下次當你聽到的一些事，或人，談?wù)撘粋€觀點,給出一個觀點，或者提出一個觀點，給它5分鐘。反駁之前，說太難或工作量太大之前，考慮一下。這些東西可能是正確的，但也有可能會有另一個真相：它或許是值得的。

核心?
響應(yīng)式更新?
組件就像是函數(shù)?
JSX 語法 JavaScript+XML?
沒有 JSX 的 React?
1、React.createElement 來創(chuàng)建一個樹。第一個參數(shù)是標簽，第二個參數(shù)是一個屬性對象，第三個是子節(jié)點。?
2、創(chuàng)建基于自定義組件的速記工廠方法。?
3、React 已經(jīng)為 HTML 標簽提供內(nèi)置工廠方法。?
JSX 文本中插入HTML 實體?
為了防止各種 XSS 攻擊， React 默認會轉(zhuǎn)義所有字符串。

1.最簡單的是直接用 Unicode 字符。這時要確保文件是 UTF-8 編碼且網(wǎng)頁也指定為 UTF-8 編碼。 {'First \u00b7 Second'} {'First ' + String.fromCharCode(183) + ' Second'} 2.在數(shù)組里混合使用字符串和 JSX 元素 {['First ', ·, ' Second']} 3.直接使用原始 HTML

自動綁定和事件代理 :React 實際并沒有把事件處理器綁定到節(jié)點本身。當 React 啟動的時候，它在最外層使用唯一一個事件監(jiān)聽器處理所有事件。當組件被加載和卸載時，只是在內(nèi)部映射里添加或刪除事件處理器。當事件觸發(fā)，React 根據(jù)映射來決定如何分發(fā)。?
State 工作原理:常用的通知 React 數(shù)據(jù)變化的方法是調(diào)用 setState(data, callback)。這個方法會合并（merge） data 到 this.state，并重新渲染組件。渲染完成后，調(diào)用可選的 callback 回調(diào)。大部分情況下不需要提供 callback，因為 React 會負責(zé)把界面更新到最新狀態(tài)。

JSX 轉(zhuǎn)成標準的 JavaScript

1.在線2.離線 npm install -g react-tools jsx --watch src/ build/ 3.預(yù)編譯 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已有的配置，直接執(zhí)行 watchify x.js -o x.out.js 即可。

Python內(nèi)置了一個簡單的HTTP服務(wù)器，只需要在命令行下面敲一行命令，一個HTTP服務(wù)器就起來了， 這會將當前所在的文件夾設(shè)置為默認的Web目錄。?
python -m SimpleHTTPServer

庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關(guān)的功能，Browser.js 的作用是將 JSX 語法轉(zhuǎn)為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應(yīng)該將它放到服務(wù)器完成。?
1、ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點。ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點。?
2、React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標簽一樣，在網(wǎng)頁中插入這個組件。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 的節(jié)點，這時就要用到 ref 屬性，this.refs.[refName] 就會返回這個真實的 DOM 節(jié)點。?
6、this.setState 方法修改狀態(tài)值，每次修改以后，自動調(diào)用 this.render 方法，再次渲染組件。由于 this.props 和 this.state 都用于描述組件的特性，可能會產(chǎn)生混淆。一個簡單的區(qū)分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產(chǎn)生變化的特性。?
7、組件的生命周期 Mounting：已插入真實 DOM；Updating：正在被重新渲染；Unmounting：已移出真實 DOM。?
8、will 函數(shù)在進入狀態(tài)之前調(diào)用，did 函數(shù)在進入狀態(tài)之后調(diào)用?
componentWillMount()?
componentDidMount()?
componentWillUpdate(object nextProps, object nextState)?
componentDidUpdate(object prevProps, object prevState)?
componentWillUnmount()?
componentWillReceiveProps(object nextProps)//已加載組件收到新的參數(shù)時調(diào)用?
shouldComponentUpdate(object nextProps, object nextState)//組件判斷是否重新渲染時調(diào)用。?
9、開發(fā)流程?
第一步：拆分用戶界面為一個組件樹?
第二步： 利用 React ，創(chuàng)建應(yīng)用的一個靜態(tài)版本?
第三步：識別出最小的（但是完整的）代表 UI 的 state?
第四步：確認 state 的生命周期?
第五步：添加反向數(shù)據(jù)流

總結(jié)

以上是生活随笔為你收集整理的ReactJs和React Native的那些事的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。