一个资深iOS开发者对于React Native的看法


当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道。
 

我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头。毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具。

我已经创造了一些我引以为傲的iOS应用——一些使用Object-C和Xcode构建的应用,通常人们都是这么做的。这两样工具是苹果公司提供的、用来开发iOS应用的,所以,我和其他的苹果开发者都在用。并且当两年前苹果公司发布Swift时,我也毫不犹豫地去尝试它。

Swift依旧被使用在Xcode中,并且依旧是苹果公司推荐的开发方式,所以我很快地深入,并且毫不费力地学会了这门语言。我满足于我的苹果生态系统圈。React Native看上去只是一个小小的乐子,在我的脑海中,一切原生应用必须被 原生 地开发。对正要开始掌握 原生 开发方式的我来说,学习javascript(我并没有这方面的经验)和一种几乎全新的构建app的方式简直是荒废时间。

时间快进到几个月过后,我可以打保票说,我再也不会使用Objective-C或者Swift来开发iOS应用了。

我们接手了一个新的移动应用开发项目,我大概的看了一下设计和需求。正当我要点开Xcode那漂亮的蓝色图标新建一个新的工程时,我们的交互设计师,Adam走过来说,“我们用React Native来做这个东西吧。”

他解释说,这个项目合同的一部分明确提及了要给这个应用做一个安卓版本。尽管React Native并不支持安卓,我们知道Facebook正积极地在这方面研究。理论上来说,如果我们用RN构建了这个应用的iOS版本,很多部分能够直接工作在以后的安卓版本上。

好吧,我并不乐意。我觉得我已经站在了iOS开发能力的顶峰,现在却要我把这一切全部丢弃。在不可避免的学习曲线面前,我怀疑我是不是能够及时地发布一个高质量的产品。但除此之外,我更加质疑RN是否有能力成产一个高质量的产品。现在看来,我甚至没有觉得这样的质疑是不公平的。当时RN作为一个Beta版本刚被公布不久,文档欠缺,开源库和组建的数量稀少,演示代码或者Stack Overflow上的参考几乎没有。

我连看都不想看它一眼。但是我这种闭塞的态度只会带来更多的不良后果。我的第一道坎是学习Flexbox,RN制作UI布局的方式。从最基础的界面构建器开始,纯粹使用代码来布局UI几乎击溃了我的自信。我挣扎着去构建最基础的视觉效果。

但不仅仅是UI——任何事情都变的不一样。这对于我是最大的挑战。

”每当我止步不前或者不理解的时候,我就告诉自己“如果用Objective-C我能够在五秒钟之内解决它”。每当我发现了RN中的一个BUG(并且bug的数量非常大),我就会想,“oc中根本不会有这种bug,我为啥一定要和RN斗智斗勇呢?”

整整两个星期,我都在工作中痛苦挣扎。我对自己的感觉从一个杰出的iOS开发者变成了一个从未写过一行代码的人。这很受挫折,直到我花费了整整一个礼拜理清了思路。我后退一步,认识到Adam对RN做了许多研究。作为我的交互知道,我不得不信任他,相信他没有把我领入一条错误的道路。我发誓我要在周一投入工作,埋头苦干,假装Objective-C和Swift从来没有存在过,并解决这个项目。

学会去喜欢React

几周之前,我们向App Store提供了第一个React Native应用。对于应用的最终表现结果我真的非常自豪,并且我迫不及待的要开始构建下一个项目了。在仅仅一个月多一点的时间里,我完全踏上了RN的贼船,是什么改变了我的想法呢?

React 范例

在React中,所有UI的组件都被放置在render()方法中,并且被state状态控制。你的render()方法定义了UI在各种状态是如何展现的。当调用setState()的时候,React会找到需要改变的部分并替你修改。想象一个简单的视图,拥有一个“Hello World”标签和按钮。每点击一下按钮,标签会在“Hello World”和“Goodbye World”之间切换。在Objective-C中,我在按钮的句柄中需要一些难堪的if声明,就像下面一样。

  1. if([label.text isEqual:@”HelloWorld”]){
  2. label.text =@”GoodbyeWorld”;
  3. }else{
  4. label.text =@”HelloWorld”;
  5. }

这样很有用,但是这种UI代码和我第一次创建这个标签的地方(可能在代码中,也可能在界面构建器里)完全脱节。在React中,我们会在state状态中定义一个buttonClicked的bool变量,在render()函数中,标签看起来会是这样的:

  1. <Text>
  2. {this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}</Text>

并且我们的按钮句柄也会非常简单

  1. this.setState({buttonClicked:!this.state.buttonClicked});

所有和可视化相关的代码都在同一地方,并且由状态控制一切。这使得理解和修复这段代码变的非常容易。

Flexbox

这就是我一开始非常痛恨的UI布局工具,现在变成了RN中我最喜欢的事物之一。我承认一开始非常难以掌握,但一旦你开始使用,它把 为多种不同尺寸屏幕构建UI这件事 变的机器快速和简单。我曾经对Xcode中的可视化界面编辑器十分热衷,相比于Flexbox,它的自动布局还是国语复杂。Flexbox使用的CSS式样式使得样式重用变的和复制粘贴一样简单。其中最棒的事莫过于允许你在一瞬间将样式值改变到完美。

Live/Hot Reload

没错,想看看按钮右移5像素的样子就和command+s一样简单。React Native能够被设置为在iPhone模拟器中自动重绘当前画面而不重建Xcode工程。这非常厉害因为你不仅可以通过避免重新编译儿节省时间,你还能够调整一个深度嵌套在应用中的界面,调整UI而不用回到最初的界面。

Android

现在依旧没有发布,但就快了——这一定会非常神奇。在最初我对于ReactNative犹豫不决是因为我已经习惯于做原生的iOS开发。对此我从没有过任何的抱怨。但是我也做过原生的安卓开发,这并不让人开心。React Native在安卓上会变的很瘦欢迎,同时我也在期待它的发布。这会改变移动应用开发的现状,通过使用相同的代码来部署两个平台的应用。

回顾

想念 Xcode

我还是会想念Xcode,或者说是一个IDE编辑器。我已经有了一个很好的RN开发设置,但这并不容易,Sublime Text和一大堆的插件让我有了语法高亮。sublime能够完成同一个文件中基于变量的自动补全,但始终少了一些Xcode自动补全的稳健性。我还是不得不一直查询开发者文档做参考。

小缺点,比如键入React.PropTypes.f  IDE并不会告诉我我到底在找func还是function,这很让人困惑。我也怀念Xcode的版本控制——允许我一一比较我上一次git提交的版本和现在的版本,甚至还允许我基于行撤销一些特别的改动。我意识到第三方程序能够帮助我完成这些,但是对IDE来说最棒的事情就是将这些囊括到一个包中。(译者使用VSCode可以解决这些问题)

为了运行RN项目,我需要终端运行npm,Chrome用来debug,sublime来编辑代码,最终还需要Xcode来运行这个项目并打开模拟器。在大项目中,这些都是细小的抱怨,但是当我面对RN的时候这依旧是缺点。对于Nuclide(Facebook的新IDE)我抱有很高的期望,希望它能结束所有的这些缺点。

桥接

Facebook还没有也不会去提供所有iOS转向React Native的API,所以对于那些缺失的片段他们提供了桥接js的方法。当我第一次深入RN的时候,这方面的文档非常的糟糕。每当我意识到我需要连接某些事物的时候,我差点就对RN放弃了,因为这些事情早就能够在Objective-C中正常运作。但是当她们更加详细地解释了桥接过程,提供优秀的实例之后,这就无所惧怕了。它仍然是一个麻烦,但是我能够预见到开源社区和nom上会有所有的桥接方案。事实上,大多数的iOSAPI已经存在了。

漏洞,文档,开源社区

大概所有我最初关于RN的抱怨现在都已经消失殆尽,如果我从今天开始学习它的话。漏洞每天都在被修复,新版本每一周都在迭代。文档还需要加把劲,但比以前好多了。Facebook和开源社区对于研发这个框架变的十分严谨。人们开始聚集在Github和Stack Overflow上探讨它。如果你是一个正在考虑尝试RN的iOS开发者,你要知道你不是一个人在战斗。RN非常棒,你应该带着开放的态度拥抱他。不要像我一样吧自己局限在温室里。

走出温室,世界才刚开始。

一个资深iOS开发者对于React Native的看法的更多相关文章

  1. [转] 一个资深iOS开发者对于React Native的看法

    当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...

  2. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  3. 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  4. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  5. 写给移动开发者的 React Native 指南

    本文原创版权归 简书 wingjay 所有,如有转载,请于文章篇头位置显示标注原创作者及出处,以示尊重! 作者:wingjay 出处:http://www.jianshu.com/p/b8894425 ...

  6. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  7. 给所有开发者的React Native详细入门指南

    建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...

  8. 谈谈:这次疫情对一个普通iOS开发者的影响!

    “2019年已经很难了,2020年开局0-5那就更难了啊!”大家应该都很清楚,这次疫情对于国家的整体经济体系影响非常大,但是要说有多大,我也不了解,毕竟我只是个程序员!但是对iOS开发者影响有多大,我 ...

  9. iOS原生 和 react native视图混编

    在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编. 关键点只有二: 1.通过 RCTRootView 加载RN视图. 2.RN中,只需要AppRegistry. ...

随机推荐

  1. BZOJ 3289: Mato的文件管理 莫队+BIT

    3289: Mato的文件管理 Description Mato同学从各路神犇以各种方式(你们懂的)收集了许多资料,这些资料一共有n份,每份有一个大小和一个编号.为了防止他人偷拷,这些资料都是加密过的 ...

  2. WPF标准控件模板查看程序(文件里面)

    xaml <Window x:Class="ControlTemplateBrowser.MainWindow" xmlns="http://schemas.mic ...

  3. tree view

    <TreeView x:Name="treeParameter" Width=" Margin="11,6,11,6" ItemsSource= ...

  4. 多态、类库、委托、is和as运算符、泛型集合

    多态:简而言之就是龙生九子,各有不同 有了继承,才有了多态 1.虚方法 virtual 重写 override 父类中的方法,在子类中并不适用,那么子类需要自主更改继承的方法或者是属性,那父类中加了v ...

  5. HDU 4162 Shape Number (最小表示法)

    题意:给你一串n个数,求出循环来看一阶差的最小字典序:数字串看成一个顺时针的环,从某一点开始顺时针循环整个环,保证字典序最小就是答案 例如给你 2 1 3 就会得到(1-2+8 注意题意负数需要加8) ...

  6. .NET运用AJAX 总结及其实例

    1.AJAX简介 (1.没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的 ...

  7. yii2.0 的数据的 增

    增加数据 /**     * 添加数据  controller 层     */ //引入对应的model类 use app\models\About; //定义对应的方法固定的actionxxxx ...

  8. http://blog.sina.com.cn/s/blog_5bd6b4510101585x.html

    http://blog.sina.com.cn/s/blog_5bd6b4510101585x.html

  9. iOS 安装Cocoapods以及安装第三方库的操作流程

    安装cocoapods的流程: 1.打开终端,输入:  sudo gem update —system 2.输入密码,稍等 3.gem sources --remove https://rubygem ...

  10. eclipse下Android无法自动生成apk文件怎么办?

    eclipse下Android无法自动生成apk文件怎么办? 现象:创建android工程后,通过手动build/clean或自动build均无法在bin文件夹下生成.apk文件 解决方法:进入win ...