[[149369]]

最近一段時(shí)間，把React學(xué)習(xí)實(shí)踐了一把，算是又多掌握了一門新技術(shù)，雖然學(xué)習(xí)過程比較辛苦曲折，但熟練掌握后感覺還是很好的，以后又多了一種選擇，在技術(shù)思路上也開闊了很多。

回想編程生涯這些年，2001年開始學(xué)習(xí)Asp，2002年學(xué)習(xí)Javascript，2003年學(xué)習(xí)Asp.Net/C#，2009年學(xué)習(xí)Objective-C，2013年又跳到前端這個(gè)大坑，從Nodejs到jQuery到Angularjs到現(xiàn)在的React。這一路學(xué)來，走過一些彎路，也積累了不少學(xué)習(xí)的經(jīng)驗(yàn)。

積極開放的心態(tài)最重要

學(xué)習(xí)新技術(shù)，就如探索一片新的領(lǐng)域，一般在心態(tài)上來說，都會(huì)有兩種典型的心態(tài)，一種是恐慌和抗拒的，一種是積極和開放的，不同的心態(tài)會(huì)造成不同的結(jié)果。比如對(duì)我自己來說，對(duì)于編程技術(shù)，一直是我所喜歡的，所以編程的新技術(shù)，總是能積極的去學(xué)習(xí)，并且能很快掌握。而對(duì)于英語和寫作，從上學(xué)開始，就一直是我所不喜歡不擅長(zhǎng)的領(lǐng)域，所以即使學(xué)了很多年，也并沒有什么明顯的進(jìn)步。直到后來工作后，逐步意識(shí)到英語和寫作的重要性，在心態(tài)上作出了調(diào)整，積極的去面對(duì)，到現(xiàn)在總算是改善了很多。

學(xué)習(xí)新技術(shù)的另一個(gè)障礙來源于已經(jīng)熟練的技術(shù)。當(dāng)好不容易把一門技術(shù)掌握的很熟練后，雖然這在將來學(xué)習(xí)新東西時(shí)，會(huì)幫助少走很多彎路，但同時(shí)可能也會(huì)變成一種障礙。

我曾對(duì)幾門語言掌握的相當(dāng)熟練，甚至有些曾以為自己精通了。比如當(dāng)年對(duì)于asp，可以熟練的完成在當(dāng)年技術(shù)條件下的復(fù)雜BS系統(tǒng)，雖然按現(xiàn)在標(biāo)準(zhǔn)來看，也無非是用vbs對(duì)數(shù)據(jù)庫增刪改查，那時(shí)候交互并不復(fù)雜，還能配合寫一些簡(jiǎn)單的javascript，讓體驗(yàn)更好一些。那時(shí)候覺得會(huì)了Asp，可以搞定所有的BS系統(tǒng)開發(fā)了。后來Asp.Net出來了，心理很復(fù)雜，一方面覺得我用Asp已經(jīng)啥都可以搞定了，為什么要學(xué)Asp.Net？另一方面覺得這個(gè)是未來發(fā)展的趨勢(shì)，還是應(yīng)該學(xué)習(xí)掌握，不然以后可能跟不上時(shí)代發(fā)展。結(jié)果還是硬著頭皮去學(xué)。只是每次遇到困難挫折的時(shí)候，就會(huì)有放棄回去寫Asp的念頭，覺得這要是我用Asp來寫，早搞定了，何必這么苦逼學(xué)新技術(shù)呢？

當(dāng)我終于有一天，對(duì)Asp.Net熟練掌握后，才發(fā)現(xiàn)自己原來的淺薄無知，以前Asp也就是停留在腳本編程，到了Asp.Net，已經(jīng)可以用面向?qū)ο蟮乃枷肴ピO(shè)計(jì)架構(gòu)，甚至于出了網(wǎng)頁，還可以去開發(fā)后臺(tái)服務(wù)。這對(duì)于我來說，相當(dāng)于又打開了一扇新的大門，可以從更寬廣的角度來看待問題。

從心理學(xué)的角度來說，我們對(duì)于外部世界的認(rèn)識(shí)可分為三個(gè)區(qū)域：舒適區(qū)，學(xué)習(xí)區(qū)，和恐慌區(qū)。我們所熟悉的技術(shù)領(lǐng)域就是舒適區(qū)，而新技術(shù)是處于學(xué)習(xí)區(qū)或恐慌區(qū)。隨著對(duì)新技術(shù)的掌握，新技術(shù)會(huì)進(jìn)入舒適區(qū)，但是總還會(huì)有更新的技術(shù)在學(xué)習(xí)區(qū)甚至恐懼區(qū)，等著去學(xué)習(xí)掌握。

如果想高效的學(xué)習(xí)掌握新技術(shù)，在心態(tài)上一定得是開放和積極的。

做中學(xué)(Learning By Doing)

如果沒有@鄒欣老師的《構(gòu)建之法》，我可能沒法這么精準(zhǔn)的去概括這種邊做邊學(xué)的方法，對(duì)于軟件技術(shù)的學(xué)習(xí)，***效的辦法應(yīng)該就是“做中學(xué)”。

如何通過“做中學(xué)”去學(xué)習(xí)掌握新技術(shù)，我一般分成這樣幾個(gè)步驟：

1. 整體概覽
2. 明確階段性目標(biāo)，選擇實(shí)踐項(xiàng)目
3. 搜集整理相關(guān)文章和開源項(xiàng)目，模仿借鑒

整體概覽

所謂磨刀不誤砍柴工，在動(dòng)手去做前有必要先做一些準(zhǔn)備工作。在開始學(xué)習(xí)一門新技術(shù)的時(shí)候，先對(duì)新技術(shù)整體有個(gè)了解是很有必要的，需要知道它能做什么，有哪些關(guān)鍵的知識(shí)點(diǎn)。接下來的步驟，也都依賴于對(duì)技術(shù)整體的掌握和了解。

這個(gè)工作，如果有條件，可以買一本薄一點(diǎn)的，淺顯易懂的書，整體翻一翻，基本就能有個(gè)了解。但不建議買大塊頭的書，一般大塊頭的書適合當(dāng)詞典來查。但現(xiàn)在新技術(shù)推出速度太快，往往要等書出來往往是幾個(gè)月之后的事情了，所以絕大部分時(shí)候，還是得到其官方網(wǎng)站去查相關(guān)技術(shù)文檔。就像這次學(xué)React，確實(shí)難找到本合適的書，所以我直接去它的官方網(wǎng)站(http://facebook.github.io/react/) ，把Getting Started里面的文章快速的瀏覽了一遍，基本上算是有了個(gè)大概的了解。而且現(xiàn)在網(wǎng)絡(luò)上相關(guān)文章也比較多，通過搜索，也能找到很多相關(guān)的文章和資料。

明確階段性目標(biāo)，選擇實(shí)踐項(xiàng)目

一般一門新技術(shù)所涉及的面比較廣，如果一開始就想全面掌握并不現(xiàn)實(shí)，但如果從一個(gè)個(gè)點(diǎn)去突破，相對(duì)要簡(jiǎn)單很多。所以一般我會(huì)通過一個(gè)或多個(gè)項(xiàng)目實(shí)踐的形式，分成幾個(gè)階段，逐步去掌握各個(gè)知識(shí)點(diǎn)，最終整體去學(xué)習(xí)掌握技術(shù)。

例如我以前學(xué)習(xí)一些服務(wù)端語言，都會(huì)嘗試通過寫一個(gè)留言板或者博客系統(tǒng)來學(xué)習(xí)，而這次學(xué)習(xí)React，主要就是通過用React重構(gòu)我以前用Angularjs寫過的一個(gè)聊天室應(yīng)用，來學(xué)習(xí)掌握React。通過前面對(duì)React的概覽性學(xué)習(xí)，結(jié)合自身情況，我對(duì)于這個(gè)項(xiàng)目實(shí)踐，簡(jiǎn)單分成了幾個(gè)階段：

1. 用React搭建基礎(chǔ)框架
React的應(yīng)用是基于Flux架構(gòu)，而Flux架構(gòu)并沒有統(tǒng)一的標(biāo)準(zhǔn)，需要選擇使用一種Flux架構(gòu)實(shí)現(xiàn)，并基于它搭建基礎(chǔ)框架。

2. 實(shí)現(xiàn)界面基礎(chǔ)組件
React是基于組件的方式來編程運(yùn)行的，所以需要將整個(gè)應(yīng)用拆分成若干基礎(chǔ)組件，這個(gè)階段主要就是把界面的元素和交互拆分成若干基礎(chǔ)組件

3. 和服務(wù)器進(jìn)行通信
一個(gè)完善的程序，離不開和服務(wù)端的交互，對(duì)于一個(gè)React程序，其和服務(wù)端交互的方式，和傳統(tǒng)應(yīng)用程序，并不全相同，并且對(duì)于和服務(wù)器通信的結(jié)果數(shù)據(jù)，還要和界面整合

4. 發(fā)布測(cè)試完善
對(duì)于做好的作品，發(fā)布給自己和其他人進(jìn)行測(cè)試，然后繼續(xù)完善，在這個(gè)過程中去進(jìn)一步學(xué)習(xí)掌握技術(shù)細(xì)節(jié)

當(dāng)明確了實(shí)踐的項(xiàng)目和各個(gè)階段的目標(biāo)，后面就是如何去達(dá)到這個(gè)目標(biāo)了，在實(shí)踐中學(xué)習(xí)。

搜集整理相關(guān)文章和開源項(xiàng)目，模仿借鑒

書本或文檔上一個(gè)個(gè)知識(shí)點(diǎn)的說明，和最終的項(xiàng)目產(chǎn)品，還是有很大差距，項(xiàng)目最終是需要充分運(yùn)用各個(gè)知識(shí)點(diǎn)，合理組合，才能寫出高質(zhì)量代碼，而對(duì)于新技術(shù)，一開始很難掌握這些細(xì)節(jié)，盲目依賴以往經(jīng)驗(yàn)，很可能就是照貓畫虎，最終做出來的東西不倫不類。

在初學(xué)習(xí)實(shí)踐新技術(shù)時(shí)，模仿借鑒很重要，就像小孩子學(xué)說話，都是從模仿開始。好在現(xiàn)在通過github這種開源項(xiàng)目托管服務(wù)，利用搜索，可以找到非常多的優(yōu)秀開源項(xiàng)目。

早些年學(xué)習(xí)Asp.Net的時(shí)候，我有過很長(zhǎng)一段時(shí)間對(duì)開源項(xiàng)目AspNetForums的二次開發(fā)經(jīng)歷，從中受益良多。以我當(dāng)時(shí)的水平來說，是不可能設(shè)計(jì)開發(fā)出來那樣的高質(zhì)量產(chǎn)品，甚至于看懂都有些吃力，但正是通過對(duì)它的二次開發(fā)，不僅讓我快速的學(xué)習(xí)掌握了很多Asp.Net開發(fā)的知識(shí)點(diǎn)和細(xì)節(jié)，也養(yǎng)成了很多良好的編碼習(xí)慣。在后面在做其他項(xiàng)目，可以模仿和應(yīng)用它很多設(shè)計(jì)實(shí)現(xiàn)。

有些程序員寫了很多年程序，代碼質(zhì)量不高，一個(gè)原因就是因?yàn)榭吹奶?，很少去參考學(xué)習(xí)那些優(yōu)秀的開源項(xiàng)目。沒有見過好的代碼是什么樣的，自然很難寫出來高質(zhì)量的代碼。

在我這次開始動(dòng)手實(shí)踐React項(xiàng)目前，也嘗試找了很多開源項(xiàng)目，由于React技術(shù)較新，還沒有可以直接完整參考的項(xiàng)目，所以只能是多個(gè)項(xiàng)目參考對(duì)照。以下就是部分我學(xué)習(xí)和參考過的項(xiàng)目列表：

• emmenko/redux-react-router-async-example · GitHub 一個(gè)服務(wù)端交互的示例

• quangbuule/redux-example · GitHub 一個(gè)和Immutable.js整合的示例

• Rebuilding HipChat with React.js 一個(gè)和我要做項(xiàng)目類似的應(yīng)用HipChat，用React開發(fā)的，并非開源項(xiàng)目，但是通過React Dev Tool可以參考借鑒很多組件設(shè)計(jì)的思路

在前期搭建基礎(chǔ)框架的時(shí)候，就是直接借用的前兩個(gè)項(xiàng)目的框架，這樣很快就能讓程序跑起來，然后在后面的基礎(chǔ)組件設(shè)計(jì)的時(shí)候，更多的就是參考hipchat的組件設(shè)計(jì)。

做中學(xué)(Learning By Doing)

在看書看資料的時(shí)候，一個(gè)個(gè)知識(shí)點(diǎn)看起來并不復(fù)雜，但是當(dāng)真正去動(dòng)手實(shí)踐的時(shí)候，會(huì)遇到各種各樣的問題（坑），而這些問題只有反復(fù)的思考、查資料、問人才能最終解決。

在做中學(xué)，聽起來很酷，但這個(gè)過程總是艱辛曲折的！學(xué)習(xí)往往就是這樣的，只有經(jīng)歷各種各樣的磨練，才能真正的去掌握這些知識(shí)，把這些知識(shí)轉(zhuǎn)變成自身的能力。

我這次用React重構(gòu)聊天室的經(jīng)歷，如同我以往學(xué)習(xí)其他新技術(shù)的經(jīng)歷一樣，充滿了艱難險(xiǎn)阻，兩個(gè)月來付出良多。但最終完成的時(shí)候，卻是成就感滿滿，感覺到對(duì)于新技術(shù)終于算是基本掌握了，雖然還有一些知識(shí)點(diǎn)沒有應(yīng)用到，也不過是時(shí)間問題罷了，再回頭看以前的一些程序設(shè)計(jì)，又有了很多新的思路。

經(jīng)驗(yàn)教訓(xùn)

以下是總結(jié)的一些經(jīng)驗(yàn)教訓(xùn)

貪多嚼不爛

雖然現(xiàn)在新技術(shù)推出很快，但很多技術(shù)本質(zhì)并沒有變，在有其他技術(shù)“良好基礎(chǔ)”的前提下，掌握一門新技術(shù)并不需要花太長(zhǎng)時(shí)間，但“良好基礎(chǔ)”就如學(xué)習(xí)武功的內(nèi)功，才是真正需要多花時(shí)間去培養(yǎng)的。

所以去學(xué)習(xí)新技術(shù)之前，先看看手頭的技術(shù)是不是掌握好了，如果沒掌握好，不妨先學(xué)好再說，不然每門技術(shù)都淺嘗則止，反而是難有成就。

目標(biāo)不宜太大，要有階段性成就正向激勵(lì)自己

人的學(xué)習(xí)熱情都是有周期性的，最開始激情滿滿，一段時(shí)間后就會(huì)激情逝去，很容易就半途而廢放棄了。

所以在設(shè)定階段性目標(biāo)時(shí)，***能目標(biāo)小一點(diǎn)，現(xiàn)實(shí)一點(diǎn)，能多一些正向的反饋，這樣能讓自己走的遠(yuǎn)一點(diǎn)。

舉例來說，寫程序可以優(yōu)先寫單元測(cè)試和界面部分，這樣很快就有明確的反饋，比如當(dāng)你看到單元測(cè)試全部通過了，能看到界面了。

學(xué)習(xí)不會(huì)白費(fèi)

有時(shí)候辛辛苦苦學(xué)的新技術(shù)，可能不久后就會(huì)過時(shí)，這時(shí)候難免會(huì)有是不是白學(xué)的想法，但實(shí)際上學(xué)習(xí)從來不會(huì)白費(fèi)的，看過一句話我覺得很有道理：

你所學(xué)習(xí)的一切都在幫助構(gòu)建你頭腦中的神經(jīng)元網(wǎng)絡(luò)，會(huì)幫你建立某種聯(lián)系使你在后續(xù)學(xué)習(xí)其他東西時(shí)更加容易，了解一種知識(shí)能夠使你跟其他知識(shí)進(jìn)行比較和對(duì)比。因此，學(xué)習(xí)總是有用的，無論學(xué)什么。

出處：如何克服 JavaScript 框架疲勞？

就像十幾年前我把Javascript學(xué)的很熟練了，那時(shí)候覺得沒什么卵用，現(xiàn)在看來卻是大有用途：）