本机与本机

React Native是一个很好的工具，可使用Javascript和直接来自Web开发的其他概念/技术来创建多平台本地应用程序。 但是，与使用平台的官方工具包制作应用程序相比，开发人员的体验又如何呢？ 让我们通过使用Xcode在React（Native）和Cocoa Touch（Swift）中为iOS构建一个简单的登录界面，来探讨每种方法的优缺点。

虚拟主登录屏幕仅由一个文本框，一个登录按钮和一条消息提示用户使用秘密密码进行身份验证组成。 通过输入secret一词，我们访问仪表板 ，该仪表板只是受保护内容的占位符。 在GitHub上查看完整的源代码，其中还包括仅Web版本供参考。 按照自述文件获取有关如何安装和运行每个应用程序的说明。

那么，最终的Swift代码与其JSX对应代码有何不同？ 数量方面，两个源都包含相似数量的行。 在质量方面，我们可能会怀疑Swift是一种新语言会具有一定的可读性优势，但是不断发展的ECMAScript标准似乎保持了很好的状态。 这是每个控制器的实际外观：

reactnative-app / index.ios.js

 import React, { Component } from 'react' import { AppRegistry } from 'react-native' import { createStore } from 'redux' import { Provider, connect } from 'react-redux' import userReducer from 'core/lib/reducers/user'  import React, { Component } from 'react' import { AppRegistry } from 'react-native' import { createStore } from 'redux' import { Provider, connect } from 'react-redux' import userReducer from 'core/lib/reducers/user' const LoginFormComponent = ... // Excluding UI markup and style const LoginFormContainer = connect( state => ({ error: state.error, isLoggedIn: state.isLoggedIn }), dispatch => ({ onLoginSubmit: password => { dispatch({type: 'LOGIN', password}) } }) )(LoginFormComponent) const LoginFormContainer = connect( state => ({ error: state.error, isLoggedIn: state.isLoggedIn }), dispatch => ({ onLoginSubmit: password => { dispatch({type: 'LOGIN', password}) } }) )(LoginFormComponent)  const LoginFormContainer = connect( state => ({ error: state.error, isLoggedIn: state.isLoggedIn }), dispatch => ({ onLoginSubmit: password => { dispatch({type: 'LOGIN', password}) } }) )(LoginFormComponent) const store = createStore(userReducer) export default class DummyLoginApp extends Component { render() { return < Provider store = {store} >< LoginFormContainer />< /Provider> } } export default class DummyLoginApp extends Component { render() { return < Provider store = {store} >< LoginFormContainer />< /Provider> } }  export default class DummyLoginApp extends Component { render() { return < Provider store = {store} >< LoginFormContainer />< /Provider> } } AppRegistry.registerComponent('app', () => DummyLoginApp) 

没有UI标记的JSX代码与网络版本几乎相同

core / src / reducers / user.js

 export default (state = { error: false , isLoggedIn: false }, action) => { switch (action.type) { case 'LOGIN': if (action.password === 'secret') { return { error: false , isLoggedIn: true } } else { return { error: true , isLoggedIn: false } } default: return state } } 

Reducer代码在React和React Native版本之间共享

native-app / DummyLogin / LoginViewController.swift

  import UIKit class LoginViewController : UIViewController { @IBOutlet weak var passwordField: UITextField! @IBOutlet weak var invalidPasswordLabel: UILabel! @IBOutlet weak var passwordField: UITextField! @IBOutlet weak var invalidPasswordLabel: UILabel! @IBAction func tryLoginTextField () { self.tryLogin () }  @IBAction func tryLoginTextField () { self.tryLogin () } @IBAction func tryLoginButton () { self.tryLogin () } @IBAction func tryLoginButton () { self.tryLogin () }  @IBAction func tryLoginButton () { self.tryLogin () } func tryLogin () { if self. passwordField . text == "secret" { self.performSegue (withIdentifier: "loginToDashboard", sender: self ) } else { self. invalidPasswordLabel . isHidden = false } } } func tryLogin () { if self. passwordField . text == "secret" { self.performSegue (withIdentifier: "loginToDashboard", sender: self ) } else { self. invalidPasswordLabel . isHidden = false } } } 

Swift控制器链接到Xcode上的故事板组件

研究每种实现的相应import块，我们已经可以推断出，框架和体系结构之间存在差异。 Swift是经典的MVC（模型-视图-控制器），而React使我们能够组装更复杂的堆栈，该堆栈与该应用的网络版本共享。

虽然最终产品实际上是相同的，并且编程工作是可比的，但这两种经验再相距甚远。 总结一下，下面是其中每一个的一些要点：

反应本机

• 利用Javascript库/框架
• 与Webapp共享模型/状态逻辑
• 与webapp相同的JSX和ES6语法
• 类似于CSS的样式和功能（flexbox）
• 目标iOS和Android平台
• 开发过程中实时/热重装

迅速

• 完整的本地Cocoa Touch SDK体验
• 轻松包含CoreData等原生API
• 具有自动布局的图形UI /故事板构建
• 与macOS版本的应用共享代码
• 直接在Xcode中进行调试和测试
• 真正的移动优先策略

两种方法都有明显的缺点 ：

反应本机

• 仍然需要Xcode来运行项目
• 涉及Git合并的混乱升级过程
• Xcode警告消息赶上Apple
• 即使使用缓存，第一次加载也很慢
• 无法自定义管道或目录结构

迅速

• 必须使用Xcode IDE进行所有操作
• 社区支持较少的新语言
• 无法集成javascript框架和库
• 赋予MVC架构特殊的风味
• 不支持Android或其他移动操作系统

对于经验丰富的React开发人员，它很想将React Native作为与其仅基于Web的姐妹框架有很多共同点的解决方案。 该工具的创建者仍然需要完善设置和构建过程的某些方面，但是我们的Web程序员已经知道如何处理不断发展的技术。 当需要同时构建针对浏览器，iOS和Android的应用程序时，此方法显然具有优势。

Swift本身也相对较新，但是底层的Cocoa Touch SDK已经成熟，Apple使得查找入门所需的所有文档变得很容易，并且可以继续学习。 开发环境非常强大，即使对于平台的新手来说，整个过程也很顺畅。 从界面构建器开始，我们就被迫首先考虑移动性，最后提出了一种源自其概念的本地产品。

---

在 https://github.com/coderdiego/dummylogin-platforms上查看本文的配套项目