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

2017.12.01ReactNative實(shí)踐廈門國(guó)貿(mào)IT部-楊閩目錄2一：React、ReactJS、ReactNative簡(jiǎn)介二：ReactNative思想、方法論、實(shí)踐三：ReactNative實(shí)踐項(xiàng)目(ios與android)四：總結(jié)React簡(jiǎn)介Facebook于2013年推出React框架，2015年推出ReactNative框架。React是基礎(chǔ)框架，是一套基礎(chǔ)設(shè)計(jì)實(shí)現(xiàn)理念。開(kāi)發(fā)者不能直接使用它來(lái)開(kāi)發(fā)移動(dòng)應(yīng)用或者網(wǎng)頁(yè)。在它之上發(fā)展出了React.js框架用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)，之后發(fā)展出了ReactNative用來(lái)開(kāi)發(fā)移動(dòng)應(yīng)用。因?yàn)镽eact基礎(chǔ)框架與React.js框架是同時(shí)出現(xiàn)，同時(shí)進(jìn)化發(fā)展，這造成了React基礎(chǔ)框架的基本概念，設(shè)計(jì)思想都是在React.js的相關(guān)文檔中描述。Facebook推出ReactNative后，也沒(méi)有把React相關(guān)的概念文檔從React.js文檔中分離出來(lái)。這就造成了學(xué)ReactNative要去看React.js文檔，說(shuō)ReactNative不時(shí)會(huì)說(shuō)到React.js的情況。3React抽象的精髓4ReactJS思想本質(zhì)VirtualDOM毫無(wú)疑問(wèn)是React的精髓（通過(guò)JS對(duì)象模擬原生DOM，用DOMDiff極大提升了DOM操作的性能）React.JS的本質(zhì)是一套Component的復(fù)用機(jī)制采用它的好處：幾乎所有基于樹(shù)形方式組織的UI，都可以得益于React.JS的VirtualDOM所帶來(lái)的性能提升。一旦你開(kāi)始用React.JS，你會(huì)發(fā)現(xiàn)傳統(tǒng)Web開(kāi)發(fā)方法在遠(yuǎn)離你。你更多地考慮通過(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，展示電影列表信息，點(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，展示書(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ù)雜用戶體驗(yàn)差中優(yōu)發(fā)版審核不需要需要（可做增量）需要安裝部署免安裝需要（可做增量）安裝跨平臺(tái)性優(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)行性能會(huì)更好；2.?采用了類似cssflexbox的布局理念完成頁(yè)面布局；3.?擴(kuò)展性更強(qiáng)，Native端提供的是基本控件，JS可以自

由組合使用，前端工程師和客戶端工程師各司其職；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ā)的基礎(chǔ)工具包基于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，可做布局效果預(yù)覽和代碼斷點(diǎn)調(diào)試；4.?IDE：推薦使用atom，能非常方便的集成各種工具，同時(shí)語(yǔ)法檢測(cè)和智能提醒也很完備react

native項(xiàng)目構(gòu)建1.react-nativeinitAwesomeProject；2.安裝chrome調(diào)試插件：ReactDeveloperTools；3.Win系統(tǒng)下，andorid需要執(zhí)行：react-nativerun-android啟動(dòng)運(yùn)行4.MAC系統(tǒng)下，Xcode中打開(kāi)ios/AwesomeProject.xcodeproj啟動(dòng)運(yùn)行5.在文本編輯器中打開(kāi)index.js并且編輯代碼；6.在安卓模擬器中按R兩次重新加載應(yīng)用程序并且觀察發(fā)生的變化；7.在iOS模擬器中按?-R重新加載應(yīng)用程序并且觀察發(fā)生的變化；react

native需要掌握J(rèn)avascript基礎(chǔ)ES6語(yǔ)法【箭頭函數(shù)、Promise】React基礎(chǔ)/JSX語(yǔ)法【JSX有點(diǎn)像XML與HTML的混合】Flexbox布局Flux思想，Redux作為業(yè)務(wù)/數(shù)據(jù)框架【單項(xiàng)數(shù)據(jù)流】第三方類庫(kù)ES6特性Promise異步開(kāi)發(fā)布局：Flexboxflex布局詳解react-native項(xiàng)目的工程結(jié)構(gòu)分析-1

react-native項(xiàng)目的工程結(jié)構(gòu)分析-2

react-native項(xiàng)目的工程結(jié)構(gòu)分析-3

react-native項(xiàng)目的調(diào)試

Reactnative生命周期react-native中的通信機(jī)制MVC的架構(gòu)實(shí)現(xiàn)經(jīng)典的MVC結(jié)構(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ā)模式通過(guò)嚴(yán)格的控制數(shù)據(jù)的更新來(lái)實(shí)現(xiàn)單向數(shù)據(jù)流，強(qiáng)調(diào)數(shù)據(jù)自上而下傳遞的單向流動(dòng)理念，從而更清晰的掌握數(shù)據(jù)的改變方式及相應(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è)：分類展現(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)：/MAC電腦下XCODE軟件，上傳簽名打包文件。2：Android端：國(guó)內(nèi)電子市場(chǎng)

主流：阿里應(yīng)用分發(fā)平臺(tái)/、小米開(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前端，還是客戶端前端（大前端）。2.React做組件化：提供抽象的界面層，最大程度的實(shí)現(xiàn)組件的組合與復(fù)用3.更靈活的布局：實(shí)現(xiàn)一個(gè)CSS的子集去解決傳統(tǒng)native應(yīng)用開(kāi)發(fā)中布局不統(tǒng)一和不靈活的問(wèn)題。極大提升了開(kāi)發(fā)效率！React-native中存在的問(wèn)題目前使用react-native開(kāi)發(fā)會(huì)帶來(lái)的問(wèn)題需要特別關(guān)注：React學(xué)習(xí)成本高。不像往常的Hybird方案，只要多學(xué)幾個(gè)JSAPI就可以開(kāi)始干活了。但React的組件化會(huì)后續(xù)開(kāi)發(fā)變得簡(jiǎn)單了一些。功能擴(kuò)展：許多功能擴(kuò)展和性能優(yōu)化的實(shí)現(xiàn)，需要和native開(kāi)發(fā)工程師配合完成發(fā)展現(xiàn)狀，需要原生開(kāi)發(fā)經(jīng)驗(yàn)。3.發(fā)展現(xiàn)狀：多由于起步較晚，目前業(yè)內(nèi)成熟的應(yīng)用除了facebook和天貓等線上產(chǎn)品，還較少。安卓支持性有待提高。寫(xiě)在最后ReactNative不是萬(wàn)能的，技術(shù)選擇有時(shí)是程序員個(gè)人的信仰。能解決需求的，代價(jià)不高的都是好方案。應(yīng)用之美在于藥到病除。9、春去春又回，新桃換舊符。在那桃花盛開(kāi)的地方，在這醉人芬芳的季節(jié)，愿你生活像春天一樣陽(yáng)光，心情像桃花一樣美麗，日子像桃子一樣甜蜜。2月-252月-25Monday,February3,202510、人的志向通常和他們的能力成正比例。17:03:4617:03:4617:032/3/20255:03:46PM11、夫?qū)W須志也，才須學(xué)也，非學(xué)無(wú)以廣才，非志無(wú)以成學(xué)。2月-2517:03:4617:03Feb-2503-Feb-2512、越是無(wú)能的人，越喜歡挑剔別人的錯(cuò)兒。17:03:4617:03:4617:03Monday,February3,202513、志不立，天下無(wú)可成之事。2月-252月-2517:03:4617:03:46February3,202514、ThankyouverymuchfortakingmewithyouonthatsplendidoutingtoLondon.ItwasthefirsttimethatIhadseentheToweroranyoftheotherfamoussights.IfI'dgonealone,Icouldn'thaveseennearlyasmuch,becauseIwouldn'thaveknownmywayabout