書也看了，但還是懵懵的？

02-01

這一段在用PHP和React。之前看過太多React的推介信息，貌似將之奉若神器。然而一直未有去了解它，借著此次實踐中要用到，總算逮到了一n個嘗試機會。剛好此時「React.js Essentials」出了中文版，為了快速了解React，就很自然地選了這本薄薄的小冊子。

在閱讀過程中，突然間想起來一個老問題，而且貌似是不少人的困惑：「書我也看了，內容也都理解了，但實踐起來還是一頭霧水，懵懵懂懂的？」

我以前對這個問題的回答總是說「還是實踐得少，仍需要找些項目多加實踐」。但就這麼一句話，現在回想起來也確實過於簡單了。

作為開發者，時刻都要掌握一些新技術，是再正常不過的事了。而上面這個問題卻好像是每個人在學習過程中都或多或少會遇到的。如何去破解它呢？

至於問題的出現，我的理解是：

首先，看書是順著別人的思想走，所以別人娓娓道來，你也就聽得頭頭是道。而一旦脫離了作者安排好的路，自己的陌生感就來了，變得走起來磕磕碰碰；
其次，一本書看下來，知識的掌握程度是初級的，而且必然會遺漏不少知識點，因此沉澱在自己記憶中的是碎片化知識，不成體系，必然也就無從下手。

以上兩點應該是主要的癥結所在。好比「React.js nEssentials」（這裡拿它做例子），很薄，在看第三、四章樣章的時候，我差不多總共才花了一個小時左右吧。整本書看下來，前後也就一周時間（每天n抽點時間看看）。然而看是看完了，但我依然會遇到上面這個繞不過去的問題，特別是在Flux的內容方面。

「React.js Essentials」花了兩章的份量來闡述Flux，而且還是結合著前面幾章的示例進行改造，一章章連著看下來，每一段都能理解，但最終卻很難將知識點有機地串接在一起。因此，估計若要在實踐中運用Flux，我仍是一臉懵逼。

那怎麼辦呢？書是看完了，我到官網上逛了逛，看到一個React+Flux的TodoMVC的例子：flux-todomvc，但這個例子又過於複雜，估計「參透」完這個例子，效果仍跟看書差不多，幾乎達不到快速梳理、串接知識點的目的。因此，我針對自己想了解的知識點，「量身打造」了一個「簡化版」的Todo List例子。

要快速適應Flux，無非就是打通CRUD的各個環節，將各個環節串起來走一遍，應該也就掌握了它。再進一步思考，我的目的是了解Flux的整個處n理閉環，而修改與刪除操作發生之後的處理流程，跟增加操作帶來數據變化後觸發的流程大同小異。因此，只需聚焦一種場景，而不用重複差不多的場景，以化繁為n簡、突出主幹。最終，將功能實現定在了Add和Get操作上。

思路定下來，可以結合著書中所學，先把總體原型結構圖畫出來，這個跟Flux沒關係，但要實現這個應用，還是省不掉的步驟。

實踐的過程也是重新來來回回翻書、回憶的過程，如果說前面看完一遍書有了初步掌握，現在就是盡量將知識點系統化，並拾遺補缺的改進過程。最終我的整個應用結構是這樣的：

應用效果圖：

經過整個流程走一遍，我就對Flux的處理過程有了一個總結，以下這張圖就是我實踐的最終目標和成果，同時作為我後續開發中的一個最重要的參考。這樣我就擁有一張「功法羊皮卷」了，相關代碼可作為後續開發的樣板代碼：

總結

正所謂「紙上得來終覺淺，絕知此事要躬行」，光看書、按著書的套路是遠遠不夠的。但書本的作用又是很大的。因此，要懂得「利用」書的優勢——懂得如何實踐書中的知識，並納為己用。畢竟書本的知識只是「引子」，修行還得靠個人；
概念驗證（POC）不僅對技術框架選型很有幫助，在學習書本知識時也一樣。要掌握好書本知識，就不能偷懶怕麻煩，POC還是很有必要的；
POC要框定好範圍，要針對自己的情況「量身定做」。比如這個例子，如果需要完全可以實現一個完整的CRUD過程，甚至數據可以通過PHP提供；
看書也不能迷信書本，因為隨著工具的版本更新，其內容有可能變得陳舊；甚至書本的知識並非最佳用法，如何辨別，這個比較難，需要看經驗、敏銳度以n及搜索；另外書中也可能會遺漏一些流行概念，比如「React.js Essentials」中未涉及Redux，而我也確實暫無此方面需求；
勤做記錄和總結，且做出適合自己的記錄和總結。我看了不少React、Flux資料，大多把概念講得比較玄乎，圖畫得也很漂亮，或者對官方文檔囫圇吞棗式地加以發揮，理解起來實在是感覺七繞八繞。直觀、簡潔的才是寶。另外，筆和紙的作用很大，務必勤用之。

在這裡主要是想記錄一下我在看書/學習方面的一些方式和感悟，重點不在應用的實現上。當然，每個人的學習習慣、基礎積累不一，所以，找出最適應自己的方法，才是重要的啊。

順帶說說用了一段React之後的感悟，React的JSX估計太多人不喜歡了，我也沒覺得優勢，而且那個夭壽的Webpack配置，簡直夠你喝一壺。你問我用React最大的感受是嘛？我覺得就是很自然地用起了ES6。

有幫助嗎？有幫助你就轉起吧。

我的個人博客：瓜園耕讀