《ReactNative技術(shù)交流》廈門(mén)國(guó)貿(mào)信息技術(shù)部

2021.12.01ReactNative實(shí)際廈門(mén)國(guó)貿(mào)IT部-楊閩目錄2一：React、ReactJS、ReactNative簡(jiǎn)介二：ReactNative思想、方法論、實(shí)踐三：ReactNative實(shí)踐項(xiàng)目(ios與android)四：總結(jié)React簡(jiǎn)介Facebook于2021年推出React框架，2021年推出ReactNative框架。React是根底框架，是一套根底設(shè)計(jì)實(shí)現(xiàn)理念。開(kāi)發(fā)者不能直接運(yùn)用它來(lái)開(kāi)發(fā)挪動(dòng)運(yùn)用或者網(wǎng)頁(yè)。在它之上開(kāi)展出了React.js框架用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)，之后開(kāi)展出了ReactNative用來(lái)開(kāi)發(fā)挪動(dòng)運(yùn)用。由于React根底框架與React.js框架是同時(shí)出現(xiàn)，同時(shí)進(jìn)化開(kāi)展，這呵斥了React根底框架的根本概念，設(shè)計(jì)思想都是在React.js的相關(guān)文檔中描畫(huà)。Facebook推出ReactNative后，也沒(méi)有把React相關(guān)的概念文檔從React.js文檔中分別出來(lái)。這就呵斥了學(xué)ReactNative要去看React.js文檔，說(shuō)ReactNative不時(shí)會(huì)說(shuō)到React.js的情況。3React籠統(tǒng)的精華4ReactJS思想本質(zhì)VirtualDOM毫無(wú)疑問(wèn)是React的精華〔經(jīng)過(guò)JS對(duì)象模擬原生DOM，用DOMDiff極大提升了DOM操作的性能〕React.JS的本質(zhì)是一套Component的復(fù)用機(jī)制采用它的益處：幾乎一切基于樹(shù)形方式組織的UI，都可以得益于React.JS的VirtualDOM所帶來(lái)的性能提升。一旦他開(kāi)場(chǎng)用React.JS，他會(huì)發(fā)現(xiàn)傳統(tǒng)Web開(kāi)發(fā)方法在遠(yuǎn)離他。他更多地思索經(jīng)過(guò)Component來(lái)分別他的UI，而不是DOM、CSS和JS。當(dāng)他越來(lái)越多地以Component為邊境來(lái)組織和思索，React的出現(xiàn)，前所未有地淡化了傳統(tǒng)的HTML,CSS,JS三者相對(duì)獨(dú)立的組織和編程方式，甚至降低了對(duì)jQuery的需求。5ReactJS網(wǎng)頁(yè)小例子1場(chǎng)景：調(diào)用豆瓣電影API，展現(xiàn)電影列表信息，點(diǎn)明細(xì)進(jìn)入明細(xì)頁(yè)面方案：后端node調(diào)用API前往JSON；前端React調(diào)用json，展現(xiàn)圖文。6ReactJS網(wǎng)頁(yè)小例子2場(chǎng)景：調(diào)用豆瓣書(shū)籍API，展現(xiàn)書(shū)籍信息，點(diǎn)明細(xì)進(jìn)入明細(xì)頁(yè)面方案：部署IIS，直接js調(diào)用API接口7ReactJS與ReactNative本質(zhì)區(qū)別ReactJs和ReactNative的原理是一樣的，都是由js實(shí)現(xiàn)的虛擬dom來(lái)驅(qū)動(dòng)界面view層渲染。ReactJs是驅(qū)動(dòng)htmldom渲染；ReactNative是驅(qū)動(dòng)android/ios原生組件渲染。8目錄9一：React、ReactJS、ReactNative簡(jiǎn)介二：ReactNative思想、方法論、實(shí)踐三：ReactNative實(shí)踐項(xiàng)目(ios與android)四：總結(jié)挪動(dòng)app的主要幾種開(kāi)發(fā)方式react-native的誕生Webapp(網(wǎng)頁(yè)應(yīng)用)Hybridapp(混合應(yīng)用)NativeApp(原生應(yīng)用)開(kāi)發(fā)成本低中高維護(hù)更新簡(jiǎn)單簡(jiǎn)單復(fù)雜用戶(hù)體驗(yàn)差中優(yōu)發(fā)版審核不需要需要（可做增量）需要安裝部署免安裝需要（可做增量）安裝跨平臺(tái)性?xún)?yōu)優(yōu)差挪動(dòng)app的開(kāi)發(fā)帶來(lái)的思索

1.?JS變得越來(lái)越快但是DOM卻不斷都很慢，有沒(méi)有更好的處理方案？

2.?JS調(diào)用native的原生方法除了走bridge通訊外能否還有更好的實(shí)現(xiàn)？

3.?挪動(dòng)端有如此眾多成熟的組件庫(kù)，能否直接復(fù)用？

4.?CSS動(dòng)畫(huà)轉(zhuǎn)場(chǎng)的丟幀和卡頓問(wèn)題能處理嗎？5.?每個(gè)挪動(dòng)平臺(tái)都由本身的特性，一份代碼跑通一切的平臺(tái)能否

真的真實(shí)可行且具有較好的維護(hù)性？React-native的開(kāi)發(fā)特點(diǎn)1.?ReactNative里面沒(méi)有webview，運(yùn)轉(zhuǎn)性能會(huì)更好；2.?采用了類(lèi)似cssflexbox的規(guī)劃理念完成頁(yè)面規(guī)劃；3.?擴(kuò)展性更強(qiáng)，Native端提供的是根本控件，JS可以自由組合運(yùn)用，前端工程師和客戶(hù)端工程師各司其職；4.?支持直接熱更新和遠(yuǎn)程調(diào)試；5.?能直接調(diào)用原生平臺(tái)的動(dòng)畫(huà)效果，運(yùn)動(dòng)更流暢；6.?尊重平臺(tái)特性，不強(qiáng)求一份原生代碼支持多個(gè)平臺(tái)

React-native的開(kāi)發(fā)方式“Learnonce,writeanywhere〞Web/iosandroidVirtualDomReact(JS/JSX)React-native開(kāi)發(fā)環(huán)境、調(diào)試、IDE1.?Nodejs：react-native開(kāi)發(fā)的根底工具包基于nodejs搭建，2.?原生開(kāi)發(fā)環(huán)境：需求安裝好iossdk+xcode和androidsdk進(jìn)行相關(guān)開(kāi)發(fā)，可以用模擬器和真機(jī)調(diào)試等多種方式；3.?Chrome：基于chrome上安裝react-nativetools，可做規(guī)劃效果預(yù)覽和代碼斷點(diǎn)調(diào)試；4.?IDE：引薦運(yùn)用atom，能非常方便的集成各種工具，同時(shí)語(yǔ)法檢測(cè)和智能提示也很完備reactnative工程構(gòu)建1.react-nativeinitAwesomeProject；2.安裝chrome調(diào)試插件：ReactDeveloperTools；3.Win系統(tǒng)下，andorid需求執(zhí)行：react-nativerun-android啟動(dòng)運(yùn)轉(zhuǎn)4.MAC系統(tǒng)下，Xcode中翻開(kāi)ios/AwesomeProject.xcodeproj啟動(dòng)運(yùn)轉(zhuǎn)5.在文本編輯器中翻開(kāi)index.js并且編輯代碼；6.在安卓模擬器中按R兩次重新加載運(yùn)用程序并且察看發(fā)生的變化；7.在iOS模擬器中按?-R重新加載運(yùn)用程序并且察看發(fā)生的變化；reactnative需求掌握J(rèn)avascript根底ES6語(yǔ)法【箭頭函數(shù)、Promise】React根底/JSX語(yǔ)法【JSX有點(diǎn)像XML與HTML的混合】Flexbox規(guī)劃Flux思想，Redux作為業(yè)務(wù)/數(shù)據(jù)框架【單項(xiàng)數(shù)據(jù)流】第三方類(lèi)庫(kù)ES6特性Promise異步開(kāi)發(fā)規(guī)劃：Flexboxflex規(guī)劃詳解react-native工程的工程構(gòu)造分析-1

react-native工程的工程構(gòu)造分析-2

react-native工程的工程構(gòu)造分析-3

react-native工程的調(diào)試

Reactnative生命周期react-native中的通訊機(jī)制MVC的架構(gòu)實(shí)現(xiàn)經(jīng)典的MVC構(gòu)造由Model〔模型〕、View〔視圖〕和Controller〔控制〕層構(gòu)成，著重處理軟件設(shè)計(jì)分層的問(wèn)題。MVC帶來(lái)的問(wèn)題MVC模型只是確定了單向通訊，但并沒(méi)有明晰的規(guī)定數(shù)據(jù)流向，這將導(dǎo)致非常容易出現(xiàn)各種數(shù)據(jù)流向不一致的問(wèn)題，有時(shí)各種數(shù)據(jù)的變化也會(huì)引起各種連鎖變化，這都會(huì)導(dǎo)致使得數(shù)據(jù)流的控制變得極其困難。Flux開(kāi)發(fā)方式經(jīng)過(guò)嚴(yán)厲的控制數(shù)據(jù)的更新來(lái)實(shí)現(xiàn)單向數(shù)據(jù)流，強(qiáng)調(diào)數(shù)據(jù)自上而下傳送的單向流動(dòng)理念，從而更明晰的掌握數(shù)據(jù)的改動(dòng)方式及相應(yīng)功能的位置。目錄28一：React、ReactJS、ReactNative簡(jiǎn)介二：ReactNative思想、方法論、實(shí)踐三：ReactNative實(shí)踐項(xiàng)目(ios與android)四：總結(jié)React-native的簡(jiǎn)單例子React-native的綜合例子APP例子思緒與中心代碼1.APP需求假設(shè)：分類(lèi)展現(xiàn)各種微信公眾號(hào)優(yōu)秀文章2：數(shù)據(jù)源：爬取微信公眾號(hào)內(nèi)容(python抓取)，并編寫(xiě)JSON接口〔PHP實(shí)現(xiàn)〕供APP調(diào)用。3.APP展現(xiàn)采用React-native技術(shù)。4：用到的第三方：

導(dǎo)航：react-navigation、數(shù)據(jù)存儲(chǔ)：react-native-simple-store微信分享：react-native-wechat業(yè)務(wù)邏輯：redux-saga5：URL獲取接口，解析JSON數(shù)據(jù)，綁定實(shí)例請(qǐng)看ATOM

APP上架1.IOS端：官網(wǎng)：httpsdeveloper.apple/MAC電腦下XCODE軟件，上傳簽名打包文件。2：Android端：國(guó)內(nèi)電子市場(chǎng)

主流：阿里運(yùn)用分發(fā)平臺(tái)httpopen.uc/、小米開(kāi)放平臺(tái)等

目錄33一：React、ReactJS、ReactNative簡(jiǎn)介二：ReactNative思想、方法論、實(shí)踐三：ReactNative實(shí)踐項(xiàng)目(ios與android)四：總結(jié)React-native的意義1.全端處理方案：不僅僅是簡(jiǎn)單地使前端能用js寫(xiě)nativeapp，而是希望推行一個(gè)通用的前端構(gòu)建方案，不論是Web前端，還是客戶(hù)端前端〔大前端〕。2.React做組件化：提供籠統(tǒng)的界面層，最大程度的實(shí)現(xiàn)組件的組合與復(fù)用3.更靈敏的規(guī)劃：實(shí)現(xiàn)一個(gè)CSS的子集去處理傳統(tǒng)native運(yùn)用開(kāi)發(fā)中規(guī)劃不一致和不靈敏的問(wèn)題。極大提升了開(kāi)發(fā)效率！React-native中存在的問(wèn)題目前運(yùn)用react-native開(kāi)發(fā)會(huì)帶來(lái)的問(wèn)題需求特別關(guān)注：React學(xué)習(xí)本錢(qián)高。不像往常的Hybird方案，只需多學(xué)幾個(gè)JSAPI就可以開(kāi)場(chǎng)干活了