ReactNative快速入門筆記

時間 2019-11-24

標籤 reactnative 快速入門筆記简体版

原文原文鏈接

ReactNative的文檔地址有多個，若是你英文夠好，就去研讀官方的文檔吧，
若是讀原文比較吃力，中文官網也是不錯的選擇。html

下面是我我的記錄的一些筆記，僅供初學者入門參考node

預科

入門React Native前須要瞭解一下知識，這樣能幫助你更快的掌握RN
Node：Node.js 教程
ReactJS：《React 入門實例教程》
ES6：《ECMAScript 6 入門》react

環境

系統環境要求

IOS : MacOS, 黑蘋果
Android :MacOS, Linux, Windowsandroid

配置

全部的技術學習都應該從環境搭建開始，這裏也沒什麼好總結的，最好的方法就是跟着官網指導配置環境
若是你是node的老手，那就直接動手安裝如下環境吧：ios

node
npm
react-native-cli
Xcode
安裝Xcode IDE和Xcode的命令行工具（IOS開發依賴）
Android Studio
下載必須的插件：
a) JDK1.8+
b) Show Package Details
c) Android SDK Build Tools （指定23.0.1版本）
d) Android Support Repository
配置基礎環境：
a) ANDROID_HOME （如運行是遇到問題可參考此文www.jianshu.com/p/a77396301…）
b) JAVA_HOME

測試

react-native init RNDemo
cd RNDemo
react-native run-ios複製代碼

若是你的虛擬機啓動了，那麼恭喜你，你的環境已經配置成功！
若是運行報錯，能夠文章最後找尋解決方案。
git

語法

首先須要瞭解一些基本的React的概念，好比JSX語法、組件、state狀態以及props屬性。
還須要掌握一些React Native特有的知識，好比原生組件的使用。es6

教程上的東西我就很少說了，官方文檔上有詳細的講解github

直接從代碼上講解新手注意點吧算法

Hello World

傳統慣例，入門先行，Hello Worldnpm

你能夠新建一個項目，而後用上面的代碼覆蓋你的index.ios.js或是index.android.js 文件，而後運行看看。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text } from 'react-native';
class HelloWorldApp extends Component {
  render() {
    return (
      <Text style={styles.red}>Hello world!</Text>
    );
  }
}
const styles = StyleSheet.create({
  red: {
    color: 'red',
    fontWeight: 'bold',
  }
});
// 注意，這裏用引號括起來的'HelloWorldApp'必須和你init建立的項目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);複製代碼

從語法上看，RN和ReactJS語法區別不大，都是採用JSX和ES6的形式，若是你對ReactJS和ES6不熟悉，建議你先拜讀下阮一峯的博文教程：《React 入門實例教程》，《ECMAScript 6 入門》

相較寫Web App，區別在於RN的語法引入了原生的組件

import { AppRegistry, StyleSheet, Text } from 'react-native';複製代碼

RN中雖然使用JS寫原生UI，但再也不使用常規HTML標籤 <div> 或是 <span> ，而是使用RN的組件 <Text>
AppRegistry 模塊寫在index.ios.js或是index.android.js文件裏，用來告知React Native哪個組件被註冊爲整個應用的根容器，通常一個應用只運行一次。

僅僅使用props和基礎的View、Text、Image以及TextInput組件，就足以編寫各式各樣的UI組件了

樣式

按照JSX的語法要求使用了駝峯命名法：

font-weight -> fontWeight
background-color -> backgroundColor

React Native中的尺寸都是無單位的，表示的是與設備像素密度無關的邏輯像素點：

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />複製代碼

事件

事件的註冊跟ReactJS沒什麼區別

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}> <Text>Button</Text> </TouchableHighlight>
    );
  }
}複製代碼

此處註冊的組件爲TouchableHighlight，具體使用哪一種組件，取決於你但願給用戶什麼樣的視覺反饋

通常來講，你可使用TouchableHighlight來製做按鈕或者連接。注意此組件的背景會在用戶手指按下時變暗。
在Android上還可使用TouchableNativeFeedback，它會在用戶手指按下時造成相似墨水漣漪的視覺效果。
TouchableOpacity會在用戶手指按下時下降按鈕的透明度，而不會改變背景的顏色。
若是你想在處理點擊事件的同時不顯示任何視覺反饋，則須要使用TouchableWithoutFeedback。

經常使用的事件有：
點擊：onPress
長按：onLongPress
縮放：maximumZoomScale，minimumZoomScale

另外關於Props、State、樣式、佈局、事件等知識點的詳解，官方文檔上都有詳細的講解，比較基礎，這裏就不作介紹了

跨平臺

'Learn Once,Write Anywhere' and not 'Write Once,Running Anywhere'.

RN並不能算上是真正的跨平臺的語言，雖然能夠經過打包實現不一樣平臺打包不一樣組件，可是有些組件須要咱們針對不一樣平臺編寫不一樣代碼。這就要求咱們不用儲備一些原生開發的知識。

工做原理

RN的本質是在兩個模塊之間搭建雙向橋樑，讓他們能夠相互調用和響應，簡單的示意圖爲

Native模塊

運行在主線程上(可能會有些獨立的後臺線程處理運算，當前討論中可忽略)
iOS平臺上運行Object-C/Swift代碼，Android平臺上運行Java/Kotlin代碼
負責處理UI的渲染，事件響應。

JS模塊

運行在JS引擎的JS線程上
運行JS代碼
負責處理業務邏輯，還包括了應該顯示哪一個界面，以及如何給頁面加樣式。

Bridge模塊

Native和JS模塊之間不能直接通訊，只能經過Bridge作序列化和反序列化，查找模塊，調用模塊等各類邏輯，最終反應到應用上

性能

使用React Native替代基於WebView的框架，使App刷新能夠達到每秒60幀（足夠流暢），而且能有相似原生App的外觀和手感，雖然RN框架已經提供了這個平衡的能力，但平衡點的選擇卻掌握在開發者手中，即使是Native也沒法避免開發方式帶來的性能消耗

性能影響緣由

業務邏輯運行在JS線程上，負責API的調用，事件的處理，狀態的更新，而事件的響應UI的變化發生在主線程上，60幀/s的頻率要求每一幀的響應處理只有16.67(1000/60)ms，若是超過了16.67ms就會發生丟幀，若是丟幀超過100ms就會產生明顯的卡頓現象。全部下降每一幀運算的消耗才能提高性能。

性能影響切面

UI事件響應： 性能影響小
UI更新： JS側會向Native側同步大量的UI結構和數據，界面複雜、變更數據大，或者作動畫、變更頻繁，容易出現性能問題。
UI事件響應和UI更新同時出現： 兩種事件若是佔用了過多的線程，就會致使另外一種事件不能及時響應，表如今應用上就是卡頓

常見影響性能的點

console，ListView，動畫Animated

性能優化

通過多年的發展和優化，JS和Native能夠在各自的模塊線程高效迅速的運行，性能的瓶頸主要在Bridge模塊上，尤爲是在JS和Native模塊間頻繁的調用會致使Bridge壓力過大，產生卡頓

利用React自帶的Virtual Dom的Diff算法儘可能減小須要同步的數據，合理利用setState方法
在遇到動畫性能問題時，能夠使用Annimated類的庫，一次性把如何變化的聲明發送到Native側，Native側根據接收到的聲明本身負責接下來的UI更新。不須要每幀的UI變化都同步一次數據。
Native和JS混編，把會大量變化的組件作成Native組件
遇到UI事件響應和UI更新同時，可使用Interaction Manager把那些耗時較長的工做安排到全部互動或動畫完成以後再進行