用戶界面-React
如果最近幾年有任何JavaScript項目在前端生態系統中掀起了一場風暴，那就是React。React是一個由Facebook的聰明人創建的開源庫。在React中，開發人員為他們的web界面編寫組件並將它們組合在一起。
React帶來了許多激進的想法，並鼓勵開發人員重新思考最佳實踐。多年來，web開發人員一直被教導要分別編寫HTML、JavaScript和CSS。React的做法正好相反，建議您用JavaScript編寫HTML和CSS。這聽起來像一個瘋狂的想法，但經過嘗試後，它實際上並不像聽起來那麼奇怪。作為前端開發場景的原因正在向基於組件的開發範式轉變。React的特點:
說明性的——你描述你想在視圖中看到什麼，而不是如何實現它。在jQuery時代，開發人員必須想出一系列操作DOM的步驟，才能從一個應用程式狀態切換到下一個應用程式狀態。在React中，只需更改組件中的狀態，視圖就會根據狀態更新自身。通過查看render()方法中的標記也很容易確定組件的外觀。功能-視圖是一個純粹的道具和狀態的功能。在大多數情況下，React組件由支柱(外部參數)和狀態(內部數據)定義。對於相同的道具和狀態，會產生相同的視圖。純函數易於測試，功能組件也是如此。在React中進行測試很容易，因為組件的接口定義良好，可以通過向組件提供不同的道具和狀態並比較呈現的輸出來測試組件。可維護性——以基於組件的方式編寫視圖可以促進可重用性。我們發現定義組件的proptype可以使React代碼自文檔化，因為讀者可以清楚地知道使用組件需要什麼。最後，您的視圖和邏輯在組件中是自包含的，不應該受到影響，也不應該影響其他組件。這使得在大規模重構過程中很容易對組件進行移位，只要向組件提供相同的支持即可。高性能——您可能聽說過React使用虛擬DOM(不要與影子DOM混淆)，當狀態發生變化時，它會重新呈現所有內容。為什麼需要虛擬DOM?雖然現代JavaScript引擎速度很快，但從DOM讀寫卻很慢。React在內存中保持DOM的輕量級虛擬表示。重新呈現一切是一個誤導的術語。在React中，它實際上是指重新呈現DOM在內存中的表示，而不是實際的DOM本身。當組件的底層數據發生更改時，將創建一個新的虛擬表示，並與以前的表示進行比較。然後將差異(所需的最小更改集)打補丁到實際的瀏覽器DOM。易學-學習反應很簡單。與此相比，React API表面相對較小;只有幾個api需要學習，而且它們不經常更改。React社區是最大的社區之一，隨之而來的是充滿活力的工具生態系統、開源的UI組件以及大量的在線資源，可以幫助你開始學習React。開發人員經驗—有許多工具可以改進React的開發經驗。React Devtools是一個瀏覽器擴展，允許您檢查組件、查看和操作其道具和狀態。使用webpack熱重載允許您在瀏覽器中查看代碼更改，而不必刷新瀏覽器。前端開發包括大量的代碼調整、保存和刷新瀏覽器。熱重新加載幫助您消除最後一步。當有庫更新時，Facebook提供codemod腳本來幫助您將代碼遷移到新的api。這使得升級過程相對輕鬆。向Facebook團隊致敬，感謝他們的奉獻精神，使React的開發體驗變得非常棒。多年來，出現了比React性能更好的新視圖庫。React可能不是最快的庫，但就生態系統、整體使用體驗和好處而言，它仍然是最好的庫之一。Facebook也在努力加快反應速度，重寫了底層的和解算法。React引入的概念教會了我們如何編寫更好的代碼、更易於維護的web應用程式，並使我們成為更好的工程師。我們像這樣。
我們建議在React主頁上閱讀關於構建井字遊戲的教程，以了解React是什麼以及它的功能。更多深入學習，請查看評價較高的免費課程，React Router的創建者提供的React基礎知識，他們是React社區的專家。它還涵蓋了React文檔中沒有涵蓋的更高級的概念。Facebook的Create React應用程式是一個工具，可以用最少的配置搭建一個React項目，強烈推薦用於啟動新的React項目。
React是一個庫，而不是框架，它不處理視圖下面的層——應用程式狀態。稍後再詳細介紹。
預計持續時間:3-4天。嘗試建立簡單的項目，如待辦事項列表，黑客新聞克隆與純反應。你會慢慢地對它產生好感，並可能在這個過程中遇到一些問題，而這些問題不是React能夠解決的，這就引出了我們的下一個話題……
研究的連結
React Official TutorialReact FundamentalsSimple React Development in 2017Presentational and Container Components選擇
AngularEmberVueCycle狀態管理-Flux/Redux
隨著應用程式越來越大，您可能會發現應用程式結構變得有點混亂。整個應用程式的組件可能不得不共享和顯示公共數據，但沒有優雅的方式來處理React。畢竟，React只是一個視圖層，它並沒有規定如何在傳統MVC模式中構建應用程式的其他層，比如模型和控制器。為了解決這個問題，Facebook發明了Flux，這是一個應用架構，通過利用單向數據流來補充React的可組合視圖組件。在這裡閱讀更多關於Flux的工作原理。綜上所述，流量分布具有以下特點:
單向數據流-使應用程式更可預測的更新可以很容易地跟蹤。
關注的分離——通量體系結構中的每個部分都有明確的職責，並且是高度解耦的。
在聲明式編程中工作得很好——存儲可以向視圖發送更新，而不需要指定如何在狀態之間轉換視圖。
由於Flux本身不是一個框架，開發人員已經嘗試了很多Flux模式的實現。最終，一個明顯的贏家出現了，那就是Redux。Redux結合了Flux、Command pattern和Elm體系結構的思想，是目前開發人員與React一起使用的事實上的狀態管理庫。其核心概念是:
應用程式狀態由一個簡單的舊JavaScript對象(POJO)描述。
發送一個操作(也是一個POJO)來修改狀態。
減速器是一個純函數，它採用當前狀態和動作來產生一個新的狀態。
這些概念聽起來很簡單，但是它們非常強大，因為它們使應用程式能夠:
在伺服器上呈現它們的狀態，在客戶端啟動它們。
跟蹤、記錄和回溯整個應用程式中的更改。
輕鬆實現撤銷/重做功能。
Redux的創建者Dan Abramov非常仔細地為Redux編寫了詳細的文檔，並為學習基本和高級Redux創建了全面的視頻教程。它們是非常有用的學習資源。
視圖和狀態的結合
雖然Redux不一定要與React一起使用，但強烈推薦使用Redux，因為它們彼此配合得很好。React和Redux有很多共同的想法和特點:
功能組合範式- React組合視圖(純函數)，而Redux組合純還原劑(純函數)。給定相同的輸入集，輸出是可預測的。
很容易推理——你可能聽過這個詞很多次，但它到底是什麼意思呢?根據我們的經驗，React和Redux簡化了調試。由於數據流是單向的，因此更容易跟蹤數據流(伺服器響應、用戶輸入事件)，並且很容易確定問題發生在哪個層。
分層結構——app / Flux架構中的每一層都是純功能，職責明確。為它們編寫測試非常容易。
開發經驗——在開發過程中，我們花了很多精力來創建工具來幫助調試和檢查應用程式，比如Redux DevTools。
您的應用程式可能必須處理異步調用，如發出遠程API請求。redx -thunk和redx -saga就是為了解決這些問題而創建的。它們可能需要一些時間來理解，因為它們需要理解函數式編程和生成器。我們的建議是，只有在你需要的時候才去處理它。
React - Redux是Redux的官方React綁定，非常簡單易學。
預計時間:4天。egghead課程可能有點耗時，但值得花時間。在學習了Redux之後，您可以嘗試將其合併到您已經構建的React項目中。Redux是否解決了您在pure React中遇到的一些狀態管理問題?
Study Links
Flux HomepageRedux HomepageEgghead Course - Getting Started with ReduxEgghead Course - Build React Apps with Idiomatic ReduxReact Redux LinksYou Might Not Need ReduxAlternatives
MobX