溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
首發(fā)鏈接：https://bbs.huaweicloud.com/blogs/70f69ca4953111e89fc57ca23e93a89f
《一統(tǒng)江湖的大前端》系列是自己的前端學(xué)習(xí)筆記，旨在介紹javascript在非網(wǎng)頁開發(fā)領(lǐng)域的應(yīng)用案例和發(fā)現(xiàn)各類好玩的js庫，不定期更新。如果你對(duì)前端的理解還是寫寫頁面綁綁事件，那你真的是有點(diǎn)OUT了，前端能做的事情已經(jīng)太多了,手機(jī)app開發(fā),桌面應(yīng)用開發(fā),用于神經(jīng)網(wǎng)絡(luò)人工智能的庫,頁面游戲,數(shù)據(jù)可視化, 甚至嵌入式開發(fā)，什么火就搞什么,活脫脫一個(gè)蹭熱點(diǎn)小能手。如果你也覺得前端的日常開發(fā)有些枯燥，不妨一起來看看前端的另一番模樣。如果本系列對(duì)你有用，請(qǐng)為我點(diǎn)贊，支持我繼續(xù)寫作。
[TOC]
許多入職前端的開發(fā)者，都是從熟練使用框架進(jìn)行業(yè)務(wù)邏輯開發(fā)而開始的。說到框架，Vue,React,Angular三大框架都已經(jīng)圈定了自己的用戶群，從粉絲的數(shù)量來說，Vue最多，接著是React，最后才是Angular，這樣的局面實(shí)際上與三個(gè)框架本身的優(yōu)劣并不完全相關(guān)。如果你使用過Angular.js1.X版本，就會(huì)明白上述三個(gè)框架可以統(tǒng)稱為第二代前端SPA框架，從歷史的角度來看，它們都用自己的方式解決了Angular.js1.X在SPA模型的實(shí)現(xiàn)中存在的一些問題；從未來的角度看，它們都是在實(shí)現(xiàn)尚未標(biāo)準(zhǔn)化的Web Component標(biāo)準(zhǔn)。如果只以熟練使用API進(jìn)行業(yè)務(wù)邏輯開發(fā)作為衡量標(biāo)準(zhǔn)，那么了解一個(gè)框架和了解以上三個(gè)框架沒有什么實(shí)質(zhì)性的區(qū)別，除非面試官自己就是個(gè)水貨，否則基本不可能因此就多給你一點(diǎn)薪水。
如果你所在的項(xiàng)目組已經(jīng)在使用某一個(gè)框架，那么對(duì)于一個(gè)新人來說，你只需要寫好分派給自己的業(yè)務(wù)邏輯任務(wù)，閱讀組內(nèi)老鳥的代碼，學(xué)習(xí)團(tuán)隊(duì)的組件開發(fā)范式并做好筆記，熟悉框架的生態(tài)，熟悉各類庫的API等等，積累經(jīng)驗(yàn)提升等級(jí)，完成最初的新手->前端開發(fā)者的轉(zhuǎn)職。
許多新手都有這樣的疑問，筆者的建議是
Vue->React->Angular。
Vue是最流行的，語法簡(jiǎn)潔，社區(qū)活躍度高，使用的人數(shù)也最多。而且稍復(fù)雜的問題幾乎都有完整的解決方案，很快就能夠上手業(yè)務(wù)邏輯，并在工作中持續(xù)進(jìn)步，如果你還不是一個(gè)熟練的前端開發(fā)者，你應(yīng)該優(yōu)先學(xué)習(xí)它。
React是第二個(gè)你應(yīng)該學(xué)習(xí)的框架，它的開發(fā)模式實(shí)際上和Vue非常類似，但在Vue中你還可以只使用ES5的語法進(jìn)行開發(fā)，而沒有ES6的基本知識(shí)，你可能連React項(xiàng)目的demo閱讀起來都有困難（React 從16.0版本已經(jīng)移除了創(chuàng)建組件的ES5方法createClass而推薦使用ES6的繼承來實(shí)現(xiàn)），同時(shí)瀏覽器也無法直接運(yùn)行那些奇怪的代碼，你不得不去學(xué)習(xí)一整套諸如ES6,Babel,Nodejs,Webpack等等經(jīng)常聽到卻沒有去研究的東西。學(xué)習(xí)React的目的，并不是讓你使用另一套API重構(gòu)自己的項(xiàng)目，而是強(qiáng)迫自己將技術(shù)棧拓展到整個(gè)大前端，并開始關(guān)注頁面開發(fā)以外的知識(shí)，學(xué)習(xí)的過程或許很漫長甚至痛苦，但最終你會(huì)發(fā)現(xiàn)自己的投入都是值得的。
Angular技術(shù)棧和生態(tài)可以作為選學(xué)內(nèi)容，如果你喜歡Java那種嚴(yán)謹(jǐn)?shù)木幊谭绞?，或許會(huì)喜歡這種前后端的技術(shù)棧組合，事實(shí)上Angular也是諸多后端同學(xué)倒騰前端時(shí)的選擇(也就是后端全棧工程師)。但從前端開始接觸程序開發(fā)的開發(fā)者可能一時(shí)間很難理解Java中的各級(jí)抽象，更不用說設(shè)計(jì)模式和周邊生態(tài)了。和前兩者相比，Angular更像是一個(gè)學(xué)院派的老學(xué)究，啰嗦卻嚴(yán)謹(jǐn)，它要求你即時(shí)是在使用Javascript這種玩具語言的同時(shí)，依舊要用完整的軟件工程的思維和流程來編寫代碼。但無論是否要深入研究，我都建議你能夠?yàn)g覽相關(guān)的技術(shù)棧和各類博文。
當(dāng)能夠熟練使用Vue或React技術(shù)棧和周邊生態(tài)時(shí)，你的能力已經(jīng)能夠稱得上是一名前端開發(fā)者了，和那些連基本業(yè)務(wù)邏輯都梳理不清楚的前端菜鳥有了明顯的距離。這個(gè)時(shí)候你需要對(duì)自己的未來做出一個(gè)選擇，太陽況且需要透鏡聚焦才能點(diǎn)燃紙張，你也應(yīng)該將自己的精力集中在更想去做的一個(gè)方向。
請(qǐng)記住，當(dāng)你有能力做出如下選擇的時(shí)候，你已經(jīng)能夠勝任前端開發(fā)者的大多數(shù)工作內(nèi)容。
? 職業(yè)介紹——前端工程師
前端工程師的技能書，是基于node.js開始擴(kuò)展的。這個(gè)階段的學(xué)習(xí)中，你需要掌握兩個(gè)大的技能模塊——擴(kuò)展編寫和前端工程化，也就是說你需要盡可能從面向使用者轉(zhuǎn)變?yōu)槊嫦蜷_發(fā)者和整個(gè)前端工程。擴(kuò)展編寫的能力讓你可以為團(tuán)隊(duì)的其他開發(fā)者封裝公共模塊，前端工程化可以讓團(tuán)隊(duì)其他開發(fā)者將主要精力專注于前端業(yè)務(wù)邏輯本身。
擴(kuò)展編寫
是指基本的組件抽象能力，你需要掌握為各類框架和工具編寫擴(kuò)展或公共組件的能力，例如編寫jQuery插件,Angularjs自定義指令,React組件，webpack或gulp功能擴(kuò)展組件，甚至使用C++為node.js編寫原生擴(kuò)展等等，甚至可以嘗試在自己封裝的組件中添加自定義擴(kuò)展的支持功能，它可以幫助你更好地去使用所選擇的技術(shù)棧，完成從“面向過程編程”到“面向?qū)ο缶幊獭钡幕舅季S方式轉(zhuǎn)變，讓你不再需要沒完沒了地去編寫重復(fù)的東西。
前端工程化
是指除代碼編寫以外的開發(fā)，部署，測(cè)試，上線及監(jiān)控等一系列環(huán)節(jié)的前端工作流的實(shí)現(xiàn)。對(duì)開發(fā)者來說，代碼寫完測(cè)試完就結(jié)束了，而對(duì)前端工程師來說，代碼的編寫只是整個(gè)工作流中的一個(gè)環(huán)節(jié)而已，要知道并不是你寫的代碼不報(bào)錯(cuò)，就意味著它可以被正確地展現(xiàn)在用戶面前。前端的自動(dòng)化工程提供了整套的代碼加工流程，讓諸如添加前綴后綴，CSShack，語法轉(zhuǎn)換，圖片合并，代碼混淆，代碼分割等等一系列功能變得自動(dòng)化。
? 職業(yè)介紹——初級(jí)圖形學(xué)工程師
如果對(duì)于掌控整個(gè)項(xiàng)目沒有什么興趣，或許你可以考慮圖形學(xué)的方向，初級(jí)圖形學(xué)工程師的技能書，是基于UI來擴(kuò)展的。圖形學(xué)其實(shí)是一個(gè)很寬泛的概念，筆者個(gè)人的理解的圖形學(xué)大致是包含數(shù)據(jù)可視化,高級(jí)UI設(shè)計(jì)開發(fā),GIS,游戲這幾個(gè)常見的細(xì)分方向。相比于架構(gòu)方向，圖形學(xué)更加生動(dòng)有趣，也更容易帶給開發(fā)者成就感。你覺得用一堆簡(jiǎn)陋的素材和創(chuàng)意做出一款游戲和用一大堆框架和依賴做出一個(gè)Hello world哪一個(gè)更有趣呢？大多數(shù)人都會(huì)選擇前者。但實(shí)際上大多數(shù)初級(jí)的前端開發(fā)并沒有太多機(jī)會(huì)去接觸這個(gè)方向的開發(fā)，因?yàn)?strong>圖形學(xué)往往需要處理很大的數(shù)據(jù)集，也就意味著它和性能這兩個(gè)字直接掛鉤，初級(jí)的前端大多是不具備這個(gè)方向的解決問題能力的。想要在這個(gè)職業(yè)方向上有所建樹，初級(jí)階段需要完成的學(xué)習(xí)包括：
數(shù)據(jù)可視化的基本實(shí)現(xiàn)
能夠熟練使用Echarts或者D3實(shí)現(xiàn)基本的數(shù)據(jù)可視化展現(xiàn)。
CSS3D，SVG，Canvas的相關(guān)開發(fā)能力
你需要重新學(xué)習(xí)CSS3D，SVG，Canvas這些平時(shí)項(xiàng)目中可能并沒有用到的技術(shù)。因?yàn)槟闼媾R的挑戰(zhàn)，不再是調(diào)整一下div元素的布局或是修改一下盒模型的尺寸，而是各類矢量圖形甚至大數(shù)據(jù)量的像素點(diǎn)級(jí)別的開發(fā)。
UI設(shè)計(jì)和動(dòng)效設(shè)計(jì)
你需要補(bǔ)充很多設(shè)計(jì)類的知識(shí)和技能來提高自己的審美和輸出作品的質(zhì)量。
請(qǐng)記住，當(dāng)你有能力做出如下選擇的時(shí)候，你已經(jīng)能夠勝任一轉(zhuǎn)職業(yè)的大多數(shù)工作內(nèi)容。
? 進(jìn)階職業(yè)介紹——前端架構(gòu)師
一個(gè)前端架構(gòu)師，需要開始研究各類框架的源代碼，研究其中的數(shù)據(jù)結(jié)構(gòu),設(shè)計(jì)模式,核心算法，并盡可能去從各個(gè)環(huán)節(jié)優(yōu)化代碼的整體性能，并為各類技術(shù)問題提供從語言級(jí)到架構(gòu)級(jí)的解決方案。
? 進(jìn)階職業(yè)介紹——高級(jí)圖形學(xué)工程師
高級(jí)圖形學(xué)工程師的開發(fā)工作是需要與設(shè)計(jì)相輔相成的，把一個(gè)表格改造成一個(gè)柱狀圖，那不叫圖形學(xué)。高級(jí)圖形學(xué)工程師，可以給出不輸于設(shè)計(jì)師的設(shè)計(jì)作品，可以做出優(yōu)雅且交互性非常好的前端頁面，也可以不斷去優(yōu)化代碼性能去加快渲染速度。
? 進(jìn)階職業(yè)介紹——游戲工程師
在獲得了初級(jí)圖形學(xué)工程師的技能后，再加上高中物理和高中數(shù)學(xué)的知識(shí)，就可以勝任前端游戲的開發(fā)，使用基于H5的游戲框架開發(fā)頁游，或者繼續(xù)將自己的技術(shù)棧擴(kuò)展至cocos2d或是unity這種更專業(yè)的框架引擎，甚至牛逼到自己開發(fā)高性能引擎，一切都取決于你自己的努力和意愿。
當(dāng)然，在前端進(jìn)步的過程中，你完全有可能最終成為后端工程師，項(xiàng)目經(jīng)理，系統(tǒng)工程師，算法工程師等等不同的角色，又或者是進(jìn)入了諸如人工智能,大數(shù)據(jù)分析,虛擬現(xiàn)實(shí),增強(qiáng)現(xiàn)實(shí)等某個(gè)很熱門的方向上繼續(xù)著自己的探索和成長，但請(qǐng)永遠(yuǎn)記得，語言本身并不是你進(jìn)入某個(gè)領(lǐng)域的阻礙，程序=數(shù)據(jù)結(jié)構(gòu)+算法，它并不受制于語言類別，不是只有python才能搞人工智能，也不是只有C++才能開發(fā)游戲，限制自己的，只有自己的意愿。
世界上最遠(yuǎn)的距離不是天堂到地獄，而是需求只有一行"Hello World"，我卻搞了好幾星期。
React帶來的不只是一個(gè)框架，更是一種新的前端工作流。
你需要學(xué)習(xí)ES6或更新的javascript規(guī)范，才能搞明白React中一大堆看起來很奇怪的語法；
你需要學(xué)習(xí)使用Babel，好讓自己編寫的jsx代碼和ES6語法的代碼最終被轉(zhuǎn)譯為瀏覽器能夠識(shí)別的代碼；
你需要重新學(xué)習(xí)javascript面向?qū)ο缶幊?/code>來理解組件的基本實(shí)現(xiàn)原理；
你需要加深對(duì)javascript基礎(chǔ)知識(shí)的理解，才能更好地理解諸如高階組件等高級(jí)用法的妙處；
你需要學(xué)習(xí)Redux數(shù)據(jù)管理架構(gòu)，來了解單向數(shù)據(jù)流和數(shù)據(jù)管理的思想和實(shí)現(xiàn)；
你需要學(xué)習(xí)Webpack，來管理整個(gè)前端工程的構(gòu)建和資源；
......
一個(gè)月以后，你終于能夠明白React是如何一步一步在空白的頁面上輸出一句"Hello World"了。
組件化開發(fā)是現(xiàn)代前端開發(fā)的一大趨勢(shì)，你需要在開發(fā)中仔細(xì)體會(huì)React中組件的意義，如果組件設(shè)計(jì)的合理，那么你幾乎永遠(yuǎn)不需要再去修改它，而是可以通過高階組件等一系列可以互相轉(zhuǎn)換的方式實(shí)現(xiàn)對(duì)原組件的功能擴(kuò)展。這種思維的轉(zhuǎn)變會(huì)讓你在未來的開發(fā)中省去很多重復(fù)的工作。強(qiáng)制使用的ES6語法，也可以為以后Java的學(xué)習(xí)打好基礎(chǔ)。
React的學(xué)習(xí)中，你會(huì)接觸到非常多開發(fā)理念或是軟件工程相關(guān)的思想，也會(huì)看到很多細(xì)節(jié)優(yōu)化和框架設(shè)計(jì)方面的東西，對(duì)構(gòu)建工具的使用也會(huì)讓你逐步熟悉現(xiàn)代化前端開發(fā)的流程。這些東西都不是React獨(dú)有的，你完全可以將所學(xué)習(xí)到的編碼技術(shù)，設(shè)計(jì)模式，框架知識(shí)等應(yīng)用在其他項(xiàng)目中，另外，對(duì)新技術(shù)保持一定的敏感性也是一個(gè)優(yōu)秀前端的必備素養(yǎng)。
如果沒有一個(gè)實(shí)戰(zhàn)項(xiàng)目，很容易在做完Demo之后就不知所措，而下一次的面試中被問及相關(guān)問題時(shí)，你也只能心里沒底地告訴面試官“了解過”。對(duì)于React的學(xué)習(xí)，筆者的建議是：通過關(guān)鍵詞來學(xué)習(xí)核心原理（2.1節(jié)中提及的關(guān)鍵詞應(yīng)該優(yōu)先學(xué)習(xí)）。
關(guān)鍵詞1——Virtual DOM
Virtual-DOM，即虛擬DOM樹。瀏覽器在解析文件時(shí)，會(huì)將html文檔轉(zhuǎn)換為document對(duì)象，在瀏覽器環(huán)境中運(yùn)行的腳本文件都可以獲取到它，通過操作document對(duì)象暴露的接口可以直接操作頁面上的DOM節(jié)點(diǎn)。但是DOM操作是非常耗性能的，它會(huì)導(dǎo)致頁面的重繪和重排。為了更好地處理DOM操作，提升項(xiàng)目性能，Virtual-DOM技術(shù)就誕生了。
Virtual-DOM技術(shù)是前端高性能的基石，它是真實(shí)document對(duì)象的抽象，通過對(duì)比新舊Virtual-DOM的區(qū)別，找出發(fā)生變化的DOM節(jié)點(diǎn)，再利用算法得到最優(yōu)的DOM節(jié)點(diǎn)修改方案，最終再將方案應(yīng)用在document對(duì)象上來改變頁面的展示內(nèi)容。
關(guān)鍵詞2——先序深度優(yōu)先遍歷
無論是根據(jù)Virtual-DOM來重現(xiàn)真實(shí)的DOM節(jié)點(diǎn)，還是當(dāng)數(shù)據(jù)模型變化后來對(duì)比新舊樹結(jié)構(gòu)的差異，都需要通過先序-深度優(yōu)先算法來遍歷虛擬DOM樹，逐個(gè)對(duì)比節(jié)點(diǎn)信息，從而達(dá)到目的。你完全可以在自己實(shí)現(xiàn)了Virtual-DOM以后，嘗試將其轉(zhuǎn)換為真實(shí)的DOM轉(zhuǎn)換到頁面上。同時(shí)，基礎(chǔ)算法的學(xué)習(xí)是非常有趣的，如果感興趣，你也可以嘗試去對(duì)比深度優(yōu)先遍歷的遞歸方法和棧方法，去了解廣度優(yōu)先遍歷，它們并不難實(shí)現(xiàn)，通過DOM這種可見結(jié)構(gòu)來幫助自己學(xué)習(xí)略顯抽象的搜索算法是非常好的學(xué)習(xí)路徑，因?yàn)槟憧梢院苤庇^地看到算法的每一步是如何運(yùn)行的。
關(guān)鍵詞3——DOM-Diff算法
DOM-Diff算法，是指如何對(duì)比兩棵虛擬DOM樹之間的差異，并把這些差異轉(zhuǎn)換為DOM節(jié)點(diǎn)真實(shí)變化的算法。React做了一些能夠明顯降低算法時(shí)間復(fù)雜度的假定，讓它變得高效。后文推薦的資料中有非常好的深度講解的博文，其中將元素列表的變化抽象為求解字符串的最小編輯距離(Levenshtein Distance)的部分非常精彩，筆者在此強(qiáng)烈推薦。你可以只去模擬其中1-2中簡(jiǎn)單的差別類型，來實(shí)現(xiàn)一下DOM-Diff算法，看看能否將虛擬DOM樹中的差異同步到自己的頁面上。
前端框架幾乎都是由【
Virtual-DOM模型 +DOM-Diff算法 + 生命周期鉤子】這樣的骨架模型來建立的。
關(guān)鍵詞4——Redux架構(gòu)
Redux是狀態(tài)管理架構(gòu)范式Flux的實(shí)現(xiàn)，它并不一定要和React配合才能使用。直觀地來看，狀態(tài)管理的思想把代碼中一個(gè)簡(jiǎn)單的賦值操作搞的異常復(fù)雜，你需要搞明白這種對(duì)于簡(jiǎn)潔性的犧牲到底換來的是什么，才能真正確定你是否需要使用Redux。狀態(tài)管理和單向數(shù)據(jù)流的思想以及框架中是如何跟蹤狀態(tài)的同步變更和異步變更是學(xué)習(xí)的重點(diǎn)。單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定并沒有絕對(duì)的優(yōu)劣之分，它們都有自己的適用場(chǎng)景，你應(yīng)該在恰當(dāng)?shù)臅r(shí)候適用恰當(dāng)?shù)姆绞?，而不是毫無根據(jù)地覺得某一個(gè)技術(shù)很牛逼。
關(guān)鍵詞5——React-Router
前端路由的基本原理并不復(fù)雜，你可以參考筆者的另一篇博文《造輪子-前端路由的基本原理》去了解。你需要了解的關(guān)鍵點(diǎn)，是React-Router如何實(shí)現(xiàn)按需加載，如何實(shí)現(xiàn)前端路由和服務(wù)端渲染的兼容，底層的原理是什么。如果能借研究路由的匹配策略好好夯實(shí)一下正則表達(dá)式的相關(guān)知識(shí)那就更好了。
關(guān)鍵詞6——×××(服務(wù)端渲染)
×××并不是什么新鮮的技術(shù)，事實(shí)上在Angularjs1.x將SPA模型帶到人們面前時(shí)，前端網(wǎng)頁本來就是后端通過模板引擎來渲染，然后把整個(gè)HTML結(jié)構(gòu)返回給前端，前端只負(fù)責(zé)展示就可以了。×××解決的問題，是為了解決SPA模型首屏渲染速度慢的問題，因?yàn)橄啾扔趥鹘y(tǒng)的服務(wù)端渲染而言，SPA模型在首次訪問時(shí)需要加載更多的腳本文件，然后才會(huì)開始渲染，而腳本加載期間的白屏造成的用戶體驗(yàn)是很差的。×××技術(shù)的實(shí)質(zhì)就是將首屏渲染工作轉(zhuǎn)移到服務(wù)端以求獲得更快的渲染速度的技術(shù)，當(dāng)然如何優(yōu)雅地使用還涉及很多細(xì)節(jié)的問題。你需要去了解react-dom是如何在服務(wù)端實(shí)現(xiàn)DOM字符串渲染的，事實(shí)上它和其他后端的模板引擎并沒有本質(zhì)的區(qū)別。你完全可以在自己已經(jīng)存在的exprss或KOA工程中手動(dòng)實(shí)現(xiàn)頁面的服務(wù)端渲染。
關(guān)鍵詞7——ISOMorphic(同構(gòu))
不得不說這是一個(gè)逼格很高的概念，它是×××的升級(jí)。同構(gòu)，實(shí)際上就是指同一套代碼既能夠運(yùn)行在瀏覽器，也能夠運(yùn)行在服務(wù)端運(yùn)行。為什么通過SPA模型實(shí)現(xiàn)的前端應(yīng)用要運(yùn)行在服務(wù)端？答案是給搜索引擎看。由于爬蟲只爬取靜態(tài)頁面的特點(diǎn)，依賴于ajax的SPA模型在搜索引擎優(yōu)化方面有著天然的劣勢(shì)。我們?cè)跒g覽器中看到的豐富的內(nèi)容，在爬蟲看來可能只是一堆空白的標(biāo)簽或是沒有意義的內(nèi)容。大型框架均提供了完整的解決方案（Angular有Angular-Universal,Vue有Nuxt.js，React有Next.js）好讓你在使用對(duì)應(yīng)的技術(shù)棧時(shí)更好地實(shí)現(xiàn)同構(gòu)，你可以挑選其中之一來進(jìn)行簡(jiǎn)單學(xué)習(xí)，加深對(duì)同構(gòu)的直觀理解。如果有SEO相關(guān)的需求，直接去學(xué)習(xí)使用就好了。
這些關(guān)鍵詞并不代表React的全部精華，但已足夠讓你為一個(gè)真正的React項(xiàng)目做好準(zhǔn)備，甚至你會(huì)發(fā)現(xiàn)自己對(duì)于React的理解，比很多經(jīng)歷過實(shí)戰(zhàn)項(xiàng)目的開發(fā)者還要深刻。
React全家桶是非常龐大的，筆者自己在學(xué)習(xí)中閱讀到了很多非常優(yōu)秀的資料，覺得并沒有必要再重復(fù)去寫相關(guān)博文，在此將一些必要的或是優(yōu)質(zhì)的資源推薦給想要學(xué)習(xí)的讀者們，愿你們?cè)?code>React學(xué)習(xí)中獲得進(jìn)步。
1. 阮一峰的ES6教程 http://es6.ruanyifeng.com/
這個(gè)推薦可能有點(diǎn)多余，你在網(wǎng)上能找到的許多ES6的資料都是它的復(fù)制版。
2. React中文網(wǎng) https://doc.react-china.org
閱讀官方文檔是第一步，文檔中的【高級(jí)】部分似乎在手機(jī)上無法顯示，需要在PC端閱讀。
3. React-Router路由文檔 https://reacttraining.com/react-router
從最基本的用法到按需加載和服務(wù)端渲染，全部都有對(duì)應(yīng)實(shí)例，非常走心的官方文檔。
4. React小書 http://huziketang.mangojuice.top/books/react
如果除官方文檔以外，你只有時(shí)間讀一本書，那便是這本了。開源的45篇博文，通過問題 + 推演 + 實(shí)例的方式讓你了解React中每個(gè)部分存在的必要性和程序設(shè)計(jì)的考慮點(diǎn)，無疑是筆者讀過的資料里最好的。
5. 深度解析Virtual-Dom的實(shí)現(xiàn)算法 https://github.com/livoras/blog/issues/13
講述Virtual-DOM的非常棒的一篇博文，值得一讀，畢竟Virtual-DOM是前端框架的基礎(chǔ)。
6. Redux中文文檔 https://github.com/camsong/redux-in-chinese
來自github的文檔資源，提供各種格式的電子書。
7. Redux帶中文注釋源碼https://github.com/KyrieChen/redux-chinese-comment
redux的代碼并不多，理解了思想和使用方法后，從源代碼的編寫也能夠?qū)W習(xí)到很多寶貴的經(jīng)驗(yàn)。
8. 慕課網(wǎng)關(guān)于React的課程 http://www.mooc.com
慕課網(wǎng)有非常多高質(zhì)量的React入門課程。
送個(gè)【彩蛋】給閱讀到最后的你~~
全球最大的同×××友網(wǎng)站
github上，有一個(gè)非常棒的awesome系列的項(xiàng)目，幾乎每一個(gè)你用到的技術(shù)棧，都對(duì)應(yīng)著這樣一個(gè)導(dǎo)航類的開源項(xiàng)目(例如awesome-react)，其中收錄了包含基礎(chǔ)教程，視頻教程，插件生態(tài)，高級(jí)技術(shù)，源碼解讀等非常非常多資源的地址，其他的就不用我多說嘍~
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
