當(dāng)我第一次嘗試ReactNative的時(shí)候，我覺得這只是網(wǎng)頁開發(fā)者涉足原生移動(dòng)應(yīng)用領(lǐng)域的歪門邪道植兰。
我認(rèn)為一個(gè)js開發(fā)者可以使用javascript來構(gòu)建iPhone應(yīng)用確實(shí)是一件很酷的事情蹈集，但是我很快放棄了自己去使用它的念頭亥鬓。畢竟我因?yàn)閻酆枚鴱氖耰os原生開發(fā)多年卤妒，并且目前為止已經(jīng)很熟悉這一套開發(fā)專業(yè)工具佩捞。
我已經(jīng)創(chuàng)造了一些我引以為傲的iOS應(yīng)用——一些使用Object－C和Xcode構(gòu)建的應(yīng)用绞幌，通常人們都是這么做的。這兩樣工具是蘋果公司提供的一忱、用來開發(fā)iOS應(yīng)用的莲蜘，所以，我和其他的蘋果開發(fā)者都在用帘营。并且當(dāng)兩年前蘋果公司發(fā)布Swift時(shí)票渠，我也毫不猶豫地去嘗試它。
Swift依舊被使用在Xcode中芬迄，并且依舊是蘋果公司推薦的開發(fā)方式问顷，所以我很快地深入，并且毫不費(fèi)力地學(xué)會(huì)了這門語言禀梳。我滿足于我的蘋果生態(tài)系統(tǒng)圈杜窄。React Native看上去只是一個(gè)小小的樂子，在我的腦海中算途，一切原生應(yīng)用必須被 原生 地開發(fā)塞耕。對正要開始掌握 原生 開發(fā)方式的我來說，學(xué)習(xí)javascript（我并沒有這方面的經(jīng)驗(yàn)）和一種幾乎全新的構(gòu)建app的方式簡直是荒廢時(shí)間嘴瓤。
時(shí)間快進(jìn)到幾個(gè)月過后扫外，我可以打保票說莉钙，我再也不會(huì)使用Objective－C或者Swift來開發(fā)iOS應(yīng)用了。
我們接手了一個(gè)新的移動(dòng)應(yīng)用開發(fā)項(xiàng)目筛谚，我大概的看了一下設(shè)計(jì)和需求磁玉。正當(dāng)我要點(diǎn)開Xcode那漂亮的藍(lán)色圖標(biāo)新建一個(gè)新的工程時(shí)，我們的交互設(shè)計(jì)師刻获，Adam走過來說蜀涨，“我們用React Native來做這個(gè)東西吧⌒保”
他解釋說厚柳，這個(gè)項(xiàng)目合同的一部分明確提及了要給這個(gè)應(yīng)用做一個(gè)安卓版本。盡管React Native并不支持安卓沐兵，我們知道Facebook正積極地在這方面研究别垮。理論上來說，如果我們用RN構(gòu)建了這個(gè)應(yīng)用的iOS版本扎谎，很多部分能夠直接工作在以后的安卓版本上碳想。
好吧，我并不樂意毁靶。我覺得我已經(jīng)站在了iOS開發(fā)能力的頂峰胧奔，現(xiàn)在卻要我把這一切全部丟棄。在不可避免的學(xué)習(xí)曲線面前预吆，我懷疑我是不是能夠及時(shí)地發(fā)布一個(gè)高質(zhì)量的產(chǎn)品龙填。但除此之外，我更加質(zhì)疑RN是否有能力成產(chǎn)一個(gè)高質(zhì)量的產(chǎn)品」詹妫現(xiàn)在看來岩遗，我甚至沒有覺得這樣的質(zhì)疑是不公平的。當(dāng)時(shí)RN作為一個(gè)Beta版本剛被公布不久凤瘦，文檔欠缺宿礁，開源庫和組建的數(shù)量稀少，演示代碼或者Stack Overflow上的參考幾乎沒有蔬芥。
我連看都不想看它一眼梆靖。但是我這種閉塞的態(tài)度只會(huì)帶來更多的不良后果。我的第一道坎是學(xué)習(xí)Flexbox笔诵，RN制作UI布局的方式涤姊。從最基礎(chǔ)的界面構(gòu)建器開始，純粹使用代碼來布局UI幾乎擊潰了我的自信嗤放。我掙扎著去構(gòu)建最基礎(chǔ)的視覺效果思喊。
但不僅僅是UI——任何事情都變的不一樣。這對于我是最大的挑戰(zhàn)次酌。
”每當(dāng)我止步不前或者不理解的時(shí)候恨课，我就告訴自己“如果用Objective－C我能夠在五秒鐘之內(nèi)解決它”舆乔。每當(dāng)我發(fā)現(xiàn)了RN中的一個(gè)BUG（并且bug的數(shù)量非常大），我就會(huì)想剂公，“oc中根本不會(huì)有這種bug希俩，我為啥一定要和RN斗智斗勇呢？”
整整兩個(gè)星期纲辽，我都在工作中痛苦掙扎颜武。我對自己的感覺從一個(gè)杰出的iOS開發(fā)者變成了一個(gè)從未寫過一行代碼的人。這很受挫折拖吼，直到我花費(fèi)了整整一個(gè)禮拜理清了思路鳞上。我后退一步，認(rèn)識到Adam對RN做了許多研究吊档。作為我的交互知道篙议，我不得不信任他，相信他沒有把我領(lǐng)入一條錯(cuò)誤的道路怠硼。我發(fā)誓我要在周一投入工作鬼贱，埋頭苦干，假裝Objective－C和Swift從來沒有存在過香璃，并解決這個(gè)項(xiàng)目这难。
學(xué)會(huì)去喜歡React
幾周之前，我們向App Store提供了第一個(gè)React Native應(yīng)用葡秒。對于應(yīng)用的最終表現(xiàn)結(jié)果我真的非常自豪雁佳，并且我迫不及待的要開始構(gòu)建下一個(gè)項(xiàng)目了。在僅僅一個(gè)月多一點(diǎn)的時(shí)間里同云，我完全踏上了RN的賊船，是什么改變了我的想法呢堵腹？
React 范例
在React中炸站，所有UI的組件都被放置在render（）方法中，并且被state狀態(tài)控制疚顷。你的render（）方法定義了UI在各種狀態(tài)是如何展現(xiàn)的旱易。當(dāng)調(diào)用setState()的時(shí)候，React會(huì)找到需要改變的部分并替你修改腿堤。想象一個(gè)簡單的視圖阀坏，擁有一個(gè)“Hello World”標(biāo)簽和按鈕。每點(diǎn)擊一下按鈕笆檀，標(biāo)簽會(huì)在“Hello World”和“Goodbye World”之間切換忌堂。在Objective－C中，我在按鈕的句柄中需要一些難堪的if聲明酗洒，就像下面一樣士修。
if([label.text isEqual:@”HelloWorld”]){
label.text=@”GoodbyeWorld”;
}else{
label.text=@”HelloWorld”;
}
這樣很有用枷遂，但是這種UI代碼和我第一次創(chuàng)建這個(gè)標(biāo)簽的地方（可能在代碼中，也可能在界面構(gòu)建器里）完全脫節(jié)棋嘲。在React中酒唉，我們會(huì)在state狀態(tài)中定義一個(gè)buttonClicked的bool變量，在render()函數(shù)中沸移，標(biāo)簽看起來會(huì)是這樣的:
{this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}
并且我們的按鈕句柄也會(huì)非常簡單
this.setState({buttonClicked:!this.state.buttonClicked});
所有和可視化相關(guān)的代碼都在同一地方痪伦，并且由狀態(tài)控制一切。這使得理解和修復(fù)這段代碼變的非常容易雹锣。
Flexbox
這就是我一開始非常痛恨的UI布局工具网沾，現(xiàn)在變成了RN中我最喜歡的事物之一。我承認(rèn)一開始非常難以掌握笆制，但一旦你開始使用绅这，它把 為多種不同尺寸屏幕構(gòu)建UI這件事 變的機(jī)器快速和簡單。我曾經(jīng)對Xcode中的可視化界面編輯器十分熱衷在辆，相比于Flexbox证薇，它的自動(dòng)布局還是國語復(fù)雜。Flexbox使用的CSS式樣式使得樣式重用變的和復(fù)制粘貼一樣簡單匆篓。其中最棒的事莫過于允許你在一瞬間將樣式值改變到完美浑度。
Live/Hot Reload
沒錯(cuò)，想看看按鈕右移5像素的樣子就和command＋s一樣簡單鸦概。React Native能夠被設(shè)置為在iPhone模擬器中自動(dòng)重繪當(dāng)前畫面而不重建Xcode工程箩张。這非常厲害因?yàn)槟悴粌H可以通過避免重新編譯兒節(jié)省時(shí)間，你還能夠調(diào)整一個(gè)深度嵌套在應(yīng)用中的界面窗市，調(diào)整UI而不用回到最初的界面先慷。
現(xiàn)在依舊沒有發(fā)布，但就快了——這一定會(huì)非常神奇咨察。在最初我對于ReactNative猶豫不決是因?yàn)槲乙呀?jīng)習(xí)慣于做原生的iOS開發(fā)论熙。對此我從沒有過任何的抱怨。但是我也做過原生的安卓開發(fā)摄狱，這并不讓人開心脓诡。React Native在安卓上會(huì)變的很瘦歡迎，同時(shí)我也在期待它的發(fā)布媒役。這會(huì)改變移動(dòng)應(yīng)用開發(fā)的現(xiàn)狀祝谚，通過使用相同的代碼來部署兩個(gè)平臺的應(yīng)用。
回顧
想念 Xcode
我還是會(huì)想念Xcode酣衷，或者說是一個(gè)IDE編輯器交惯。我已經(jīng)有了一個(gè)很好的RN開發(fā)設(shè)置，但這并不容易，Sublime Text和一大堆的插件讓我有了語法高亮商玫。sublime能夠完成同一個(gè)文件中基于變量的自動(dòng)補(bǔ)全箕憾，但始終少了一些Xcode自動(dòng)補(bǔ)全的穩(wěn)健性。我還是不得不一直查詢開發(fā)者文檔做參考拳昌。
小缺點(diǎn)袭异，比如鍵入React.PropTypes.f ?IDE并不會(huì)告訴我我到底在找func還是function，這很讓人困惑炬藤。我也懷念Xcode的版本控制——允許我一一比較我上一次git提交的版本和現(xiàn)在的版本御铃，甚至還允許我基于行撤銷一些特別的改動(dòng)。我意識到第三方程序能夠幫助我完成這些沈矿，但是對IDE來說最棒的事情就是將這些囊括到一個(gè)包中上真。（譯者使用VSCode可以解決這些問題）
為了運(yùn)行RN項(xiàng)目，我需要終端運(yùn)行npm羹膳，Chrome用來debug睡互，sublime來編輯代碼，最終還需要Xcode來運(yùn)行這個(gè)項(xiàng)目并打開模擬器陵像。在大項(xiàng)目中就珠，這些都是細(xì)小的抱怨，但是當(dāng)我面對RN的時(shí)候這依舊是缺點(diǎn)醒颖。對于Nuclide（Facebook的新IDE）我抱有很高的期望妻怎，希望它能結(jié)束所有的這些缺點(diǎn)。
橋接
Facebook還沒有也不會(huì)去提供所有iOS轉(zhuǎn)向React Native的API泞歉，所以對于那些缺失的片段他們提供了橋接js的方法逼侦。當(dāng)我第一次深入RN的時(shí)候，這方面的文檔非常的糟糕腰耙。每當(dāng)我意識到我需要連接某些事物的時(shí)候榛丢，我差點(diǎn)就對RN放棄了，因?yàn)檫@些事情早就能夠在Objective－C中正常運(yùn)作挺庞。但是當(dāng)她們更加詳細(xì)地解釋了橋接過程晰赞，提供優(yōu)秀的實(shí)例之后，這就無所懼怕了挠阁。它仍然是一個(gè)麻煩，但是我能夠預(yù)見到開源社區(qū)和nom上會(huì)有所有的橋接方案溯饵。事實(shí)上侵俗，大多數(shù)的iOSAPI已經(jīng)存在了。
漏洞丰刊，文檔隘谣，開源社區(qū)
大概所有我最初關(guān)于RN的抱怨現(xiàn)在都已經(jīng)消失殆盡，如果我從今天開始學(xué)習(xí)它的話。漏洞每天都在被修復(fù)寻歧，新版本每一周都在迭代掌栅。文檔還需要加把勁，但比以前好多了码泛。Facebook和開源社區(qū)對于研發(fā)這個(gè)框架變的十分嚴(yán)謹(jǐn)猾封。人們開始聚集在Github和Stack Overflow上探討它。如果你是一個(gè)正在考慮嘗試RN的iOS開發(fā)者噪珊，你要知道你不是一個(gè)人在戰(zhàn)斗晌缘。RN非常棒，你應(yīng)該帶著開放的態(tài)度擁抱他痢站。不要像我一樣吧自己局限在溫室里磷箕。
走出溫室，世界才剛開始阵难。
