[翻译]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结合在一起。只需两步。

安装：brew update && brew cask install react-native-debugger
运行：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项目

在android / app /下打开build.gradle
找到android {}块

将以下版本更改为以下版本

compileSdkVersion 27
buildToolsVersion“27.0.3”
minSdkVersion 16
targetSdkVersion 27

在依赖项块中，更改appcompat行以匹配目标版本

编译“com.android.support:appcompat-v7:27.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。您可以使用它们来声明构造您的逻辑。

只有在你接受了这个之后，当你看到渲染道具之类的东西时，你会感觉更好，否则，它看起来很烦人。

实际上，v2更新似乎相当不错。我知道这个库有一些非常不好的名声。但实际上并没有那么糟糕。它运作得很好。只是一些说明：

导航器可以嵌套。这意味着，如果您的主屏幕是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。
不，没有标题，它只能来自堆栈导航器，除非您将屏幕包装在堆栈导航器中，否则您将无法获得标题。

如果要删除标题阴影：

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

7.如何选择开源项目

了解你的用例！
检查源代码，有时它非常简单，也许你只想要一个不同的API签名。
看stars，看看有多少注意力。较少关注可能很快就会得不到支持。
检查问题是否紧急。
检查公关，如果大量PR没有合并，那里必须发生一些事情。
检查提交。以前，当我检查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

希望能帮到您。

—— 完 ——