React Native学习总结

11 min readJan 4, 2017

React概念介绍

名词解释

React：近几年Web前端领域非常火热的一个开发框架React.JS，其核心思想是将视图组件化，通过更新组件的state来渲染出组件。
Native：这个词从字面理解就够了，就是指原生的。前几年有个非常火热的跨平台开发框架PhoneGap（现称Cordova），那就不是原生的开发方式。原生就要使用对应平台的特定语言和框架进行开发，比如使用Objective-C或Swift开发的iOS应用。
React Native：结合了这两个词，我们可以简单地得到结论：使用React框架进行原生方式的开发。

实现原理

我们都知道在iOS平台上，苹果提供了一个JavaScriptCore的framework，可以进行JavaScript语言的解析，React Native通过多次封装定义，最终实现了在JavaScript语言中调用Objective-C的类和方法。

所以既然是调用Objective-C的类和方法，性能上当然是不差的（但也不完美），所以这也是React Native相比其他跨平台开发方式的一大优势。

附上官方对于javascript environment解释原文：

When using React Native, you’re going to be running your JavaScript code in two environments:
On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn’t use JIT due to the absence of writable executable memory in iOS apps.
When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.
While both environments are very similar, you may end up hitting some inconsistencies. We’re likely going to experiment with other JS engines in the future, so it’s best to avoid relying on specifics of any runtime.

评价

跨平台：目前React Native官方已经支持iOS、Android两个平台的移动设备，民间也有一些大牛在做macOS、tvOS，甚至UWP平台的适配。但由于不同平台特性不同，并不能一份代码在所有平台上直接运行，React Native的思想是「Learn once, write anywhere」，我们需要针对不同平台的特性写出不同的代码，尽量保持组件的高可复用性。
性能：官方宣称性能堪比Native，实际使用中我们会发现几个问题，比如复杂视图渲染出View层级过多、ListView（等同于iOS上的UITableView）无重用机制、有些组件存在内存泄露。这就会导致在部分低端Android机型上的性能过差，复杂的、大型的应用会有明显性能问题。
热更新：由于App Store应用商店发版迭代效率问题，热更新成为了iOS平台非常渴求的功能，可喜的是React Native的热更新能力非常好，通过将JavaScript代码部署到服务器中，运行过程中即可重新reload整个界面。
学习成本：对于iOS开发者来讲，要了解相当数量的Web前端开发知识才可以进行开发，对于Web前端开发者来讲，对于原生性能调优则需要原生开发知识和经验，所以说学习成本略高。
开发效率：Android和iOS平台可复用很多组件，仅部分代码需要各自平台分别维护，所以比开发两个平台原生应用效率要高得多。加上本身可动态渲染的能力，不用重新编译，Command⌘+R即可重新渲染界面，开发效率更是惊人地快。

学习路线

1、开发环境配置

安装Homebrew、Node.js、WatchMan、React Native命令行等工具，可参考官网:

brew install node

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g react-native-cli

对于IDE/Editor的选择，目前可以有Sublime Text、VSCode、WebStorm、Atom+Nuclide、Deco选择。我个人比较推荐的是VSCode和WebStorm。以下提供两篇关于IDE的设置。