[翻譯]Review——24 tips for React Native you probably want to know

Post author: Albert Gao
Post link: http://www.albertgao.xyz/2018/05/30/24-tips-for-react-native-you-probably-want-to-know/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.      

24 tips for React Native you probably want to know（你可能想知道React Native的24個技巧）

React native很棒。但事情可能會很艱難。以下是我從項目到項目的内容，我希望與您分享，這可能會為您節省一些時間。

1.用于調試

1.1斷點

當IDE發瘋時，像Visual Studio代碼或Webstorm不會在斷點處停下來，除了通過周遊Github問題搞清楚。您可以簡單地在代碼中放置一個調試器，然後它将在運作時停止執行。

1.2附上打包程式

在開發時間内使用console.log時，您的資訊将顯示在浏覽器控制台中。您可以直接從IDE檢視控制台資訊。如果您對Visual Studio代碼使用react-native-tools。您隻需轉到調試頁籤并運作Attach to packager指令并重新加載應用程式。但是，你需要：

• 關閉Chrome，因為隻應為一個打包程式程序附加一個調試程式
• Packager本身需要打開。

這樣做的好處不僅在于熱子產品重載仍然有效，而且您可以在編寫代碼時在IDE内調試代碼。

1.3Atom

是的，VSC要好得多，但你需要知道你可以直接在Atom裡面打開反應調試工具（比如你在Chrome中安裝的那個）...而且，是的，Nuclide支援RN，再次...隻是想讓你知道...

1.4如何檢查橋梁（Bridge）

我們都知道原生和js之間有一座橋梁。 React native使用它在兩者之間進行通信以進行UI更新等。這是你如何檢查它。隻需将以下代碼添加到index.js：

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue.js';
const spyFunction = (msg) => {
  console.log(msg);
}
MessageQueue.spy(spyFunction)      

然後在調試器的控制台中，您應該看到許多消息：

Object {type: 0, module: "JSTimers", method: "callTimers", args: Array(1)}      

type字段的意思是：

• 如果type等于0表示資料從native到JavaScript;
• 如果它等于1，則資料從JavaScript變為本機。

1.5本機調試，必備

Xcode：運作應用程式後，按Debug View Hierarchy按鈕，它将以3D方式顯示所有視圖。您可以以非常直覺的方式檢查全視圖樹。這是讓自己感到内疚的絕妙方式，因為現在你知道你的UI實際上有多複雜，即使它似乎采用了極簡主義的設計理念。隻需檢視谷歌圖檔，看看它有多酷。

Android studio：請務必檢視Android Profiler，這是一款分析應用在Android上的性能的絕佳工具。 CPU，記憶體，網絡，你能得到所有你想了解的東西。

1.6檢查本機日志

萬一你忘記：

• react-native log-ios
• react-native log-android

您可以從指令行檢視本機日志。

1.7推薦

一個可愛的調試工具是reactotron。用于檢查React JS和React Native項目的桌面應用程式。 macOS，Linux和Windows。真的很美。

如果您使用的是Mac。 react-native-debugger是另一個很好的候選者。它将React Inspector / Redux DevTools結合在一起。隻需兩步。

1. 安裝：brew update && brew cask install react-native-debugger
2. 運作：open“rndebugger：// set-debugger-loc？host = localhost＆port = 8081”

1.8重新整理後仍然得到

Packager is not running的結果

有時一切都是正确的，但你仍然得到那個打包器沒有運作消息，而不是使用CMD + R重新整理頁面，你隻需要點選底部的重新整理頁面按鈕，我知道，它們應該是相同的。但…

1.9對于YellowBox

是的，您可以使用YellowBox.ignoreWarnings（['警告：isMounted（...）已棄用'，]）忽略黃色框中顯示的警告。但是，将連結置于GitHub問題可能會更好。以防萬一你可以定期檢查，最後删除它。

2你處于不同的環境中

2.1結果不同

在大多數情況下，React Native将使用JavaScriptCore，這是為Safari提供支援的JavaScript引擎。

請注意，在iOS上，由于iOS應用程式中缺少可寫的可執行記憶體，JavaScriptCore不使用JIT。

使用Chrome調試時，所有JavaScript代碼都在Chrome内部運作，并通過WebSockets與本機代碼進行通信。 Chrome使用V8作為其JavaScript引擎。      

這是非常重要的事情要記住，我已經處理的一個案例是moment.js實際上表現不同。例如，這個月是五月，是以對于以下代碼：

moment().month()
// will return 4 because moment's index starts from 0      

它僅适用于通過jest進行測試（因為您使用的是Node，并且該行為是預期的文檔），但是當您在react native環境中運作它時。你會得到5。

是以，這裡的要點是：

• 日期就像導航那樣，是RN的神奇黑洞，請記住這種差異。
• 不要總是質疑自己。

令您驚訝的是，當您在模拟器中運作故事書本機時，運作時仍然不是JSC，是以上述結果将再次為4 ...

2.2更新你的JSC for android

我忘了，但在一個極端情況下，更新JavaScriptCore實際上解決了問題。官方jsc-android自2016年以來未更新。請使用社群一，jsc-android-buildscripts

打開連結，跳到如何使用我的React Native應用程式部分。實際上很容易。

3.更新您的Android項目

如果您是原生開發人員，那麼所有設定都太舊了，而不是舊相容性。它更像是幾個世紀以來失去了團隊的愛。但一切都是透明的。在更新之前，請確定沒有任何遺留插件仍然需要舊版本。但是你仍然可以更新，如果發生任何錯誤就git重置。

3.1更新gradle

Gradle是JVM世界中使用的建構工具。

打開android / gradle / wrapper / gradle-wrapper.properties，找到distributionUrl =行

将gradle版本更改為4.5.1，結果如下所示：

distributionUrl = HTTPS \：//services.gradle.org/distributions/gradle-4.5.1-all.zip

3.2生成模闆後立即更新您的Android項目

1. 在android / app /下打開build.gradle
2. 找到android {}塊
3. 将以下版本更改為以下版本

   compileSdkVersion 27
   buildToolsVersion“27.0.3”
   minSdkVersion 16
   targetSdkVersion 27      

1. 在依賴項塊中，更改appcompat行以比對目标版本

• 編譯“com.android.support:appcompat-v7:27.1.1”

1. 在android / build.gradle中

更新android build tools

classpath'com.android.tools.build：grad：3.12'

3.3縮減你的APK

預設情況下，由React native生成的APK包含x86和ARM的JSCore二進制檔案。如果您不需要x86，可以減小尺寸。

将以下行添加到/android/app/build.gradle：

def enableSeparateBuildPerCPUArchitecture = true      

它應該生成2個APK，一個用于x86，一個用于ARM，将所有這些上傳到Google Play，使用者将根據他們的裝置獲得正确的一個。

3.4 Gradle

如果你想學習gradle的東西，我建議你從我的部落格開始：從gradle開始，建立一個簡單的build.gradle。它比官方文檔容易了解，花費大約10分鐘。

4. Image, Image, Image

4.1使用WebP可以節省20％的空間。并最終成為一個較小的包裝商

但對于Android，您需要添加一些東西來進行gradle。來自官方檔案：

您需要在android / app / build.gradle中添加一些可選子產品，具體取決于您的應用程式的需求。

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.3.0'
  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:1.3.0'
  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.3.0'
  compile 'com.facebook.fresco:webpsupport:1.3.0'
  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.3.0'
}      

4.2對于目前版本的RN

你可以隻需要（'/ img / mine.png'）來加載它。

4.3這就是你如何寫原生

有時候，即使把圖像放在那裡也會讓你的應用感覺更快。

對于iOS

• 打開Xcode，找到Images.xcassets，将靜态資源拖入其中。
• 確定它包含在建構階段：建構階段 - >複制捆綁資源。
• 像這樣使用它：

<Image source={{uri: 'goodImage'}} />      

不需要擴充，您可能需要添加寬度和高度來實際渲染它。

對于Android

• 打開Android Studio
• 将圖像拖到此檔案夾：android / app / src / main / res / drawable
• 檔案名應以字母開頭
• 然後像iOS一樣使用它

5.React技術仍然适用

5.1 PureComponent 是不夠的

如果您使用react-navigation，就像react-router一樣，他們需要在導航道具中包含一個動态變量，以便在更改路徑時重新渲染。它會使PureComponent無用，因為它隻是對所有屬性進行淺層檢查。您需要實作自己的shouldComponentUpdate（）并驗證除導航之外的任何屬性。就這麼簡單。一行很好：

shouldComponentUpdate(nextProp) {
    return nextProp.data != this.props.data
}      

5.2對于模式

如果你沒有過多地使用HOC（高階元件）或渲染props，社群似乎每天都在談論它們，這也沒有什麼不對，因為你會在需要時使用它們，你隻需要知道何時使用它們，我覺得至少對我來說：

HOC更适合添加可重用的功能，比如我需要為TextInput添加一個功能，你隻需将它們放在HOC中，然後包裝TextInput。我隻想要一個功能，沒有任何變化。

• 您可以使用工廠方法和HOC生成相同元件的不同版本，就像我想生成5個不同的ListComponent一樣，它們都是相同的，唯一的差別是它們專注于不同的redux狀态。
• 您可能希望為HOC提供displayName以獲得更好的調試體驗。

當您嘗試封裝邏輯并讓子元件根據更改的輸入決定如何渲染時，渲染props很有用。這就是為什麼你會看到它類似lambda的文法，因為它會将處理結果傳遞給子節點。

• 像Auth元件之類的東西，你在裡面進行身份驗證并将結果傳遞給子程序來進行渲染。

一個重要的事實是要記住：

React中的JSX元素不僅用于顯示UI。您可以使用它們來聲明構造您的邏輯。      

隻有在你接受了這個之後，當你看到渲染道具之類的東西時，你會感覺更好，否則，它看起來很煩人。

6. React navigation

實際上，v2更新似乎相當不錯。我知道這個庫有一些非常不好的名聲。但實際上并沒有那麼糟糕。它運作得很好。隻是一些說明：

1. 導航器可以嵌套。這意味着，如果您的主螢幕是3個底部标簽，其中一個标簽包含3個頂部标簽欄。你需要做這樣的事情。

   const ListTab = createMaterialTopTabNavigator(
     {
       INBOX: pickListScreen(Category.INBOX),
       TODAY: pickListScreen(Category.TODAY),
       TOMORROW: pickListScreen(Category.TOMORROW),
     }
   )
   const MainScreen = createBottomTabNavigator(
     {
       Home: HomeScreen
       List: ListTab,
   })      

   如果你想從HomeScreen導航到另一個，你需要在它們周圍建立一個stackNavigator并用它替換上面的HomeScreen。
2. 不，沒有标題，它隻能來自堆棧導航器，除非您将螢幕包裝在堆棧導航器中，否則您将無法獲得标題。
3. 如果要删除标題陰影：

   headerStyle:{
       // iOS
       borderBottomWidth:0,
       // Android
       elevation:0
   }      

7.如何選擇開源項目

1. 了解你的用例！
2. 檢查源代碼，有時它非常簡單，也許你隻想要一個不同的API簽名。
3. 看stars，看看有多少注意力。較少關注可能很快就會得不到支援。
4. 檢查問題是否緊急。
5. 檢查公關，如果大量PR沒有合并，那裡必須發生一些事情。
6. 檢查送出。以前，當我檢查sails.js的送出消息時。通過看到團隊對修複readme.md或其他文檔非常感興趣而沒有在幾個月内推出有意義的代碼，這讓我大吃一驚......

8.對于CLI

如果您來自網絡世界，您需要知道create-react-native-app不是create-react-app的等價物。這是一個由Expo提供的解決方案，基于官方的react-native-cli，它隐藏了那些遠離你的原生項目。他們提供其他相當好的工具，react native。

但是如果你想要更多地控制你的項目，比如調整你的原生Android和iOS項目，我強烈建議你使用官方的react-native-cli。仍然是一個簡單的指令，react-native init ProjectName，你很高興。

因為無論何時你需要添加一些原生代碼，這對于原生來說都是正常的，你還需要彈出create-react-native-app。

9. 對于Typescript

9.1關于設定

react-native init ProjectName --template typescript      

9.2熱加載不起作用怎麼辦

首先，确認您已關閉實時重新加載并打開熱重新加載。然後，使您的根元件成為類元件。

我遇到了tsconfig.json導緻問題的問題，在我删除所有注釋後...熱重新加載終于有效了。

9.3開始輸入

對于無狀态功能元件

import React from 'react'
interface IMyProp {
    name: string
}
const My: React.SFC<IMyProp> = ({name}) => ()      

對于有狀态功能元件

class My extends React.Component<IMyProp, IMyState>      

對于Redux

// need to install @types/redux first
import { Dispatch } from 'redux'      

10. End

希望能幫到您。

—— 完 ——

轉載于:https://www.cnblogs.com/bbcfive/p/10754611.html