React Native學(xué)習(xí)

React Native

1.React Native之了解

1.1 Native開發(fā)優(yōu)勢:

  • Native的原生控件有更好的體驗；
  • Native有更好的手勢識別；
  • Native有更合適的線程模型，盡管Web Worker可以解決一部分問題，但如圖像解碼、文本渲染仍無法多線程渲染，這影響了Web的流暢性。

1.2 React Native優(yōu)勢:

  • 1.既擁有Native的用戶體驗、又保留React的開發(fā)效率(RN通過JavaScript Core解析JavaScript模塊，轉(zhuǎn)換成原生Native組件渲染)
  • 2.React Native基本完成了對多端的支持，可以靈活的使用HTML和CSS布局,使用React語法構(gòu)建組件,實現(xiàn)：H5, Android, iOS多端代碼的復(fù)用
  • 3.追求極致的用戶體驗：實時熱部署(CodePush在修復(fù)一些小問題和添加新特性的時候，不需要經(jīng)過二進制打包，可以直接推送代碼進行實時更新。)
  • 4.UI排版的問題:
    類似HTML + CSS的排版使用原生控件渲染的框架:
    BeeFramework,BeeFramework雖然開源多年，而且有2000多的star數(shù)，但是受限于它自身的影響力以及框架的復(fù)雜性，一直沒有很大的成功。
    React Native采用了類似HTML + CSS的排版,可以內(nèi)嵌到模塊，也可以全局使用，定義樣式變得非常簡單通用。引入了Flexbox布局，使用很方便，學(xué)習(xí)起來也更簡單。
  • 5.動態(tài)綁定，這個React的基本功能，被帶到了客戶端開發(fā)中來，數(shù)據(jù)和視圖是動態(tài)綁定的，數(shù)據(jù)發(fā)生變化，視圖會跟著變化，很多操作視圖的代碼都可以省略了。
  • 6.引入了方便的npm管理，有大量現(xiàn)成的nodejs包可以用（例如moment，underscore等常用模塊），還可以把自己項目模塊搞到內(nèi)部npm上做通用組件，另外，npm上還有不少別人寫的react native的插件。
  • 7.第三方組件里有一個可以把icon font引入項目的組件，可以在任何顯示圖標(biāo)的地方直接用icon font顯示
  • 8.調(diào)試很方便，一次編譯后，每次改了js代碼，只需要在模擬器里command+R即可重新加載代碼。有問題會直接報錯，里面有代碼行數(shù)等詳細信息。
  • 9.完整封裝了各種js內(nèi)置的方法，例如：setTimeout，setInterval，XMLHttpRequest，localstorage，console.log等，都是用oc原生方法封裝的。
  • 10.引入ES6的支持，可以使用各種新特性，例如最常用的箭頭函數(shù)，解決this作用域亂套的問題。

1.3 React Native是什么?

基本概念
基本概念

Facebook于2015年9月15日發(fā)布React Native
廣大開發(fā)者可以使用JavaScript和React開發(fā)跨平臺移動應(yīng)用.
React Native提倡組件化開發(fā):即提供一個個封裝好的組件，組件相互嵌套形成新的組件

1.4 React Native開發(fā)注意事項

目前react native在iOS上僅支持iOS8以上，Android僅支持Android4.1以上版本；
由于React Native的版本更新速度很快，如果沒有深厚的JavaScript基礎(chǔ)，建議選擇：
功能適中，交互一般，不需要特別多的系統(tǒng)原生支持；
對于部分復(fù)雜的應(yīng)用，可以考慮原生+React Native混合開發(fā)

1.5 React Native開發(fā)環(huán)境:

參考中文React Native網(wǎng)站:
React Native開發(fā)環(huán)境配置

2.React Native之學(xué)習(xí)

2.1 FlexBox布局:

彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性布局”，旨在通過彈性的方式來對齊和分布容器中內(nèi)容的空間，使其能適應(yīng)不同屏幕，為盒裝模型提供最大的靈活性。
Flex布局主要思想是：讓容器有能力讓其子項目能夠改變其寬度、高度（甚至是順序），以最佳方式填充可用空間；
Flex學(xué)習(xí)入門網(wǎng)站:Flex布局教程
flex基本概念:

flex基本概念

  • 采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
  • 容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
  • 項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
  • flex常用屬性總結(jié):
  • 容器屬性:
    flex-direction(主軸方向)
    flex-wrap(是否換行)
    justify-content(item在主軸對齊方式) ,
    align-items(item在交叉軸上如何對齊) ,
  • 元素屬性:
    Flex:彈性寬度:寬度=item該flex值/該容器所有item的flex和*(容器寬度-該容器item沒有設(shè)置flex的直接寬度)
    align-self:性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性

2.2 Touchable系列組件:

  • 高亮觸摸TouchableHighlight:
    當(dāng)手指點擊按下的時候，該視圖的不透明度會進行降低同時會看到相應(yīng)的顏色，其實現(xiàn)原理則是在底層新添加了一個View。TouchableHighlight只能進行一層嵌套，不能多層嵌套。
  • 常用屬性：
    activeOpacity number設(shè)置組件在進行觸摸的時候，顯示的不透明度(取值在0-1之間)
    onHideUnderlay function方法當(dāng)?shù)讓颖浑[藏的時候調(diào)用
    onShowUnderlay function方法當(dāng)?shù)讓语@示的時候調(diào)用
    style可以設(shè)置控件的風(fēng)格演示，該風(fēng)格演示可以參考View組件的style
    underlayColor當(dāng)觸摸或者點擊控件的時候顯示出的顏色
  • 不透明觸摸TouchableOpacity
    該組件封裝了響應(yīng)觸摸事件；當(dāng)點擊按下的時候，該組件的透明度會降低。等等
代碼示例
style={styles.button}
source={require('./button.png')}
/>

style={styles.button}
source={require('image!myButton')}
/>

2.3組件生命周期:

基本概念
基本概念
  • 一:實例化階段函數(shù)分析:
1,getDefaultProps

初始化一些默認的屬性，通常會將固定的內(nèi)容放在這個函數(shù)中進行初始化和賦值；
可以利用this.props獲取組件在這里初始化它的屬性，組件自己不可以自己修改props（即：props可認為是只讀的）

2,getInitialState

用于對組件的一些狀態(tài)進行初始化；在以后的過程中，會再次調(diào)用，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化，如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值,一旦調(diào)用了this.setState方法，組件一定會調(diào)用render方法，React框架會自動根據(jù)DOM的狀態(tài)來判斷是否需要真正的渲染。

3,componentWillMount

相當(dāng)于OC中的ViewWillAppear方法.

4,render

render是一個組件中必須有的方法，本質(zhì)上是一個函數(shù)，并返回JSX或其他組件來構(gòu)成DOM，和Android的XML布局類似，注意：只能返回一個頂級元素;可通過this.state和this.props數(shù)據(jù)。

5,componentDidMount

在調(diào)用了render方法后一般會在這個函數(shù)中處理網(wǎng)絡(luò)請求等加載數(shù)據(jù)的操作；因為UI已經(jīng)成功被渲染出來，所以放在這個函數(shù)里進行請求操作，不會出現(xiàn)UI上的錯誤。

  • 二,存在期階段函數(shù)功能分析:
componentWillReceiveProps

指父元素對組件的props或state進行了修改

shouldComponentUpdate

一般用于優(yōu)化，可以返回false或true來控制是否進行渲染

componentWillUpdate

組件刷新前調(diào)用，類似componentWillMount

componentDidUpdate

更新后的hook

  • 三、銷毀期階段函數(shù)功能分析:
    用于清理一些無用的內(nèi)容，如：點擊事件Listener，只有一個過程：componentWillUnmount

2.4請求網(wǎng)絡(luò)數(shù)據(jù):

  • React Native中通常是通過Ajax (異步的JavaScript和XML)請求從服務(wù)器獲取數(shù)據(jù)，然后在componentDidMount方法中創(chuàng)建Ajax請求，等到請求成功，再用this.setState方法重新渲染UI。

2.5 OC, Recat Native混合開發(fā):

  • 直接在iOS項目中寫代碼就能實現(xiàn)OC,reactNative混合開發(fā),在需要引入React Native的位置引用該模塊即可
    AppDelegate.m部分代碼
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"TGMeituan"
initialProperties:nil
launchOptions:launchOptions];

index.ios.js部分代碼

AppRegistry.registerComponent('TGMeituan', () => TGMeituan);

xcode的代碼引用了index.ios.js文件中的'TGMeituan',
index.ios.js其輸出了index.ios.js定義的一個TGMeituan組件
AppDelegate.m中在合適的位置引用rootView,即可實現(xiàn)混合開發(fā)

export default class TGMeituan extends Component {
       render() {
                  return ();
       }
}

2.6 ES5和ES6的React Native差異化:

  • 區(qū)別1：創(chuàng)建組件




    組件是一個自定義的js對象，在es5中使用React.createClass()；在es6中必須繼承React.component，

  • 區(qū)別2：組件的屬性props




    在ES6中，其為屬性：defaultProps(可以標(biāo)識static定義在class內(nèi)，也可以定義在class外)，而在ES5中，其為方法：getDefaultProps: function(){return {name:value}};

  • 區(qū)別3：組件的狀態(tài)state




    上圖左為ES5 ,右為ES6

2.7 React Native不足:

組件不全，第三方組件也不全，遇到某些特殊功能，需要搗鼓很久，例如攝像相關(guān)的，文件讀寫，文件上傳之類的組件。
性能并非媲美原生，還是有一些損耗的，特別是交換大數(shù)據(jù)的時候，例如讀取相冊。
ios和android代碼并非通用，有可能會需要維護兩套，或者在代碼內(nèi)做一些判斷。
并非網(wǎng)上大家說的，寫一次代碼，多端通用，網(wǎng)頁版和客戶端版完全不是一個概念，只有部分代碼可重用。
把代碼都打包到bundle里面，不知道蘋果對這種開發(fā)方式是否會不太喜歡，甚至拒絕上線。
打包出來的JSBundle過大；
首次進入RN頁面加載緩慢；
穩(wěn)定性不夠，有大量因為RN導(dǎo)致的Crash:
iOS的Crash，基本都來自RCTFatalException，都是RCTFatal拋出錯誤信息所知，處理也相對簡單，設(shè)置自己的Error Handler即可。
void RCTSetFatalHandler(RCTFatalHandler fatalHandler);
大數(shù)據(jù)量時ListView加載卡頓。

3.ListView重用優(yōu)化

3.1 ListView不能重用的原因

首先RN的ListView其實是基于RN的RCTScrollView來實現(xiàn)的。它也實現(xiàn)了類似UIKit中通過DataSource來控制數(shù)據(jù)，以及是否要做一些界面的刷新



這個View會有一個RCTView會引用它。當(dāng)這個View被移出屏幕之外，再觀察他的內(nèi)存引用時，它就只被RCTUIManager引用了:
RN為了能夠保持一定的UI上的性能，他用UImanager來管理所有的UI元素，只要創(chuàng)建過的，還有可能被顯示在界面上的東西，他都用這個UImanager來去管理，從而在進行Dom Diff時能夠減少View的創(chuàng)建和銷毀。

3.2 ListView多做了什么？

然后，我們再來看看ListView本身比RCTScrollView多做的哪些東西，首先ListView包含兩個屬性—- initialListSize和pageSize，initialListSize決定了第一屏加載item的數(shù)量，pageSize則是當(dāng)你需要加載更多的時候，每次需要載入多少的item，這樣做的主要目的在盡量減少你手機加載第一屏?xí)r所需要的時間。
還有就是它還實現(xiàn)了從JS端實現(xiàn)了Section Header，Header，F(xiàn)ooter的封裝，以及實現(xiàn)了監(jiān)聽onScroll事件，隨著View的滾動動態(tài)的添加row view。

3.3那么ListView相當(dāng)于UITableView少了一點什么呢？

怎么沒有提到復(fù)用？


我們先看一下iOS的JS，JS里面只有一行代碼

module.exports = require('ScrollView');

3.4 ListView性能優(yōu)化解決方案

Bridge一個UITableView

在RN中我們要bridge一個RN的View組件，我們需要實現(xiàn)RCTComponent這個protocol，這里有兩個很重要的方法

- (void)insertReactSubview:(id)subview atIndex:(NSInteger)atIndex;
- (void)removeReactSubview:(id)subview;
這兩個方法是RN做Dom Diff的關(guān)鍵

什么是Dom Diff呢
在界面發(fā)生變化前，界面存在一個Dom Tree，發(fā)生業(yè)務(wù)變化之后是另外一個Dom tree，Tree中的每個元素都有自己的引用值，Diff其實就是找出兩個Tree的差異點來確定需要進行更新的節(jié)點。最終確定一個需要插入和刪除的View的列表，并通知相應(yīng)的Dom節(jié)點來處理。


但是RN的UI處理方式和原生對UI處理完全不一樣，我們?nèi)绾蜝ridge一個TableView呢，我們想到了一個方法。
我們創(chuàng)建一些VirtualView，他只是遵從了RCTComponent協(xié)議，他其實并不是一個真正的View，我把它形成一個組件，把它Bridge到JS，這就使得，你在寫JSX的時候，就可以直接用VirtualView來去做布局了。在RN里面做布局的時候我們用VirtualView來做布局。但是最終在insertReactSubview時，我們把這些VirtualView當(dāng)做數(shù)據(jù)去處理，通過VirtualView和RealView的對應(yīng)關(guān)系，把它轉(zhuǎn)化成一個真實的View對象添加到TableView中去。
用這個圖來說，更清晰一些。


首先我們寫的是一個JSX，React把它轉(zhuǎn)化成Dom Tree，在進行Dom Diff后，React會調(diào)用insertReactSubview傳入VirtualView，我們通過VirtualView生成Tree Data，
通過VirtualView和RealView的對應(yīng)關(guān)系，我們創(chuàng)建RealView去真正的添加到原生的View上。
但是這里又產(chǎn)生另外一個問題，大家會自定義一個cell的一個對象來去做的。這個對象，能夠接收你特定的數(shù)據(jù)，對這個cell重新去set一些控件的值，然后把界面更新。
但是在JS里面我們并沒有辦法這樣做，在RN中，我們不可能動態(tài)的去往Native里面去加一個類。
那么我們是如何做到，在復(fù)用的時候?qū)τ贑ell上面的子View能夠去設(shè)置更新他的數(shù)據(jù)？


我們在所有子view上面我們也加上了tag屬性，在更新數(shù)據(jù)的時候我們通過tag找到更新的子view上面的view對他做數(shù)據(jù)的更新的。所以并不是只有Cell有這樣的tag，包括子view也會有這樣的tag，這樣就做到了可以獲取到對應(yīng)tag的子view并對子view的數(shù)據(jù)進行更新。


最后，為了客戶端的同學(xué)在使用這個TableView時更好上手一些，我們把幾乎整套的TableViewDataSource方法，全部照搬到了RN中，所以我們在創(chuàng)建這個ListView的時候我們需要去設(shè)置很多的回調(diào)方法，這樣做也是為了能夠更快的做一些界面的遷移工作。

3.5 ListView性能優(yōu)化解決方案的缺點

首先既然它需要做映射，我們肯定需要做一個Virtualview到NativeView，大多數(shù)的cell里面如果做展示來用的話，Label和Image基本上能夠滿足大多數(shù)的需求了。所以我們現(xiàn)在只是做了Label和Image的對應(yīng)工作，但在RN的一些官方控件，在這個view里面都是沒法直接使用的。
還有一個缺點就是說，因為我們是按照TableView的邏輯去做的，這個邏輯其實在Android上可能不適用，因為Android的ListView實現(xiàn)跟iOS完全不是一個邏輯，導(dǎo)致使用這個ListView的RN代碼，可能沒法直接應(yīng)用到Android里面去。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容