|
本文配圖來自《復(fù)仇者聯(lián)盟4》相關(guān)劇照。 開篇前，我們不妨先回顧下2018前端的重大事件，從而探究事件背后的技術(shù)趨勢和熱點話題，
隨著框架和工程化的探索趨于穩(wěn)定，如何更好的用，更簡單的用？目前，各家大廠都在前端技術(shù)棧思考如何選型和降低成本，統(tǒng)一技術(shù)棧。同時，應(yīng)用輕量化也成熱點趨勢，小程序成為最火技術(shù)，PWA進入穩(wěn)定，從而引發(fā)“移動端跨平臺性”的問題思考和熱議。 （附：2019年大前端技術(shù)趨勢深度解讀：https://mp.weixin.qq.com/s/WWqsd-SnILUWbiKEnSArDQ） 數(shù)據(jù)表明：無React，不前端 根據(jù)《2018 年度JavaScript趨勢報告》顯示，目前React 在前端領(lǐng)域流行度最高， Vue 排名位居第二，但從“使用過并且將再次使用”的比例來看，Vue和React相比仍有不小差距。 （注：共有來自 153 個不同的國家共 20000 多名 JavaScript 開發(fā)者參與調(diào)查，中國共75個開發(fā)者占總數(shù)的 0.37%，中國也許這個數(shù)據(jù)會有一些不同） 往往大中型企業(yè)偏向于React，除Facebook，Instagram，Netflix，微軟等眾多國際知名互聯(lián)網(wǎng)公司都是React.js的擁躉者外，國內(nèi)很多主流互聯(lián)網(wǎng)公司如騰訊、螞蟻金服、京東、360、美團、攜程等也在用 React ，即使有大廠由于業(yè)務(wù)等原因不直接使用，但仍沒有脫離React社區(qū)。 React 是怎樣煉成的？
本文引述部分內(nèi)容，查看完整內(nèi)容，請移步原文鏈接。 內(nèi)容整理自 2014 年的 OSCON- React Architecture by vjeux，雖然從今天（2019）來看可能會有點歷史感，但仍然值得學(xué)習(xí)了解。以史為鑒，從中也可以管窺Facebook 優(yōu)秀的工程管理文化。 字符拼接時代 - 2004 時間回到 2004 年，Mark Zuckerberg 當(dāng)時還在宿舍搗鼓最初版的 Facebook 。這一年，大家都在用 PHP 的字符串拼接（String Concatenation）功能來開發(fā)網(wǎng)站。 $str = '<ul>';foreach ($talks as $talk) { $str = '<li>' . $talk->name . '</li>';}$str = '</ul>';這種網(wǎng)站開發(fā)方式門檻低，安全性能差，容易造成 XSS 注入等問題。最簡單的應(yīng)對方法是對用戶的任何輸入都進行轉(zhuǎn)義（Escape），但如果又不小心把HTML 標(biāo)簽（Markup）給轉(zhuǎn)義了，那么 HTML 標(biāo)簽會直接顯示給用戶，從而導(dǎo)致很差的用戶體驗。 XHP時代- 2010 到了 2010 年，為了更加高效的編碼，同時也避免轉(zhuǎn)義 HTML 標(biāo)簽的錯誤，F(xiàn)acebook 開發(fā)了 XHP 。XHP 是對 PHP 的語法拓展，它允許開發(fā)者直接在 PHP 中使用HTML 標(biāo)簽，而不再使用字符串。
不久的后來，F(xiàn)acebook 的工程師又發(fā)現(xiàn)他們還可以創(chuàng)建自定義標(biāo)簽，而且通過組合自定義標(biāo)簽有助于構(gòu)建大型應(yīng)用。而這恰恰是 Semantic Web 和 Web Components 概念的一種實現(xiàn)方式。 $content = <talk:list />;foreach ($talks as $talk) { $content->appendChild(<talk talk={$talk} />);}之后，F(xiàn)acebook 在 JS 中嘗試了更多的新技術(shù)方式以減小客戶端和服務(wù)端之間的延時。比如跨瀏覽器 DOM 庫和數(shù)據(jù)綁定，但是都不是很理想。 JSX- 2013 等到 2013 年，突然有一天，前端工程師 Jordan Walke 向他的經(jīng)理提出了一個大膽的想法：把 XHP 的拓展功能遷移到 JS 中。 要想把 XHP 的拓展功能遷移到 JS ，首要任務(wù)是需要一個拓展來讓 JS 支持 XML 語法，該拓展稱為 JSX 。
React 自此，開始了 React 的萬里長征，其中，最棘手的是如何再現(xiàn) PHP 中的更新機制？ 在 PHP 中，每當(dāng)有數(shù)據(jù)改變時，只需要跳到一個由 PHP 全新渲染的新頁面即可。
雖然簡單粗暴，但是這種方式的缺點也尤為突出，那就是它非常慢。 “You need to be right before being good”，意思是說，為了驗證遷移方案的可行性，開發(fā)者必須快速實現(xiàn)一個可用版本，暫時不考慮性能問題。 取自于 PHP 的靈感，引入js，于是，問題最終轉(zhuǎn)化為，如何實現(xiàn)了對 DOM 節(jié)點的版本控制？如何對React 進行持續(xù)性優(yōu)化？ 這個時候 Facebook 做了個重大的決定，那就是把 React 開源！ React的學(xué)習(xí)路徑——從菜鳥到大牛
如果你想開始學(xué)習(xí)React又不知道該從何學(xué)起的話，你不妨看看本文。當(dāng)然，要學(xué)習(xí)React，你必須具備基本的HTML、CSS和JavaScript的知識，如果你之前從未接觸過前端開發(fā)，那么我建議你先學(xué)習(xí)基礎(chǔ)知識。 “憑什么聽你的？” React教程那么多，為什么要聽聽我的建議呢？我曾是Facebook團隊的一員并參與創(chuàng)建和開源React，對React有著較深的理解?，F(xiàn)在我已經(jīng)出來創(chuàng)業(yè)，因此我同時還有著不同于Facebook的一些觀點。 如果看待React的生態(tài)？ 每個軟件都是基于一個技術(shù)棧來實現(xiàn)的，因此如果想要創(chuàng)建你自己的應(yīng)用，你就必須充分理解自己的技術(shù)棧。React的生態(tài)看上去很復(fù)雜的原因便是人們通常沒有按照正確的順序來去學(xué)習(xí)。 你需要按照下面的順序一步一步地學(xué)習(xí)，不要跳著學(xué)或者同時學(xué)習(xí)多個內(nèi)容，否則你會感到非?；靵y。 基本內(nèi)容：
當(dāng)然，并不是要把這些內(nèi)容全部學(xué)完你才能開始使用React，你完全可以先學(xué)一步并著手做一點東西，當(dāng)你發(fā)現(xiàn)這一步的知識不足以解決你現(xiàn)在遇到的問題時你再開始下一步的學(xué)習(xí)。 下面我會一一介紹每一個技術(shù)的學(xué)習(xí)要領(lǐng)，大家根據(jù)自己的需要來看就好。 基礎(chǔ)部分 1.學(xué)習(xí)React 開始學(xué)習(xí)React并不需要大量的準備工作。在官網(wǎng)的文檔里你可以發(fā)現(xiàn)一個可以直接復(fù)制的HTML模板，將它粘貼到你的本地html文件中就可以開始學(xué)習(xí)啦。在這一步你不要去管什么工具，你只需要理解React的基礎(chǔ)知識就好，當(dāng)你熟悉了基礎(chǔ)知識之后再去學(xué)習(xí)各種工具的用法。 2.學(xué)習(xí)npm npm是Node.js的包管理工具，也是目前前端開發(fā)者和設(shè)計師們共享代碼的最熱門的工具。它集成了一個模塊系統(tǒng)CommonJS，可以讓開發(fā)者安裝一些命令行工具。建議大家看看 文章來了解一下為什么CommonJS對于瀏覽器來說是必要的（原文：https:///2013/01/22/commonjs-why-and-how/），如果想進一步了解CommonJS的API的話可以看看 這篇（原文：http://wiki./wiki/Introduction）。 3.學(xué)習(xí)JavaScript打包工具 出于一些技術(shù)的原因，瀏覽器并不原生支持CommonJS模塊。你需要一個JavaScript打包工具來將這些模塊打包成一個.js文件，在網(wǎng)頁中引入這個打包后的文件就可以在瀏覽器中運行了。 典型的打包工具有Webpack和browerify。二者都是個不錯的選擇，但是我更推薦Webpack，因為它具備很多簡化大型項目開發(fā)的特性。由于Webpack的文檔比較晦澀難懂，我針對React設(shè)計了一個 Webpack模板 （地址：https://github.com/petehunt/react-webpack-template），如果你想進一步了解Webpack的進階用法的話，你可以看看 這篇 文章（原文：https://github.com/petehunt/webpack-howto）。 有一個誤區(qū)需要避免：CommonJS利用require()方法來加載模塊，因此很多人會下意識地認為他們需要一個require.js來完成這項工作。事實上由于一些技術(shù)上的問題我并不推薦你使用require.js，更何況不引入這個庫你也可以使用require()方法。 4.學(xué)習(xí)ES6 除了JSX（你在React基礎(chǔ)部分會學(xué)到）以外，你會在React的示例中看到一些陌生的符號。它們便是ES6（ECMAScript第6版，JavaScript最新的語法標(biāo)準）的新語法，在你學(xué)習(xí)基礎(chǔ)JavaScript的時候不曾遇到過。由于它太新了（2015年頒布），因此還沒有得到很好地瀏覽器支持，但是你的打包工具可以在打包的同時將ES6轉(zhuǎn)成ES5的語法以獲得更好的瀏覽器支持。 當(dāng)然，使用React不代表一定要使用ES6，你大可以跳過ES6，將重點放在React本身。但是ES6的一些概念解決了很多以往JavaScript的語法問題，建議不打算學(xué)習(xí)ES6的朋友有精力的時候也了解一下。 強調(diào)一點：有些人會推薦你用ES6中新的類來定義React組件，而我建議你不要這么做。事實上多數(shù)人（包括Facebook的開發(fā)者）在創(chuàng)建React組件時使用的是React.createClass()方法。 5.學(xué)習(xí)路由 單頁應(yīng)用是當(dāng)今的主流。單頁的應(yīng)用只加載一次網(wǎng)頁，當(dāng)用戶點擊鏈接或按鈕的時候，JavaScript代碼會更新頁面的內(nèi)容和地址欄內(nèi)容，但是網(wǎng)頁并沒有刷新。地址欄的管理器就被稱為路由。React的生態(tài)中最受歡迎的且最好用的路由是react-router，創(chuàng)建單頁應(yīng)用的朋友一定要嘗試一下。 6.學(xué)習(xí)Flux 你可能聽說過Flux，而且很多關(guān)于Flux的誤解你可能也聽說過。 很多人在創(chuàng)建應(yīng)用的使用需要定義一個數(shù)據(jù)模型，然后他們認為他們需要Flux來實現(xiàn)它。 這不是Flux的正確使用方法 。Flux應(yīng)該在很多組件加載之后加載。 React組件通常會構(gòu)成一個層級結(jié)構(gòu)。多數(shù)情況下，你項目的數(shù)據(jù)模型也需要構(gòu)成一個層級結(jié)構(gòu)。這時Flux并不適合你的項目。然而有時候你的數(shù)據(jù)模型并沒有構(gòu)成層級關(guān)系。當(dāng)你的React組件開始接收無關(guān)聯(lián)的props值，或者你的一些組件開始變得非常復(fù)雜的時候，你可能才需要使用Flux。 你會清楚你什么時候需要Flux的。如果你不確定你是否需要使用它，那就不要用。 如果你確定需要使用Flux的話，那么我建議你使用目前最受歡迎且文檔齊全的Flux庫——Redux。當(dāng)然Flux的框架不止這一個，但是我建議大家去用最熱門的那一個。 以上便是React技術(shù)棧中的基礎(chǔ)部分，大部分開發(fā)者了解到這一步就可以了。如果你已經(jīng)熟悉了React的用法并有了一定的項目經(jīng)驗，你可以接著學(xué)習(xí)下面這些進階技術(shù)。 進階部分 1.學(xué)習(xí)內(nèi)聯(lián)樣式 在React誕生之前，很多開發(fā)者通過SASS這樣的預(yù)編譯器來重用非常復(fù)雜的樣式表。因為React簡化了重用組件的方法，因此你的樣式表也可以被簡化了。社區(qū)里的很多人（包括我）甚至都開始嘗試不寫樣式表。這是一個非常瘋狂的想法，它使得媒體查詢變得復(fù)雜，而且還會對性能產(chǎn)生潛在的影響。因此，建議各位剛接觸React的時候， 用你最常用的方法來編寫樣式 。 如果你已經(jīng)習(xí)慣了React的用法，你可以嘗試使用其他技術(shù)來寫樣式。最熱門的技術(shù)便是 BEM（地址：https://en./）。逐步放棄使用那些CSS預(yù)編譯器吧，React給你提供了一個更加強大的方法來重用樣式，你的JavaScript打包工具會生成更加高效的樣式表。 你也可以嘗試一下CSS模塊，如 react-css-modules（地址：https://github.com/gajus/react-css-modules） 。你仍可以編寫純CSS或SASS/LESS/Stylus，但是你可以像React的內(nèi)聯(lián)樣式那樣管理、組織你的CSS文件。你不需要像BEM那樣再為管理類的名稱而費心，因為模塊系統(tǒng)都幫你完成了。 2.學(xué)習(xí)服務(wù)端渲染 服務(wù)器渲染通常又稱為“全局”或“同構(gòu)”JS，是指將React組件在服務(wù)端渲染成靜態(tài)HTML文件。這會加快首次加載的速度，因為用戶不需要等待瀏覽器下載JS即可看到初始的UI，而且React可以重用服務(wù)端渲染的HTML，因此不需要在客戶端創(chuàng)建。 如果你發(fā)現(xiàn)你的首次渲染速度太慢或者你想提升你的搜索引擎排名的話，你可以嘗試一下服務(wù)端渲染。盡管谷歌以客戶端渲染的內(nèi)容為索引，但是在2016年1月份開發(fā)者通過實際測試發(fā)現(xiàn)：由于客戶端渲染有潛在的性能問題，它對排名是有負面影響的。 要想正確使用服務(wù)端渲染還需要很多工具。即便你在編寫時沒有考慮到服務(wù)端渲染的問題，它也可以很好地支持React組件。因此你應(yīng)該先創(chuàng)建好你的應(yīng)用，之后再考慮服務(wù)端渲染的問題。你不需要為了支持服務(wù)端渲染而去把你的所有組件重寫一遍。 3.學(xué)習(xí)Immutable.js Immutable.js（查看：https://immutable-js./immutable-js/） 提供了很多可以解決React性能問題的數(shù)據(jù)結(jié)構(gòu)。如果你想改進你的應(yīng)用的性能，你不妨嘗試一下它。 4.學(xué)習(xí)Relay和Falcor 這些技術(shù)可以幫助你減少AJAX請求的次數(shù)。它們是非常前沿的技術(shù)，如果你的AJAX請求并不是很多，那么你就不需要使用它們。 結(jié)語 說了這么多，你可能還是會覺得要學(xué)的東西好多。為什么說你的技術(shù)儲備是一個技術(shù)棧？因為你會根據(jù)需要不斷地去push進去新的東西。這個push的過程不是無腦的。優(yōu)先將基礎(chǔ)的東西push進去并不斷消化。當(dāng)你的技術(shù)棧的基礎(chǔ)穩(wěn)固了，出現(xiàn)了更多的需要時，再去push新的東西。如果一股腦的沒有順序的push進太多東西，你的技術(shù)棧會瞬間崩塌，你也會變得不知所措。 因此，記住一點：根據(jù)你的需要來學(xué)習(xí)，從基礎(chǔ)開始。 幾個必看的React開源項目
1.Facebook’s F8 Conference App 項目地址 https://github.com/fbsamples/f8app 2.Reading 來自餓了么RN大神開源的reading項目,已經(jīng)完成Android和iOS雙適配。絕對是一個產(chǎn)品級的開源項目，并且作者還在持續(xù)的更新。值得一薦！ 項目地址: https://github.com/attentiveness/reading 3.Weather 該為國外一個天氣預(yù)報客戶端,界面效果簡約優(yōu)美，作者借鑒F8項目同時客戶端數(shù)據(jù)來自真實國外的天氣預(yù)報API。這天氣預(yù)報客戶端體驗估計已經(jīng)給原生開發(fā)者造成10000點傷害了。 項目地址: https://github.com/stage88/react-weather 4.GithubFeed 該項目來自阿里開發(fā)人員,你的又一Github客戶端哦~項目github也超過了1000個star。 項目地址： https://github.com/xiekw2010/react-native-gitfeed 5.React-Native-NBA-App 這個項目主要進行查看NBA相關(guān)數(shù)據(jù),界面做的非常Nice，項目整體架構(gòu)也非常不錯,關(guān)鍵還有圖表界面，同時適配Android和iOS雙平臺。也是大家不可多得學(xué)習(xí)的項目。推薦！ 項目地址: https://github.com/wwayne/react-native-nba-app 6.HackerNews 采用純React Native開發(fā)的HackerNews客戶端,同時兼容Android、iOS雙平臺。用到很多常用的開源組件，而且非常適合初學(xué)者入門的項目。有借鑒意義。 項目地址: https://github.com/iSimar/HackerNews-React-Native 7.iShiWuPai iShiWuPai是基于React Native和Redux實現(xiàn)的展示型美食類APP。不過當(dāng)前暫時只適配iOS版本,但是效果絕對贊了~ 項目地址: https://github.com/ljunb/react-native-iShiWuPai 8.HiApp 采用React Native開發(fā)的一款基于類似微博以及聊天App,同時兼容Android、iOS雙平臺,甚至還有Web端。整體功能有很多可以學(xué)習(xí)的地方。例如效果布局,多語言切換等等。 項目地址: https://github.com/BelinChung/react-native-hiapp 寫到最后 本文，我們從React的產(chǎn)生聊到學(xué)習(xí)路徑/項目實踐，從底層講到應(yīng)用。那么，如何結(jié)合實際工程環(huán)境，利用現(xiàn)有的React 和js知識，開發(fā)和部署出功能完備的原生APP? 這里推薦一本邦尼·艾森曼（Twitter工程師）的《React Native開發(fā)指南（第2版）》 掃一掃，京東購 ●Twitter工程師經(jīng)驗總結(jié) 本書是一本實踐指南，從基礎(chǔ)知識入手，逐步深入，帶領(lǐng)讀者部署可100%代碼復(fù)用的、成熟的跨平臺移動應(yīng)用。除了框架本身的講解，作者還探討了如何使用第三方庫，以及如何編寫自己的Java或者Objective-C的React Native擴展。第2版新增了部分章節(jié)及附錄，討論了如何在跨平臺組件中實現(xiàn)特定平臺的代碼，通過Redux庫來管理狀態(tài)，以及對React Native初學(xué)者更友好的Expo應(yīng)用。 結(jié)合應(yīng)用輕量化趨勢，如小程序技術(shù)，PWA，談?wù)勀銓?strong>“移動端跨平臺性問題”的思考和理解？ 精選留言獲贊前3名，同時，隨機抽取2位同學(xué)各送一本《React Native開發(fā)指南（第2版）》！ 活動截止2019.5.17 圖靈社區(qū) 讀好書，讓代碼更高效！ 技術(shù)|交流|圖書|社群 |
|
|
