React-Native

RN作為H5的下一代跨平臺方案，風(fēng)頭正勁。用UC震驚部的話來說：沒有研究過RN，都不好意思說自己做過客戶端?，F(xiàn)在還不了解學(xué)習(xí)React-Native，你就要快老了！
好了，拋開標(biāo)題的噱頭。寫下這篇文章的主要目的，還是作為自己的一個學(xué)習(xí)記錄與匯總，同時對RN的踩坑與學(xué)習(xí)的經(jīng)驗(yàn)進(jìn)行分享，總結(jié)ES 6的常用語法，頁面的生命周期與相關(guān)的一些學(xué)習(xí)資料。讓其他客戶端開發(fā)者能快速的對React-Native進(jìn)行接入與學(xué)習(xí)。文章包含以下內(nèi)容：

  • 為什么使用RN
  • RN的簡單用例
  • ES 6語法
  • RN的生命周期
  • 坑點(diǎn)匯總

為什么選擇RN

其實(shí)在一開始我也曾思考過這個問題。既然現(xiàn)在已經(jīng)有成熟的H5方案了，為什么還要選擇RN？
最根源的想法還是來自于H5的痛點(diǎn)。頁面的交互性差，數(shù)據(jù)緩存，回傳回調(diào)困難。在使用過程中也難以滿足用戶所需的多元化功能與快速響應(yīng)的速度。面對這種情況，以往我們只能委屈求全，摘掉一些耗時長，操作復(fù)雜的功能。亦或是舍棄使用H5，最后改由客戶端實(shí)現(xiàn)，已達(dá)到最好的用戶體驗(yàn)。其次，也是作為一個技術(shù)的自我學(xué)習(xí)心態(tài)的驅(qū)使。React-Native作為編寫Hybrid APP的新思路，不管項目需要接入與否，我們都有必要去學(xué)習(xí)與了解其中的原理和使用。即作為一個知識儲備，也能更好的學(xué)習(xí)里面的新思想。作為一個客戶端開發(fā)者，Redux的設(shè)計給我的思考與收獲也是很大的。

總結(jié)下來，RN具有以下優(yōu)勢：

  1. 運(yùn)行性能更好，調(diào)用原生組件。
  2. 采用了css，flexbox的布局模式，方便開發(fā)。
  3. 比起 Hybird 擴(kuò)展性更強(qiáng)，自由度更高，交互體驗(yàn)更好。
  4. 支持應(yīng)用熱更新與遠(yuǎn)程調(diào)試。
  5. 展示復(fù)雜的高階動畫，能通過原生平臺編寫，更少卡頓。
  6. 大部分代碼都可跨平臺，易于維護(hù)。
  7. 和weex相比，社區(qū)環(huán)境更優(yōu)秀，也有更多成熟的應(yīng)用使用RN方案。

RN的簡單用例

以下是RN最簡單的樣例，分為三部分組成：
1.對象、組件的導(dǎo)入
2.樣式的聲明
3.組件的使用與樣式引入
4.注冊入口類。將與Native中代碼的設(shè)置對應(yīng)（這里為'rn'）。

// 1
import React, { Component } from 'react';
import {
    AppRegistry,
    Text,
    Button,
    View,
    TouchableHighlight,
    Image,
        StyleSheet,
} from 'react-native';

// 2
const style = StyleSheet.create({
    centerSelf:{
        alignSelf: 'center',
    },
    centerJustify:{
        justifyContent: 'center',
    },
    centerItems:{
        alignItems: 'center',
    },
    red:{
        backgroundColor: 'red',
    },
});

// 3
class HelloWorldApp extends Component {
  componentDidMount(){ // 頁面加載后
    // do something...
  }
  render() {
    return (
      <View style={[{flex:1}, style.red, style.centerItems, style.justifyContent]}>
            <Text style={[{fontSize: 20}, {fontWeight: "bold"}]}>Hello ，?? !</Text>
      </View>
    );
  }
}

// 4 注意，這里用引號括起來的'rn'必須和你init創(chuàng)建的項目名一致
AppRegistry.registerComponent('rn', () => HelloWorldApp);

可以看出其實(shí)RN的組件與樣式的使用與H5的標(biāo)簽的使用非常相似。只要在給style傳入樣式，就可以實(shí)現(xiàn)布局了。上述代碼的效果也很簡單，只有 View 與 Text 兩個組件。
外層 View 大小隨外層大小變化并填充滿(flex:1)。同時 View 的背景為紅色(backgroundColor: 'red')。他的子組件將會水平居中(alignItems: 'center')與垂直居中(justifyContent: 'center')。嚴(yán)格說來應(yīng)該是主軸與次軸居中，RN中組件可以設(shè)置豎直或水平方向?yàn)橹鬏S。
內(nèi)層為 Text 組件內(nèi)容顯示為 粗體，黃色 的 Hello ，?? !。

從上不難看出RN的樣式其實(shí)就是傳入配置json。使其使用起來和H5類似。因此，當(dāng)多個樣式同時使用時需要用數(shù)組傳入。

style = {style.red} // 傳入樣式對象
style = {{fontSize: 20}} // 編寫傳入對象
style = {[style.red, style.centerItems]} // 傳入多個樣式則通過數(shù)組配置

RN的頁面生命周期也與客戶端類似，有各種加載與渲染的過程，如// 3 中的componentDidMount，與iOS的 ViewDidLoad 用法類似。下面就讓我們來認(rèn)識一下React-Native組件的生命周期。

RN 的組件生命周期

引用地址：https://race604.com/react-native-component-lifecycle/

主要分為 Mounting（加載）, Updating（更新）, Unmounting（卸載）過程。Mounting操作在組件實(shí)例化的時候?qū)⒈徽{(diào)用，Updating會在組件 props 或 state 變化的時候調(diào)用，而Unmounting則負(fù)責(zé)頁面銷毀。

Mounting

組件實(shí)例化時以下函數(shù)會被調(diào)用或插入 Dom 樹。加載過程如上述流程圖的最上側(cè)框圖。

Updating

一般當(dāng)屬性或組件狀態(tài)變化的時候會觸發(fā)，以下方法會在組件重新渲染的時候調(diào)用。更新調(diào)用鏈如上述流程圖左下側(cè)框圖。

Unmounting

在組件 Dom 樹刪除時調(diào)用。卸載調(diào)用鏈如上述流程圖右下側(cè)框圖。

ES6 常用語法

定義組件

ES 6與ES 5定義組件的代碼有很大變化，ES 6終于有了類的聲明，也讓我們看順眼多了。為了代碼的維護(hù)和使用，已經(jīng)不再建議使用ES 5的語法了。

// ES5 的用法，不建議
var View  = React.createClass({
    render(){
      // 輸出變量
      return (<Text>Hello，{this.props.name}！<Text />);
    }
})；

// ES6
class View extends React.Component{
    render(){
      //  跨組件傳值
      return (<React.View title='頁面'  state=...this.props.route />);
    }
}

屬性初始化與校驗(yàn)

ES 6類屬性的初始化建議在構(gòu)造函數(shù)中constructor實(shí)現(xiàn)。其中也提供了一個屬性propTypes，用以校驗(yàn)?zāi)硞€變量是否必要。使用如下：

class MyView extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
          color: props.initialColor
        };
    }

   //  默認(rèn)值（組件不傳遞值過來的時候）
   static defaultProps = {
       name: "bilibili",
       nick: "2333",
   }

   // propTypes用于驗(yàn)證轉(zhuǎn)入的props，當(dāng)向 props 傳入無效數(shù)據(jù)時，JavaScript 控制臺會拋出警告
   static propTypes = {
      name: React.PropTypes.string.isRequired,
      nick: React.PropTypes.number.isRequired,
   }

   state = {
      city: this.props.city,
      index：this.props.index,
   }
}

導(dǎo)入與導(dǎo)出

ES 6 另一個讓我覺得便利的地方就是，新的導(dǎo)出方式。不再像以前一樣，需要用類似module.exports={xxx}這樣一點(diǎn)也不美觀的方式導(dǎo)出。并且別名與通配符的使用也很好的防止了變量的沖突與導(dǎo)出。

//ES5
//接收對象
var o = require('../xx/xx.js'); // 模塊導(dǎo)入
module.exports={                // 模塊導(dǎo)出
    add:add,
    sub:sub
}

//ES6
// 按照變量名導(dǎo)入
import {* as all , userInfo，userToken as uToken，userXXX} form 'test.js';
// 默認(rèn)導(dǎo)入
import xxx form 'test.js';       //  導(dǎo)入用 default 修飾的默認(rèn)對象
export {
  info as userInfo,              // 別名
  token as userToken,
  xxx as userXXX 
};
export default { abcde };        // 默認(rèn)導(dǎo)出

塊級變量let

在這里提出的主要原因是他和我們客戶端常見所理解的let不大一樣，并不是代表常量的意思（swift，kotelin）。而是代表塊級變量（js里常量是const），生命周期只在代碼塊里有效。雖然塊級變量在很多語言中都已很常見，但原js中并沒有提供塊級變量的使用。而var是全局可用的。這里提出避免誤用。

// var 容易造成的問題
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10,如果把 i 聲明為 let，則輸出為6

其他

以下是一些曾令我疑惑的語法，不一定屬于ES 6的新特性。但同屬js的語法，因此放在ES 6常見特性的最后。

// 重點(diǎn)在于 state=...this.props.route,相當(dāng)于把所有命名一致的變量傳入
<React.View title='頁面'  state=...this.props.route />


// 類似的
const {name,type}  = this.items;
//等價于下面
const name = this.items.name;
const name = this.items.type;

坑點(diǎn)匯總

坑點(diǎn)的匯總主要分為兩各部分，框架踩坑與語言特性踩坑。

框架踩坑

1.接入坑點(diǎn)

因?yàn)镽N的迭代速度有點(diǎn)快，官方文檔往往更不上代碼的變動速度。Stack Overflow里面相對的解決方案也比較少，且適用性隨版本變化。因此，很多坑不能在網(wǎng)絡(luò)資源中獲得答案，而是要在GitHub里的issue，在對應(yīng)問題中一般都能找到前人的填坑記錄。

其中，最常見的問題便是<jschelpers/...> not find!。但在不同版本中，但原可能不同。
0.45版本 RN 需要引入 BatchedBridge，不然運(yùn)行會出現(xiàn)類似報錯。而雖然 0.40版本下也會出現(xiàn)這個問題，但原因是 CocoaPod 需要升級到最新版，把1.1版本升到1.2.1就可以解決了。（其他版本未測試過）

    #根據(jù)實(shí)際路徑修改下面的`:path`
    pod 'React', :path => '../node_modules/react-native', :subspecs => [
      'Core',
      'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發(fā)者菜單
      'RCTText',
      'RCTNetwork',
      'RCTWebSocket', 
      'BatchedBridge',   # 0.45 需要添加這行
      'RCTImage',
    ]
    
    # 如果你的RN版本 >= 0.42.0，請加入下面這行
    pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

2.第三方庫使用

類似的，在使用第三方庫的時候，第三方庫不一定會隨著RN的跟新做出變化。

  • React-Native link 這個方便的命令有時候用起來就會莫名的惱火。可以的話，第三方庫還是通過 CocoaPod 手動引入的好。React-Native link 容易遇到的問題一般是找不到 <React/xxx.h> not find!。 遇到這類問題，一些文章會建議把第三方尖括號<React/xxx.h>引用改成引號"React/xxx.h"。但這樣改動太大，且不便于操作。

  • 在我研究對比RN0.39和0.40的配置區(qū)別后，發(fā)現(xiàn)主要是xcode 項目配置Alaways Search User Paths導(dǎo)致的。因此，在第三方庫的Header Search Paths加入CocoaPod的Pod目錄Public里的React文件夾作為搜索路徑就好了(0.45在Development文件夾里)。同時需要把第三方庫的Alaways Search User Paths設(shè)成 YES 。

</br>

語言特性踩坑

1.沒有宏定義

全局變量無法當(dāng)做宏定義使用，沒有預(yù)編譯。全局變量需要運(yùn)行后才有值，無法在 import 里面當(dāng)路徑宏使用。

2.引入的資源必須用靜態(tài)路徑

Require 圖片資源時必須為靜態(tài)路徑，因?yàn)閞equire是在編譯時期執(zhí)行，而非運(yùn)行時期執(zhí)行。這個動作會發(fā)生在運(yùn)行之前。如果你使用了變量，打包的時候變量并不會有值。RN會給你報錯。

3.編譯檢錯

只有語法補(bǔ)全的插件，即使語法錯誤，運(yùn)行后才能得知運(yùn)行結(jié)果。
例如：
if(...) A(); else (error code)...; 的代碼。測試時，如果不走else的判斷，連語法錯誤都不會檢查。如果是夾雜多個的判斷，進(jìn)行語法檢錯也是需要全部走完。

4.弱類型語言要注意語境

js為弱類型語言且空類型多（如下方第5點(diǎn)所示）。js 判斷時會出現(xiàn)強(qiáng)類型語言考慮之外的情況，編寫的代碼在類型轉(zhuǎn)換的思考上要更為周全。也會出現(xiàn)一些感官上覺得奇怪的代碼,如下所示：

return !!b; // 兩次強(qiáng)轉(zhuǎn)，保證變量返回是 Boolean 類型`
return a==1?a:0 // 沒有寫成a==1?1:0，可能業(yè)務(wù)上結(jié)果會返回字符串和數(shù)字類型，不能確定

5.類型較多對比時容易弄混

容易弄混的有0、-0、null、""、false、undefined或者NaN。
其中：

  • undefined：未定義或未賦值的變量
  • null ：特殊的object類型，為空對象，和swift 的拆包的空盒模型類似。
  • NaN：特殊的number，類似盒子模型拆盒后為空，而不為0。

以下為容易混淆的對比點(diǎn)：


幾個相等的類型（null 不等于 false）

undefined 與 Nan 與 boolean 比較都是false

6.this的作用域問題

this的指向場景會根據(jù)使用情況變化。而對于不熟悉語言的客戶端開發(fā)者來說，會經(jīng)常對指向?qū)ο箦e誤的操作。this的指向場景分別四類：

  • 有對象就指向調(diào)用對象
  • 沒調(diào)用對象就指向全局對象
  • 用new構(gòu)造就指向新對象
  • 通過 apply 或 call 或 bind 來改變 this 的所指。

這個問題的解決，最主要還是了解其中的機(jī)制?？梢詤⒖歼@篇文章《作用域與閉包：this，var，(function () {})》。

附錄

數(shù)值的常見用法和結(jié)果。

用　　法                  結(jié)　　果

Number(false)                  0

Number(true)                   1

Number(undefined)              NaN

Number(null)                   0

Number( "5.5 ")                5.5

Number( "56 ")                 56

Number( "5.6.7 ")              NaN

Number(new   Object())         NaN

Number(100)                    100


parseInt("AF",  16);  //returns  175

parseInt("10",   2);   //returns   2

parseInt("10",   8);   //returns   8

parseInt("10",   10);   //returns   10


Boolean("");  //false  –  empty  string

Boolean("hi");   //true   –   non-empty   string

Boolean(100);   //true   –   non-zero   number

Boolean(null);   //false   -   null

Boolean(0);   //false   -   zero

Boolean(new   Object());   //true   –   object

參考資料：

[1] React-Native官方文檔

[2] React Native 中文網(wǎng)

[3] GitHub: react-native

[4] GitHub: react-redux

[5] React Native 中組件的生命周期

[6]《作用域與閉包：this，var，(function () {})》

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容