[[144374]]

三端的三觀

大家別拍我，起這么個(gè)diao渣天的標(biāo)題是為了吸引你進(jìn)來，大家不要太在意用詞。先介紹下我自己，我是一個(gè)普普通通的開發(fā)者，平常喜歡自己搗鼓技術(shù)，所以涉獵比較廣，一些不太常用只是摸過幾腿的技術(shù)就不說了，至少現(xiàn)在每天都摸的技術(shù)大概有三端：前端，服務(wù)端，客戶端。這篇文章是我作為一個(gè)“三端”開發(fā)者角度對React Native的一點(diǎn)點(diǎn)看法，不會太具體，但是希望對大家的認(rèn)識能有個(gè)不同角度的指導(dǎo)。

作為一個(gè)iOS開發(fā)者，我的經(jīng)驗(yàn)大概有2年左右，雖然不是專業(yè)選手，但是一個(gè)App開發(fā)需要涉及到的東西基本都接觸過，坑也趟過不少，其實(shí)iOS開發(fā)的體驗(yàn)還是不錯的，熟練了以后構(gòu)建App還是很快的，不過里面也有不少麻煩的地方，例如：

代碼量大（那長長的方法名）

布局麻煩（特別是AutoLayout，光理解這個(gè)概念就要好幾天，而且很難用）

編譯調(diào)試耗時(shí)（比android快很多，但是還是很慢）

OC語言和Cocoa框架有些冗余的地方（一堆堆的屬性和繼承過來的方法）

用代碼定義樣式麻煩（Cocoa給UIView加點(diǎn)陰影邊框設(shè)置字體等，那代碼不忍直視）

有時(shí)候定位問題也挺難，動不動就報(bào)個(gè) main thread的報(bào)錯，完全下不了手（可能是我沒掌握好方法）

pods管理代碼，安裝個(gè)代碼等半天，有時(shí)候還要翻墻，很不穩(wěn)定，跟npm之類的沒法比。

而對于前端來說，還會對ios的開發(fā)有些其他的疑問，例如：

要是能用CSS寫樣式就好了

要是能實(shí)時(shí)調(diào)試界面樣式就好了

要是支持閉包就好了

要是回調(diào)寫起來跟JS一樣方便就好了（指OC中的block）

要是代碼跟JS一樣簡潔就好了

而React Native其實(shí)正是迎著這些問題而上，然后結(jié)合三端的優(yōu)點(diǎn)，搞出來的一個(gè)移動端開發(fā)框架。

且來看下他有哪些動人之處。

美麗動人的RN

我拿起React Native的第一次，就被它徹底打動了，拋開他的語法，對于前端來說奇奇怪怪的jsx（后面會討論），它的確解決了我作為一個(gè)三端工程師在不同技術(shù)端切換的時(shí)候備受的一些困擾，所以那天晚上，我完全沒睡著，翻來覆去的，然后跑到朋友圈發(fā)了句：“激動人心的技術(shù)，未來的發(fā)展方向”。第二天早晨，提前一兩個(gè)小時(shí)就醒過來，繼續(xù)寫了幾句RN，那酸爽，那心情。可能作為一個(gè)純粹的前端或者純粹的ios開發(fā)，很難理解，但是對于一個(gè)游走在三端的工程師，我看到了一個(gè)真正意義上的統(tǒng)一方案，而且，它足夠簡單。

React Native的上手很快，去看一下它的文檔，總共就一點(diǎn)點(diǎn)：入門，組件，功能。每個(gè)頁面都短短的一兩頁，的確就是這么簡單。不過這里我并沒有打算把這篇文章寫成一篇入門教程，所以并不會教你如何構(gòu)建一個(gè)簡單的RN應(yīng)用。

大概總結(jié)來，React Native讓我覺得值得一提的動人之處：

1. 把Cocoa里面的controller和view統(tǒng)一成了component，其實(shí)RN里只有component這個(gè)組件概念，既可以扮演頁面級別的組件（controller），也可以扮演一個(gè)模塊級別的組件（UIView)。入門門檻降低了很多。
2. 動態(tài)綁定，這個(gè)React的基本功能，被帶到了客戶端開發(fā)中來，數(shù)據(jù)和視圖是動態(tài)綁定的，數(shù)據(jù)發(fā)生變化，視圖會跟著變化，很多操作視圖的代碼都可以省略了。

3. 引入了類似于CSS（一個(gè)子集）的樣式管理，可以內(nèi)嵌到模塊，也可以全局使用，定義樣式變得非常簡單通用。
4. 引入了Flexbox布局，把iOS本身復(fù)雜的AutoLayout簡化，使用很方便，學(xué)習(xí)起來也更簡單。
5. 引入了方便的npm管理，有大量現(xiàn)成的nodejs包可以用（例如moment，underscore等常用模塊），還可以把自己項(xiàng)目模塊搞到內(nèi)部npm上做通用組件，另外，npm上還有不少別人寫的React Native的插件。例如下面這個(gè)。
6. 第三方組件里有一個(gè)可以把icon font引入項(xiàng)目的組件，可以在任何顯示圖標(biāo)的地方直接用icon font顯示，灰常方便。
7. 調(diào)試很方便，一次編譯后，每次改了js代碼，只需要在模擬器里command+R即可重新加載代碼。有問題會直接報(bào)錯，里面有代碼行數(shù)等詳細(xì)信息。
8. 完整封裝了各種js內(nèi)置的方法，例如：setTimeout，setInterval，XMLHttpRequest，localstorage，console.log等，都是用oc原生方法封裝的。
9. 引入ES6的支持，可以使用各種新特性，例如最常用的箭頭函數(shù)，解決this作用域亂套的問題。

一口氣列舉出這么多動人的地方，React Native這姑娘還真是不一般，簡直校花級別。（小插曲，我覺得React性格就是個(gè)姑娘，感性而簡單，而Angularjs則像是一位硬漢，笨重但是踏實(shí)而且很全面）。不過，人無完人，現(xiàn)階段ReactNative也有不少缺點(diǎn)，有些缺點(diǎn)可能會非常制約他的發(fā)展，急需改進(jìn)，不過還好RN目前只是開發(fā)階段，并不是正式版，該有的都會有的。

并非完美無瑕

我看來，目前ReactNative至少有這么幾個(gè)比較大的問題：

組件不全，第三方組件也不全，遇到某些特殊功能，需要搗鼓很久，例如攝像相關(guān)的，文件讀寫，文件上傳之類的組件。

性能并非媲美原生，還是有一些損耗的，特別是交換大數(shù)據(jù)的時(shí)候，例如讀取相冊。

只有iOS版，限制了在某些公司生產(chǎn)環(huán)境的使用。Android版不知道目前什么狀態(tài)。

iosOS和Android代碼并非通用，有可能會需要維護(hù)兩套，或者在代碼內(nèi)做一些判斷。

并非網(wǎng)上大家說的，寫一次代碼，多端通用，網(wǎng)頁版和客戶端版完全不是一個(gè)概念，只有部分代碼可重用。

把代碼都打包到bundle里面，不知道蘋果對這種開發(fā)方式是否會不太喜歡，甚至拒絕上線。

實(shí)際開發(fā)的時(shí)候，還是需要了解底層原理，自己開發(fā)跟原生橋接的組件，這個(gè)對普通前端來說是一個(gè)很大的挑戰(zhàn)。

有些問題，隨著時(shí)間的推移會慢慢解決，有些問題，則很難說，例如開發(fā)方式的問題。

對前端開發(fā)和客戶端開發(fā)意味著什么？

React Native一出來，有的人一頭鉆進(jìn)去開始研究，大部分人卻只是稍作了解，然后就投入到了論戰(zhàn)的圈子里。例如大家對React的jsx開發(fā)方式的批判，對React組件化開發(fā)方式的批判。其實(shí)還是那個(gè)問題：任何脫離場景的技術(shù)討論都是耍流氓。React并非萬能藥水，它的出現(xiàn)不是要大一統(tǒng)整個(gè)前端界的所有問題，它事實(shí)上只是為了解決一小類問題，所以不要指望你的產(chǎn)品能夠用React來解決那些他并不擅長的問題。而對于ReactNative來說，其實(shí)我覺得這正是體現(xiàn)React價(jià)值的一個(gè)非常吻合的一個(gè)場景。React在這個(gè)問題中扮演的角色，就是上面講到的他解決的那些問題，足夠多，而且很完美，這就是他存在的價(jià)值，不容否認(rèn)。

所以，大家要從理性的角度去看待新技術(shù)，不要一味排斥，不要套用現(xiàn)有的思維和場景。當(dāng)你用這樣的態(tài)度去看RN，你就能看到他的優(yōu)點(diǎn)和缺點(diǎn)，自做抉擇。

我從一個(gè)前端的角度來看ReactNative，有這樣的感覺：

它不是萬能藥水，只是一種高效的解決方案，不要期望它為你解決了所有問題，要不要使用，還是需要根據(jù)場景衡量，而不是脫離開來說它是好的或者是壞的。

事實(shí)上，目前看來，客戶端開發(fā)更適合寫RN，因?yàn)橐私饪蛻舳说哪翘组_發(fā)理念，對前端來說成本挺高，而對于客戶端開發(fā)，成本只是理解一個(gè)語言。

RN跟Html5沒有沖突，二者場景并不一樣，它要取代的是本來客戶端開發(fā)的部分工作，而不是H5頁面，因?yàn)樵谶@些場景下它并沒有明顯優(yōu)勢。

對于遇到瓶頸的前端來說，它是一個(gè)很好的擴(kuò)展自己技術(shù)棧的方向，有得玩，而且很好玩。

從一個(gè)客戶端開發(fā)的角度來看：

用ReactNative的確簡化了很多OC開發(fā)中的繁瑣步驟，比Swift也是更勝一籌。

JS、React社區(qū)的活躍度很高，有很大的開源組件開發(fā)空間，是一個(gè)不錯的參與開源社區(qū)的機(jī)會，大家很需要一些橋接原生的新組件。

NPM真的是太方便快速了！社區(qū)里無數(shù)可用的工具庫，在OC的世界里可不常見。

RN是前端侵占客戶端開發(fā)的觸角么？其實(shí)很難說，它跟NodeJS一樣，試圖侵入另一個(gè)領(lǐng)域，但是深入是非常難的，大部分人浮于表面，反而幫你承接了最惱人的頂層業(yè)務(wù)部分。

不過你應(yīng)該會覺得js真不嚴(yán)謹(jǐn)，而且回調(diào)很蛋疼，閉包很奇怪，作用域很難理解。也許是時(shí)候拋開自己舊時(shí)代對js的理解了，現(xiàn)在ES6也是一門很先進(jìn)的語言了。

未來的開發(fā)模式？

最近只是在試水，踩坑，然后我真的準(zhǔn)備在公司里把這個(gè)事情推動起來，因?yàn)槲矣X得它的確是有意義的，對開發(fā)效率有非常明顯的提升，不過現(xiàn)階段還只能是嘗試，畢竟它沒有發(fā)布正式版，然后還只有ios。不過踩坑也是為了積累，正式版發(fā)布后我們就可以快速切入了，到時(shí)候就會走的快人一步。

不過可以想象一下未來在生產(chǎn)環(huán)境的開發(fā)模式，跟NodeJS用來做中間件類似，其實(shí)RN最后應(yīng)該會扮演一個(gè)承接前端業(yè)務(wù)的角色，這部分開發(fā)工作，可以是前端來做，也可是客戶端來做，主要是用基礎(chǔ)組件完成業(yè)務(wù)開發(fā)，其實(shí)就類似于中間件的形式。

而客戶端開發(fā)的主要工作是構(gòu)建基礎(chǔ)組件，封裝一些原生橋接的組件供RN使用，基本上是通用組件，應(yīng)該是一個(gè)全公司級別的客戶端架構(gòu)組的概念。

前端做表層業(yè)務(wù) + 客戶端做底層組件支持。Perfect，還真是有點(diǎn)期待呢！

不扯蛋，埋頭去學(xué)

不要總是試著去評論一個(gè)技術(shù)，而是在大家都在學(xué)習(xí)的時(shí)候趕緊迎頭趕上去，學(xué)習(xí)總不會白白浪費(fèi)的，你看那些大牛，雖然他們以前學(xué)習(xí)的技術(shù)一直在不斷被淘汰，但是他們啥時(shí)候掉過隊(duì)。