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

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

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

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

3.?挪動端有如此眾多成熟的組件庫，能否直接復用？

4.?CSS動畫轉(zhuǎn)場的丟幀和卡頓問題能處理嗎？5.?每個挪動平臺都由本身的特性，一份代碼跑通一切的平臺能否

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

React-native的開發(fā)方式“Learnonce,writeanywhere〞Web/iosandroidVirtualDomReact(JS/JSX)React-native開發(fā)環(huán)境、調(diào)試、IDE1.?Nodejs：react-native開發(fā)的根底工具包基于nodejs搭建，2.?原生開發(fā)環(huán)境：需求安裝好iossdk+xcode和androidsdk進行相關(guān)開發(fā)，可以用模擬器和真機調(diào)試等多種方式；3.?Chrome：基于chrome上安裝react-nativetools，可做規(guī)劃效果預覽和代碼斷點調(diào)試；4.?IDE：引薦運用atom，能非常方便的集成各種工具，同時語法檢測和智能提示也很完備reactnative工程構(gòu)建1.react-nativeinitAwesomeProject；2.安裝chrome調(diào)試插件：ReactDeveloperTools；3.Win系統(tǒng)下，andorid需求執(zhí)行：react-nativerun-android啟動運轉(zhuǎn)4.MAC系統(tǒng)下，Xcode中翻開ios/AwesomeProject.xcodeproj啟動運轉(zhuǎn)5.在文本編輯器中翻開index.js并且編輯代碼；6.在安卓模擬器中按R兩次重新加載運用程序并且察看發(fā)生的變化；7.在iOS模擬器中按?-R重新加載運用程序并且察看發(fā)生的變化；reactnative需求掌握Javascript根底ES6語法【箭頭函數(shù)、Promise】React根底/JSX語法【JSX有點像XML與HTML的混合】Flexbox規(guī)劃Flux思想，Redux作為業(yè)務/數(shù)據(jù)框架【單項數(shù)據(jù)流】第三方類庫ES6特性Promise異步開發(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中的通訊機制MVC的架構(gòu)實現(xiàn)經(jīng)典的MVC構(gòu)造由Model〔模型〕、View〔視圖〕和Controller〔控制〕層構(gòu)成，著重處理軟件設計分層的問題。MVC帶來的問題MVC模型只是確定了單向通訊，但并沒有明晰的規(guī)定數(shù)據(jù)流向，這將導致非常容易出現(xiàn)各種數(shù)據(jù)流向不一致的問題，有時各種數(shù)據(jù)的變化也會引起各種連鎖變化，這都會導致使得數(shù)據(jù)流的控制變得極其困難。Flux開發(fā)方式經(jīng)過嚴厲的控制數(shù)據(jù)的更新來實現(xiàn)單向數(shù)據(jù)流，強調(diào)數(shù)據(jù)自上而下傳送的單向流動理念，從而更明晰的掌握數(shù)據(jù)的改動方式及相應功能的位置。目錄28一：React、ReactJS、ReactNative簡介二：ReactNative思想、方法論、實踐三：ReactNative實踐項目(ios與android)四：總結(jié)React-native的簡單例子React-native的綜合例子APP例子思緒與中心代碼1.APP需求假設：分類展現(xiàn)各種微信公眾號優(yōu)秀文章2：數(shù)據(jù)源：爬取微信公眾號內(nèi)容(python抓取)，并編寫JSON接口〔PHP實現(xiàn)〕供APP調(diào)用。3.APP展現(xiàn)采用React-native技術(shù)。4：用到的第三方：

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

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

主流：阿里運用分發(fā)平臺httpopen.uc/、小米開放平臺等

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