RN開發入門

目錄

1、Packager是什麼？怎麼工作的？

2、圖檔的 base64 資料

3、元件的mount和unmount是什麼時候進行的？

4、 RAM 格式

5、重新整理JavaScipt的方法：

6、函數學習

1、Packager是什麼？怎麼工作的？

Packager即開發伺服器。

要運作應用，首先需要啟動開發伺服器（即Packager，它負責實時監測js檔案的變動并實時打包，輸出給用戶端運作）。具體隻需簡單進入到項目根目錄中，然後運作：

$ npm start

Packager隻是在開發時需要，便于你快速開發疊代。在正式釋出應用時，所有的js檔案都會被打包為一整個jsbundle檔案離線運作，此時用戶端不再需要Packager服務。

在用RN開發時是需要在pc上運作packager 伺服器終端，預設是8081端口，此伺服器會與你真機或者模拟器進行通訊，當你修改了js代碼後，你可以點選真機上的Reload JS按鈕後，app界面會立馬重新整理出來顯示修改後的一個效果。

如果packager 伺服器終端被關閉了怎麼辦 ？

不用擔心，其實隻要你切到項目的根目錄，指令行輸入npm start 回車即可開起終端監聽。

2、圖檔的 base64 資料

圖檔的 base64 編碼就是可以将一副圖檔資料編碼成一串字元串，使用該字元串代替圖像位址。

圖檔的下載下傳始終都要向伺服器送出請求，要是圖檔的下載下傳不用向伺服器送出請求，而可以随着 HTML 的下載下傳同時下載下傳到本地那就太好了，而 base64 正好能解決這個問題。可以節省一個 http 請求。圖檔的 base64 編碼可以算是前端優化的一環。

如果圖檔足夠小且因為用處的特殊性無法被制作成雪碧圖（CssSprites），在整個網站的複用性很高且基本不會被更新，比如背景圖。

3、元件的mount和unmount是什麼時候進行的？

1. 初始化類的構造器，通常在此初始化state資料模型 constructor(props) { super(props); this.state = { //key: true } } 2. 表示元件将要加載到虛拟DOM，在render方法之前執行，整個生命周期隻執行一次 componentWillMount() { } 

3. 表示元件已經加載到虛拟DOM，在render方法之後執行，整個生命周期隻執行一次。通常在該方法中完成異步網絡請求或內建其他JavaScript庫 componentDidMount() { }

 4. 在元件接收到其父元件傳遞的props的時候執行,參數為父元件傳遞的props。在元件的整個生命周期可以多次執行。通常在此方法接收新的props值，重新設定state。 componentWillReceiveProps(nextProps) { this.setState({ //key : value }); } 

5. shouldComponentUpdate(nextProps, nextState) { return true; } 該函數在componentWillReceiveProps(nextProps)執行之後立刻執行。 componentWillUpdate(nextProps, nextState) 在shouldComponentUpdate(nextProps, nextState)函數執行完畢之後立刻調用 

6. componentDidUpdate(preProps, preState)在在render()方法執行之後立刻調用。可多次執行 

7. render方法，渲染元件 render() { return( <View/> );} 8. componentWillUnmount在元件由虛拟DOM解除安裝的時候調用。

4、 RAM 格式

Random Access Modules，随機存取子產品

通常對于啟動後一段時間内不需要大量代碼的應用程式來說是非常有用的。例如應用程式包含複雜的配置檔案螢幕或較少使用的功能，但大多數會話隻涉及通路應用程式的主螢幕更新。我們可以通過使用RAM格式來優化bundle的加載，并且内聯引用這些功能和頁面（當它們被實際使用時）。

在 react-native 執行 JS 代碼之前，必須将代碼加載到記憶體中并進行解析。如果你加載了一個 50MB 的 bundle，那麼所有的 50mb 都必須被加載和解析才能被執行。RAM 格式的 bundle 則對此進行了優化，即啟動時隻加載 50MB 中實際需要的部分，之後再逐漸按需加載更多的包。

内聯引用(require 代替 import)可以延遲子產品或檔案的加載，直到實際需要該檔案。

在 Android 上啟用 RAM 格式，需要編輯 android/app/build.gradle 檔案。在apply from: "../../node_modules/react-native/react.gradle"之前修改或添加project.ext.react：

project.ext.react = [

  bundleCommand: "ram-bundle",

]

如果在 Android 上，你想使用單個索引檔案（如前所述），請在 Android 上使用以下行：

project.ext.react = [

  bundleCommand: "ram-bundle",

  extraPackagerArgs: ["--indexed-ram-bundle"]

]

5、重新整理JavaScipt的方法：

1、Android模拟器中，按兩下R；

2、選擇開發菜單中的Enable Live Reload開啟自動重新整理。（Command +M或者adb shell input key event 82）

3、開啟開發菜單中的Hot Reloading選項，會自動注入，部分場景失效。

6、函數學習

js中沒有方法，隻有函數，函數中this的取值與函數的調用方式有關。誰調用函數，this就是誰。

箭頭函數的this是繼承自外圍作用域。

https://www.jianshu.com/p/0c28fb550679

定義函數的方式：

1、function（）{}

2、=（）=>{}

元件外定義的箭頭函數，必須用const或者let修飾，使用時，this.fucA

元件内定義，在render()之前定義的，使用時onClick={funcA}

https://blog.csdn.net/well2049/article/details/79430811

直接定義的方法，使用時需bind this

this.funcA.bind(this)

https://www.jianshu.com/p/601109471bbb

參考文獻：

https://blog.csdn.net/gongch0604/article/details/81115633 生命周期部分