[[144374]]

三端的三觀

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

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

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

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

編譯調試耗時（比android快很多，但是還是很慢）

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

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

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

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

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

要是能用CSS寫樣式就好了

要是能實時調試界面樣式就好了

要是支持閉包就好了

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

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

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

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

美麗動人的RN

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

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

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

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

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

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

并非完美無瑕

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

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

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

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

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

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

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

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

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

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

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

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

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

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

事實上，目前看來，客戶端開發(fā)更適合寫RN，因為要了解客戶端的那套開發(fā)理念，對前端來說成本挺高，而對于客戶端開發(fā)，成本只是理解一個語言。

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

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

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

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

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

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

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

不過你應該會覺得js真不嚴謹，而且回調很蛋疼，閉包很奇怪，作用域很難理解。也許是時候拋開自己舊時代對js的理解了，現在ES6也是一門很先進的語言了。

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

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

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

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

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

不扯蛋，埋頭去學

不要總是試著去評論一個技術，而是在大家都在學習的時候趕緊迎頭趕上去，學習總不會白白浪費的，你看那些大牛，雖然他們以前學習的技術一直在不斷被淘汰，但是他們啥時候掉過隊。