React-Native 是什么
????React Native產(chǎn)出的并不是“網(wǎng)頁應(yīng)用”骂因， 也不是“HTML5應(yīng)用”炎咖，也不是“混合應(yīng)用”。 它的最終產(chǎn)品是一個真正的移動應(yīng)用寒波，從使用感受上和用Objective-C或Java編寫的應(yīng)用相比幾乎是無法區(qū)分的乘盼。 React Native所使用的基礎(chǔ)UI組件和原生應(yīng)用完全一致。 你要做的就是把這些基礎(chǔ)組件使用JavaScript和React的方式組合起來俄烁。
React-Native 特點
-
1.性能：
????很多人說 RN 的性能比不上原生的 App绸栅，這個說法是要看具體的場景。 在一般的應(yīng)用場景下 RN 的表現(xiàn)和原生 App 是沒有太大的差別的页屠，一個 App 也不會到處都是復(fù)雜的交互效果粹胯。一些簡單的點綴動畫再加上列表圖片等才是一個 App 最常見的內(nèi)容，這種情況下它們之間的表現(xiàn)是一樣的辰企。 RN 本身只是使用 JS 處理了 UI 渲染之前的一些邏輯风纠，在最終的渲染上其實使用的還是原生的邏輯，尤其是渲染完成之后更是和原生的沒有半點區(qū)別牢贸。
Swift原生應(yīng)用與React-Native應(yīng)用性能對比
https://juejin.im/post/58ca6d5f44d90400682a215c -
2.開發(fā)效率：
????React-Native開發(fā)的UI做到一份代碼能在兩個平臺運行竹观，通常要適配部分代碼只有總代碼的5%。 -
3.組件化開發(fā)：
????React推薦以組件的方式去重新思考UI構(gòu)成潜索，將UI上每一個功能相對獨立的模塊定義成組件臭增，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，最終完成整體UI的構(gòu)建竹习。
????這樣開發(fā)出來的代碼結(jié)構(gòu)清晰誊抛，公用性高、可移植性高整陌，上一個項目的某些組件芍锚，可以很方便的拿來用在下一個項目中使用。 -
4.靈活高效的熱更新：
????用戶不論是使用Android手機還是iPhone手機下載了應(yīng)用蔓榄，開發(fā)者都可以在用戶無感知的情況下加入新頁面并炮，新功能與新的業(yè)務(wù)邏輯
一、架構(gòu)理念
????“Learn once, write anywhere” 甥郑，代表著 Facebook對 react native 的定義：學(xué)習(xí) react 逃魄，同時掌握 web 與 app 兩種開發(fā)技能。 react native 用了 react 的設(shè)計模式澜搅，但UI渲染伍俘、動畫效果邪锌、網(wǎng)絡(luò)請求等均由原生端實現(xiàn)。開發(fā)者編寫的js代碼癌瘾，通過 react native 的中間層轉(zhuǎn)化為原生控件和操作觅丰，比ionic等跨平臺應(yīng)用，大大提高了的用戶體驗妨退。
總結(jié)起來其實就是利用 JS 來調(diào)用 Native 端的組件妇萄，從而實現(xiàn)相應(yīng)的功能。
????如下圖所示咬荷，react native 的跨平臺是實現(xiàn)主要由三層構(gòu)成冠句，其中 C++ 實現(xiàn)的動態(tài)連結(jié)庫(.so)，作為中間適配層橋接幸乒，實現(xiàn)了js端與原生端的雙向通信交互懦底。這里最主要是封裝了 JavaScriptCore 執(zhí)行js的解析，而 react native 運行在JavaScriptCore中罕扎，所以不存在兼容的問題聚唐。
其中在IOS上直接使用內(nèi)置的javascriptcore， 在Android 則使用webkit.org官方開源的jsc.so
二腔召、實現(xiàn)原理
???和前端開發(fā)不同拱层，react native 所有的標(biāo)簽都不是真實控件，JS代碼中所寫控件的作用宴咧，類似 Map 中的 key 值根灯。JS端通過這個 key 組合的 Dom ，最后Native端會解析這個 Dom 掺栅，得到對應(yīng)的Native控件渲染烙肺，如 Android 中<view> 標(biāo)簽對應(yīng) ViewGroup 控件。
???在 react native 中氧卧，JS端是運行在獨立的線程中（稱為JS Thread ）桃笙。JS Thread 作為單線程邏輯，不可能處理耗時的操作沙绝。那么如 fetch 搏明、圖片加載 、 數(shù)據(jù)持久化 等操作闪檬，在 Android 中實際對應(yīng)的是 okhttp 星著、Fresco 、SharedPreferences等。而跨線程通信，也意味著 Js Thread 和原生之間交互與通訊是異步的秆吵。
???可以看出调煎，跨平臺的關(guān)鍵在于C++層横缔，開發(fā)人員大部分時候铺遂，只專注于JS 端的代碼實現(xiàn)。 在原生端提供的各種 Native Module 模塊（如網(wǎng)絡(luò)請求茎刚，ViewGroup控件）襟锐，和 JS 端提供的各種 JS Module（如JS EventEmiter模塊），都會在C++實現(xiàn)的so中保存起來膛锭，雙方的通訊通過C++中的保存的映射粮坞，最終實現(xiàn)兩端的交互。通信的數(shù)據(jù)和指令泉沾，
???React Native 框架內(nèi)部已提供了很多的內(nèi)置組件。如 View妇押、Text 等基本組件跷究，用于一些功能布局的 Button、Picker 等敲霍，用于列表展示的各種 List 組件和對應(yīng) iOS 平臺與 Android 平臺的特定組件俊马、API 等。
三肩杈、預(yù)備知識
有些前端經(jīng)驗的小伙伴學(xué)起 React Native 就像老馬識途柴我，東西都差不多，變來變?nèi)ヒ餐娌怀鍪裁椿印?/p>
ES6扩然、ES7艘儒、ES8：是JavaScript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了夫偶。它的目標(biāo)界睁，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言(class兵拢、箭頭函數(shù)翻斟、解構(gòu)...)
CSS：React Native 的 FlexBox 用來為組件布局的，和 CSS 親兄弟關(guān)系说铃。
JavaScript：用 JavaScript 寫访惜，能不了解一下嗎？ JavaScript 之于 React Native 就如同磚瓦之于摩天大樓腻扇。
React JSX：React 使用 JSX 來替代常規(guī)的 JavaScript债热。JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
React-Navigation：在 web 瀏覽器中, 你可以使用 () 標(biāo)簽作為錨點,在iOS原生應(yīng)用中使用UINavigationController 跳轉(zhuǎn)頁面幼苛，在RN中則是React-Navigation
Mobx：全局的狀態(tài)管理阳柔，移動端開發(fā)中最常見的場景就是，很多頁面會公用登錄人信息蚓峦，如果按照常規(guī)的移動端開發(fā)方式舌剂，就是什么時候用济锄，什么時候從內(nèi)存中取，其實這是有性能消耗的霍转。使用了mobx之后荐绝，只需要在登錄的時候，或者一次用戶信息避消，通過依賴注入低滩，就可以到處使用了
開始學(xué)習(xí) React Native
React Native 社區(qū)相對比較成熟，中文站的內(nèi)容也比較全面岩喷，從入門到進階恕沫，環(huán)境安裝到使用指南，學(xué)習(xí) React Native 推薦從官網(wǎng) reactnative.cn開始纱意。FlexBox 布局婶溯、組件、API 建議在該官網(wǎng)查看偷霉，注意網(wǎng)頁頂部可以切換 React Native 的歷史版本迄委。
1.1 安裝開發(fā)環(huán)境
-
React Native 官網(wǎng)推薦搭建開發(fā)環(huán)境指南傳送門。(記得設(shè)置
App Transport Security Settings类少，允許 http 請求) - 已建立原生項目叙身，將 React Native 集成到現(xiàn)有原生項目傳送門
- 基于第2點，React Native 與原生混編的情況下硫狞，React Native 與原生如何通信傳送門
- 在 IDE 選擇這一點上信轿，不要過多糾結(jié)，個人使用 WebStorm残吩，比較省心虏两。
1.2 生命周期
React Native 提供了多個生命周期函數(shù)，供開發(fā)者作為切入組件生命周期的鉤子（hook）世剖，這樣在對應(yīng)的時間點程序就可以做對應(yīng)的邏輯處理定罢，從而實現(xiàn)相應(yīng)的功能。
class Clock extends React.Component {
// 構(gòu)造函數(shù) 通常進行一些初始化操作 如定義 state 初始值
constructor(props) {
super(props);
}
// 組件已掛載
componentDidMount() {}
// 組件即將被卸載
componentWillUnmount() {}
// 渲染函數(shù)
render() {
return (
<View></View>
);
}
}
1.3 組件間通信
????React Native 開發(fā)最基本的元素就是組件旁瘫，React Native 與 React 一樣祖凫，也會涉及到組件之間的通信，用于數(shù)據(jù)在組件之間的傳遞
Props 與 State
一個組件所有的數(shù)據(jù)來自于 Props 與 State 酬凳，分布是外部傳入的屬性和內(nèi)部狀態(tài)惠况。
Props 是父組件給子組件傳遞數(shù)據(jù)用的，Props 由外部傳入后無法改變宁仔，可以同時傳遞多個屬性稠屠。
// 父組件 傳遞一個屬性 name 給子組件
<Greeting name='xietao3' />
// 子組件使用父組件傳遞下來的屬性 name
<Text>Hello {this.props.name}!</Text>
State ：用來控制組件內(nèi)部狀態(tài)，每次修改都會重新渲染組件。
// 初始化 state
constructor(props) {
super(props);
this.state = { showText: 'hello xietao3' };
}
// 使用 state
render() {
// 根據(jù)當(dāng)前showText的值決定顯示內(nèi)容
return (
<Text>{this.state.showText}</Text>
);
}
// 修改state权埠，觸發(fā) render 函數(shù)榨了，重新渲染頁面
this.setState({showText: 'hello world'});
舉個栗子(如果理解了就跳過吧)：
我們使用兩種數(shù)據(jù)來控制一個組件：props 和 state。 props 是在父組件中指定攘蔽，而且一經(jīng)指定龙屉，在被指定的組件的生命周期中則不再改變。 對于需要改變的數(shù)據(jù)满俗，我們需要使用 state 转捕。
一般來說，你需要在 constructor 中初始化 state 唆垃，然后在需要修改時調(diào)用setState方法五芝。
假如我們需要制作一段不停閃爍的文字。文字內(nèi)容本身在組件創(chuàng)建時就已經(jīng)指定好了辕万，所以文字內(nèi)容應(yīng)該是一個 prop 枢步。而文字的顯示或隱藏的狀態(tài)（快速的顯隱切換就產(chǎn)生了閃爍的效果）則是隨著時間變化的，因此這一狀態(tài)應(yīng)該寫到 state 中蓄坏。
1.4 組件與 API
說到組件就不得不說 React Native 的組件化思想价捧，尼古拉斯 · 趙四 曾經(jīng)說過丑念，組合由于繼承涡戳。簡單來說就是多級封裝嵌套、組合使用脯倚，提高基礎(chǔ)組件復(fù)用率渔彰。
組件怎么用？
授人以魚不如授人以漁推正，點擊這里打開官方文檔恍涂，在左邊導(dǎo)航欄中找到你想使用的組件并且點擊，里面就有組件的使用方式和屬性的詳細(xì)介紹植榕。
1.5 關(guān)于 API
建議寫第一個 Demo 之前把所有 API 瀏覽一遍再沧，磨刀不誤砍柴工，不一定要會用尊残，但一定要知道這些提供了哪些功能炒瘸，后面開發(fā)中可能會用得上。API 列表同樣可以在官網(wǎng)左邊導(dǎo)航欄中找到寝衫。
2顷扩、助力 React Native 起飛
- CodePush
React Native 熱更新的發(fā)動機，接入的時候繞了很多圈圈慰毅，后面發(fā)現(xiàn)接入還挺方便的隘截。CodePush 除了可以使用微軟提供的服務(wù)進行熱更新之外，還可以自建服務(wù)器進行熱更新。
推薦教程：
4婶芭、與原生端通信
填坑：
- 原生端的 Manager 文件如果有 RCT 前綴东臀，在 RN 中引用的時候不要加 RCT。
- 原生 UI 組件的 RCTBubblingEventBlock 類型屬性命名一定要以 on 開頭雕擂，例如 onChange啡邑。
3.2 在 React Native 中發(fā)消息通知給原生端(由于RN調(diào)用原生端是異步的，最好在回調(diào)中通過通知把消息傳遞到具體的類)
3.3 在原生端發(fā)消息通知給 React Native (建議在Manager中寫一個類方法井赌，這樣外部也可以靈活發(fā)送通知)
四.大廠React-Native 實踐
- 京東: [JDReact]
https://www.infoq.cn/article/jd-618-ReactNative-jingdong-practise - 去哪: [Qunar]
http://ued.qunar.com/qrn/ - [攜程技術(shù)中心React Native Meetup活動經(jīng)驗分享]https://blog.csdn.net/liu__520/article/details/52903667
最終分析
隨著React Native的不斷壯大谤逼，可以毫無保留的說React Native是現(xiàn)在和未來很長一段時間移動開發(fā)人員的必備技能。React Native這種模式學(xué)習(xí)成本較高,所以需要前期投入不少時間才能達到較好水平,但是有了一定水準(zhǔn)后,開發(fā)起來它的優(yōu)勢就體現(xiàn)出來了,性能不遜色原生,而且開發(fā)速度也很快仇穗。
同時我們可以關(guān)注的是鏈接-使用React Native的各大app流部，百度，騰訊纹坐，京東包括國外的FaceBook枝冀，Instgram等優(yōu)秀的app都在使用React Native。
[Native耘子、Hybrid果漾、React Native、Web App方案的分析比較]
