摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。

前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單中的 React 相關的教程實踐與開源項目的盤點，可以查看這里獲得往期清單或者其他盤點篇。

Twitter 宣布移動 Web 技術棧遷移到 Node.js，Express，React PWA：近日，Twitter 工程師 Nicolas 宣布 Twitter 幾乎所有的移動流量遷移到了以 Node.js 為基礎的服務中（Today we moved all of Twitter"s mobile web traffic (that"s like, a lot) to our new web stack – Node.js, Express, React PWA.）。在過去的兩年中，Twitter 移動 Web 技術棧主要是基于 Scala，Google Closure Templates 以及少量的 JavaScript。后來 CharlieCroom 開始嘗試將登出服務遷移到 JavaScript 技術棧中，并且進行了約 9 個月的線上測試，效果尚可，因此 Twitter 決定全部遷移到 JavaScript 技術棧中。同時，Twitter Web APP 還支持所謂的 PRPL 范式：主動推送首屏關鍵資源、僅渲染初始路由、預存其他路由、按需懶加載與創建剩余路由。

來自 MuseFinder 的 React 組件編寫實踐：該指南來源于 MuseFind 在多年的產品開發中總結而來的 React 實踐經驗，其包含了對于組件聲明方式、樣式類的使用、初始狀態聲明、Props 聲明、方法聲明、Props 結構、裝飾器的使用、函數式組件的聲明等等多個方面。

基于 React 與 Redux Sagas 的權限驗證應用開發教程：此文中作者深入地介紹了如何利用 Redux、Redux Saga、Redux Form、React Router 這些工具開發常見的權限驗證應用。多帶帶地使用某個工具似乎沒啥難度，但是在工程應用中將它們較好地組合在一起卻不是件容易事。而本文則是作者從自身工程實踐的角度進行了介紹。

基于 ReactNative 與 MobX 的 Imgur 應用開發教程：此文中作者結合 ReactNative 與 MobX 開發一個展示 Imgur 中圖片的應用，涉及到了如何使用 MobX 進行狀態管理、如何與 RESTful API 進行交互、如何在 ListView 中渲染全屏圖片以及如何監聽設備狀態等。

在 React 中構建微交互動畫：微交互能夠更好地引導用戶，提升用戶體驗，而文本則是基于 CSS Transitions、react-motion、react-animations 構建可交互的搜索框。

2017 年 React 與 Redux 學習建議: 此文是作者數年來學習與使用 React 以及 Redux 的感悟，不一定適合純初學者，不過對于有一定基礎概念的很推薦一看。

Twitter Redux Store 探秘：復雜應用的 Store 設計一直是開發中的難點，而作為大型內容社交軟件 Twitter 之前宣布 Web 移動端逐步遷移到 Node.js、Express、React PWA 架構，本文就是對于 Twitter 的 Redux Store 設計分析與探秘。

React Native 與 Swift 性能對比：作為混合式開發框架，React Native 在運行時仍然會實際調用 Objective-C 或者 Java。此文作者同時用 Swift 與 React Native 構建了相同的應用，并且從 CPU、GPU、內存使用、電池耗費等多個角度對這二者進行性能分析。結果表明二者性能相差無幾，Swift 在 CPU 占用略占優勢，二者的 GPU 占用不相伯仲，而 React Native 在內存上則有一定長處。( http://suo.im/2MWZnA )

React 與 MobX 開發中的測試驅動開發: 本文對于 React 與 MobX 的基本使用進行了介紹，闡述了為何作者認為 MobX 是個不錯的 Redux 的替代以及如何對 MobX 進行單元測試。( http://suo.im/2PE2A6 )

基于 React 與 GraphQL 的全棧開發指南：GraphQL 最早由 Facebook 提出以解決復雜多變的查詢問題，彌補 REST 中的不足。它允許界面組件以聲明式獲取數據而忽略后端實現細節。本系列文章是由 Apollo 團隊提供，講解如何基于 React 與 GraphQL 開發應用。( http://6me.us/O6p )

React 開發中的 10 個微模式：此文是 Gilbertson 在工作中總結而來的 React 開發中常見的設計模式總結，譬如輸入域的唯一標識分配、CSS 控制等等 。 ( http://suo.im/42S8Kb )

Airbnb 使用 React 重構搜索功能的實踐：早在 2015 年，Airbnb 的工程團隊就決定將 React 作為主要的前端開發棧，不過因為其搜索頁面過于復雜因此直到 2016 年初才開始遷移工作。本文就是 Airbnb 進行代碼重構的經驗介紹。( http://6me.us/2mS )

React Native 中的 FlatList 組件：3 月 1 日開始 ReactNative 中的 FlatList 正式從測試包中移動至正式包中；我們在項目開發中可以使用 FlatList、SectionList、VirtualizedList 來替代傳統的即將被移除的 ListView。( http://6me.us/dqiO1 )

ReactNative 性能優化實踐：日前有人表示 React Native 在 Android 上表現不佳，本文則是作者對于潛在的性能問題提出的優化方案。作者首先分析了常見的 Overdraw 問題以及可能的問題源與解決方案，然后介紹了列表中常見的 GPU 渲染瓶頸以及解決方案。( http://6me.us/qX63f )

React 中 setState 的函數式用法：React 生態圈中一直崇尚所謂函數式編程理念，而本文作者介紹了如何利用 setState 函數的回調來實現 setState 的函數式用法；就像 Redux 中的 reducer 一樣，能夠獨立聲明于組件外，然后聲明式的使用，從而保證組件更新邏輯的清晰與可測試性。

我理解的“大前端”或“大無線”：本文主要是介紹作者所在團隊最近的一些變化和思考，包括前言、NodeJS職能變化、ReactNative的大規模應用、專門的架構組職能、總結五部分。。( http://6me.us/Md2 )

ReactRouter-V4 構建之道與源碼分析：本文介紹了 React Router V4 的設計思想，一步一步由淺入深地介紹如何從零開始構建一個類似于 React Router V4 這樣的秉持路由即組件的思想的路由框架。( http://6me.us/jfUwEw )

來自 Formidable 的 2017 React Naive 技術棧：本文是來自 Formidable 的工程師 Jani Ev?kallio 介紹的他們在 2017 選定的 React Native 開發技術棧，包括構建工具、組件庫、狀態管理等等方面。( http://6me.us/yH2yE )

Sketch：React Native 的 Playground ：隨著 Create React Native App 的發布，Expo 發布了能夠在線編輯 React Native 應用的工具 Sketch。開發者可以在 Web 上直接編輯 React Native 應用代碼，或者拖拽方式加入組件，然后通過 Expo 客戶端完成本地預覽。( http://6me.us/aGFX )

以組件為中心的 React 懶加載：React Loadable 是以組件為中心的懶加載框架，其基于 Webpack 2 提供的 import 提供的異步代碼分割與加載功能進行了一系列的封裝。( http://6me.us/mNHi )

來自 Vixlet 的 React 優化策略：在過去的數年中，來自 Vixlet 的前端開發團隊一直使用 React 與 Redux 的開發架構，本文即是該團隊分享其在開發過程中發現的 React 優化策略的介紹。( http://6me.us/dx5 )

Preact 內部原理探秘：Preact 是提供了類似于 React API 不過速度更快、包體更小的 React 替代包，本系列文章是 Preact 的開發者介紹其內部工作原理 。( https://parg.co/bOj )

CSS Grid 典型案例：該網站提供了一系列基于 React 編寫的 CSS Grid 布局的測試樣例，是個不錯的從實例中學習 CSS Grid 語法與使用的教程。( https://sii.im/playground/css... )

開發 React Native 與 Redux 應用一年來的錯誤總結：本文作者總結了他在過去一年中 React Native 與 Redux 開發中遇到的錯誤的復盤與總結，譬如布局文件分割、Redux Store 設計、項目目錄結構、表單驗證等多個方面。( https://parg.co/bQS )

React Conf 2017 盤點：本文作者對于近日舉辦的 React Conf 2017 中的精彩演講進行了盤點，包括 Redux 與 MobX 在狀態管理領域的對比、ReactVR 等一系列優秀的基于 React 的擴展項目、代碼格式化與樣式組件、服務端渲染等等。( https://parg.co/bsg )

Redux 實踐大討論：此篇是 Markerikson 在 Redux Issue 中發起的討論，主要涉及 Redux 模板冗余、過度抽象、學習曲線過于曲折、太多的 Opinioned 最佳實踐等問題。( https://github.com/reactjs/re... )

2017 簡明 React 入門指南：本文是針對那些熟悉 jQuery 與傳統 JavaScript 開發的前端工程師準備的現代 React 開發入門指南，其包括了環境配置、create-react-app 使用、學習資料、應用編寫與發布等等章節。( https://parg.co/bCx )

React Bits：一本關于 React 設計模式、技術與技巧的書，涵蓋了常見的 React 應用開發中的設計模式、需要規避的反模式、處理 UX 變種、性能調試與樣式處理等等。（ https://github.com/vasanthk/r... ）

基于 ReactNaive 與 Uber 工程基礎構建 UberEATS：本文是 UberEATS 的工程師團隊介紹的他們基于 Uber 原工程架構與 ReactNative 實現應用的工程實踐；包括了構建遷移路徑、應用架構定義、自動更新、測試與靜態類型檢測等等。（ https://eng.uber.com/ubereats... )

微軟開源跨平臺開發框架 ReactXP：ReactXP 是來自于微軟的用于開發跨平臺（iOS，Android，Web，Windows）應用的開源框架，其基于 React.js 與 React Native 項目，提供了類似的接口與語法規則；能夠幫助開發者快速創建優美、響應式的 Web 界面以及原生體驗的移動應用。( https://microsoft.github.io/r... )

基于 React，Redux，React-Router-V4 以及 Firebase 創建實時足球投票應用：本系列教程基于 React，Redux，Redux-Saga，React-Router V4 以及 Firebase 創建足球投票應用，在第一篇教程中主要介紹如何使用 create-react-app 腳手架來初始化項目結構并且添加必須的庫。( https://parg.co/bhD )

Webpack 與 Rollup：求同存異：近日，Facebook 宣布將 React 的構建工具由 Webpack 遷移到 Rollup，引發了很多開發者的討論。本文則是深度介紹 Webpack 與 Rollup 的異同，最后總結而言，Webpack 適合于構建應用，而 Rollup 適用于構建庫或框架。( https://parg.co/b4y )

React 中的狀態管理架構模式：本系列文章著眼于對于現代復雜 Web 應用，譬如 React 或類似框架，的開發中常見的狀態管理的架構模式。文章中會依次介紹 Naive Hierarchical Architectural Pattern、Top-Heavy Architecture、Flux 等等內容。( https://parg.co/b4J )

基于 JavaScript 構建數據表達式分詞器：本文是一篇挺有意思的文章，介紹如何利用 JavaScript 解構常見數學表達式并且從中提取出相關實體。本文涉及到的內容包括對于分詞器的簡單介紹、對于抽象語法樹 AST 的介紹以及最終如何使用代碼來實現分詞算法。( https://parg.co/bRO )

Twitter Lite 與高性能可擴展 React PWA 實踐：本文是 Twitter 工程師團隊介紹其在開發世界上最大的 PWA 應用之一， Twitter Lite 過程中克服各種各樣的性能瓶頸的實踐經驗。其核心思想包括基于路由的代碼切分、避免可能導致掉幀的函數、使用壓縮比更好的圖片資源、以及優化 React 更新過程、避免頻繁修正 Redux Store、延遲注冊 ServiceWorker 等部分。( https://parg.co/bRV )

React Native 性能優化：本文作者承接 React Native 性能瓶頸與解決方案，以新的實際開發中的例子討論如何優化 React Native 應用性能。作者以類似于 Android 中 Toolbar 的列表為例，介紹了如何對性能進行測試、使用原生的滾動監聽、使用聲明式接口等多個方面的內容。( https://parg.co/bRk )

后 MVC 時代：在很長一段時間里，MVC（Model-View-Controller）架構是構建應用的黃金法則，而近幾年隨著 React，Vue.js，Angular 等以組件為中心的庫的流行，MVC 架構在前端卻趨于平寂。開發者往往將模型、視圖與控制器耦合在單個實體內，而打破了傳統的 MVC 架構中的約束。類似于 Flux 或者響應式編程的設計思想也改變了應用狀態的處理方式，不同于 MVC 中的雙向綁定，而是數據在實體之間單向流動。本文即是討論在所謂后 MVC 時代的 GUI 應用架構的思考。( https://realm.io/news/the-pos... )

CodeSandbox：CodeSandbox 是一個在線的 React 編輯器，其能夠幫助開發者更快更方便地展示與分享基于 React 的項目。CodeSandbox 會自動化執行類似于編譯、打包、依賴管理等多種項目構建中的常見任務，同時 CodeSandbox 還允許開發者添加自定義的 node_modules 中的依賴。( https://parg.co/bR8 )

Slate：Slate 是類似于 Draft.js 的靈活可自定義的富文本編輯器構建框架，Slate 允許你構建功能豐富的類似于 Medium、Dropbox Paper、Canvas 這樣的編輯器。Slate 提供了各式各樣的插件，你可以基于 React 與 Immutable 來構建自定義的插件，并且指定哪些插件屬于核心插件。( https://docs.slatejs.org/ )

Facebook 發布 React VR 來簡化 Web 中虛擬現實應用的開發：近年來，虛擬現實技術迅猛發展，有望成為下一個主流計算平臺。而 Facebook 近日正式發布 React VR，其能夠幫助開發者快速構建 VR 應用。React VR 同樣基于 React 與 React Native 提供了聲明式的代碼風格，能夠允許有 React 開發經驗的開發者快速上手。( https://parg.co/bfR )

大型高性能React PWA如何消除各類性能瓶頸？：想要構建一款性能出色的 Web 應用程序，我們需要投入大量技術周期以檢測時間浪費點、了解其發生原因并嘗試各類解決方案。遺憾的是，這種做法往往無法快速解決問題。性能無疑是一項永恒的命題，技術人員永遠徘徊在觀察與測量當中，卻幾乎永遠找不到最優解。不過利用 Twitter Lite，我們已經在眾多層面內取得了細小但卻極具價值的改進：從初始加載時間到React組件渲染（防止二次渲染），再到圖像加載以及更多層面。盡管大多數變更本身并不顯著，但其相加所帶來的最終結果是，我們得以構建起一款規模極大且速度極快的漸進式 Web 應用程序。( https://parg.co/bfM )

Airbnb 設計團隊發布 React SketchAPP：Airbnb 設計團隊近日發布能夠將 React 組件渲染到 Sketch 文檔中的開源工具，它為開發工程師與設計師之間提供了便捷的溝通橋梁。( http://airbnb.design/painting... )

一系列優秀的 React 界面框架：本文列舉了多個優秀的 React 界面框架，分析了其特性、適用場景以及潛在的缺陷。本文涉及的框架包括 Material UI、React Desktop、Semantic-UI-React、Ant-Design、Blueprint、React Bootstrap、React Toolbox、Grommet、Fabric 等等。( https://parg.co/bNh )

來自 Vixlet 的 React 優化建議：近年來 Vixlet 的 Web 團隊逐步將其 Web 框架遷移到了 React + Redux 技術架構，本文是來自于 Vixlet 的 React 優化實踐總結與建議。( https://parg.co/bNF )

從實用主義視角來看現代前端應用開發：現代 Web 開發技術變革迅速，而我也經歷了從純 JS 、jQuery、Vaadin、Angular JS、React 等等一系列的變遷。本文則首先思考何謂現代 Web 應用，然后考慮現代 Web 應用常用的項目架構與構建方式，譬如 TypeScript、Webpack、Linting 等內容，然后討論現代常用的技術架構，譬如 React.j、MobX、依賴注入等相關知識。( http://dimafeng.com/2017/04/2... )

React 動畫系列教程：本系列教程著眼于介紹 React 動畫開發相關知識，而本文則是從 CSS transitions 基礎入手，介紹了 CSS transitions 的基礎語法與進度條、導航欄等經典案例。( https://parg.co/bMF )

使用 React、Redux 以及 Webpack 創建 TODO 應用：本文是面向新手的教學文章，介紹了如何利用 React、Redux 以及 Webpack 創建簡單的 TODO 應用，包括利用 Webpack 搭建構建環境、編寫基本的 React 組件以及使用 Redux 管理應用狀態等內容。( https://parg.co/bMT )

函數式組件的函數式調用：本文是來自 Missive 的工程師分享了他們在基于 React 進行應用開發時的技巧，即如果直接以函數調用而非組件的方式來使用函數式組件，可以避免對于 React.createElement 的調用，最終相同組件的渲染耗時可以節約近 45%。( https://parg.co/bMa )

擁抱 React Router 4，改變舊的思維習慣：在今年的 React 大會上，Michael Jackson 以及 Ryan Florence 發布了所謂“Learn Once，Route Anywhere”的演講。同時也代表了 React Router 4 中的核心思想：路由即聲明式組件；本文則介紹了 React Router V3 到 React Router V4 的變化。( https://parg.co/bVv )

高性能動態 CSS 樣式：本文是對 JSS 新近提供的函數式值的介紹，其與 React 內聯樣式以及其他 CSS 解決方案相比有數倍的性能提升。在 Web 開發中動態設置樣式往往會觸發頁面的重渲染，而本文則是介紹了如何使用 CSSOM 的 API 來在元素渲染之前即完成樣式的設置。( https://parg.co/btW )

React 新引擎 React Fiber 究竟要解決什么問題？：Facebook 正在以流行的 JavaScript 框架 React 為基礎開發一個全新的架構。這個名為 React Fiber 的全新設計改變了檢測變更的方法和時機，借此可改進瀏覽器端和其他渲染設備的響應速度。 這一 全新架構 最初已于 2016 年 7 月公開發布，其中蘊含著過去多年來 Facebook 不斷改進的工作成果。該架構可向后兼容，徹底重寫了 React 的協調（Reconciliation）算法。該過程可用于確定出現變更的具體時間，并將變更傳遞給渲染器。( https://parg.co/btw )

GUI 應用程序架構的十年變遷：MVC、MVP、MVVM、Unidirectional、Clean：隨著現代瀏覽器的日漸流行，Web 以及混合開發技術的發展，大前端的概念日漸成為某種共識；而無論 iOS、Android、Web 這樣的端開發還是 React Native、Weex 這樣的跨端開發，其術不同而道相似縱覽這十年內的架構模式變遷，大概可以分為 MV 與 Unidirectional 兩大類，而 Clean Architecture 則是以嚴格的層次劃分獨辟蹊徑。從筆者的認知來看，從 MVC 到 MVP 的變遷完成了對于 View 與 Model 的解耦合，改進了職責分配與可測試性。而從 MVP 到 MVVM，添加了 View 與 ViewModel 之間的數據綁定，使得 View 完全的無狀態化。最后，整個從 MV 到 Unidirectional 的變遷即是采用了消息隊列式的數據流驅動的架構，并且以 Redux 為代表的方案將原本 MV* 中碎片化的狀態管理變為了統一的狀態管理，保證了狀態的有序性與可回溯性。( https://zhuanlan.zhihu.com/p/... )

新版本 Create React App 特性概述：不到一年前，React 官方發布了 Create React App 這個零配置的快速創建 React 應用的腳手架工具；而本文則介紹了近幾個月來 Create React App 中加入的新特性。新版的 Create React App 中切換到了 Webpack 2，并且優化了運行時錯誤提示，同時還默認啟用了 Progressive Web Apps 支持，并且引入了 Jest 20、動態導入等等一系列的新特性。( https://parg.co/bkY )

React Native 開發中的 80/20 定律：在構建 React Native 應用時，我們常常發現某些 20% 的投入會帶來 80% 的產出。本文則是作者在構建了自己首個 React Native 應用之后的感悟，作者發現引入靜態類型、通用組件以及精益部署之后，整個想法的開發速度與項目質量得到了較大地提升。( https://parg.co/bko )

從零開始構建 WhatsApp 應用：本系列文章深入淺出地介紹了如何利用 GraphQL 與 React Native 構建類似于 WhatsApp 的應用 Chatty。前幾部分主要介紹了如何搭建基礎環境、設計 GraphQL Schemas、進行數據查詢與交互等內容，而本文則著重于介紹如何為 Chatty 添加權限驗證特性。( https://parg.co/bk0 )

如何快速地為 React 站點設置 A/B 測試：A/B 測試，或者稱為分割測試，是用來隨機地為用戶展示網頁以測試不同產品設計的反饋效果。A/B 測試對提升真實應用的用戶接受度非常有幫助，而本文則是介紹了如何利用 react-ab-test 這個工具快速地針對 React 站點設置 A/B 測試收集用戶反饋信息。( https://parg.co/bkE )

重構 Airbnb 前端架構：本文是近日 Airbnb 開發團隊在思索重構代碼庫中 JavaScript 部分的經驗總結，主要著眼于產品驅動開發以及技術沉淀、從傳統的 Rails 架構中積攢的經驗以及新的技術棧的某些特性等方面。本文首先介紹了從 Rails 遷移過程中的一些經驗，譬如將原本完全的服務端渲染界面所需要的數據切分為了 API 與 Non-API 兩大類，并且使用 Hypernova 來進行 React 服務端渲染。然后介紹了如何在應用前端通過引入懶加載與異步加載等方式提升前端性能與用戶體驗。( https://parg.co/bkA )

React Europe 2017 見聞實錄：本文記錄了作者在第三屆 React Europe 大會上的見聞，也是不錯的窺見 React 生態圈現狀與未來發展方向的方式。本文首先介紹了即將到來的 React 16 以及新的調和算法 Fiber，然后介紹了一些輔助構建高質量 JavaScript 代碼的工具，最后還討論了基于流的按幀渲染方式。( https://parg.co/bJt )

理解高階組件：即使 React 新手都應該聽過所謂高階組件或者容器組件的概念，而本文則是深入淺出地介紹了 React 中高階組件的概念與意義，并且以實例介紹具體的使用方式與適用場景。作者首先介紹了無狀態組件與全局狀態的概念，然后對比了所謂容器與展示型組件的使用場景，最后介紹了常見的高階組件。( https://parg.co/biZ )

我們為什么選擇使用 React 生態：本文是京東金融移動研發部工程師分享的它們對于前端框架、工具與方法的選擇過程中的考慮。( https://parg.co/biP )

hacker-news-pwas：基于不同的前端框架實現的符合 PWA 應用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個版本，并且均在 Lighthouse 評測中達到 90 以上的評分。( https://parg.co/biQ )

使用 Vue 與 NativeScript 開發跨端應用：目前標準的開發 NativeScript 應用的方式是使用樸素的 JavaScript 或者 Angular，而本文介紹了如何結合使用 Vue 與 NativeScript 來開發跨終端應用。本文首先闡述了 Vue.js 相較于 React 或者 Angular 的優勢，然后闡述了使用 Vue 語法來開發基礎 NativeScript 應用的步驟。( https://www.nativescript.org/... )

利用 React Apollo 減少 Redux 代碼量：Redux 為人詬病的一點就是需要大量的模板代碼，而更多的代碼往往也意味著更多的潛在錯誤與更高的維護代價。本文則介紹了如何利用 Apollo 來接管應用中的數據加載與呈現邏輯，從而減少 Redux 實現方案中加載數據生命周期中所需要的代碼。( https://parg.co/bLA )

九個 React Native 動畫指南：本文通過介紹九個 React Native 動畫地實現從零到一的介紹了 React Native 中的動畫機制。包含了通過 Animated.timing 來添加樣式動畫、創建可伸縮的按鈕、創建可拖拽的卡片、動態地變換元素的顏色、角度、序列位置等等實例。( https://parg.co/b9d )

構建 React 組件庫：本系列文章循序漸進地介紹如何設計編寫自己的小型組件庫并且將其發布到 NPM 倉庫中；第一篇文章著眼于如何從零開始搭建開發環境，第二篇文章則介紹如何利用 styled-components 來為組件添加樣式、添加調色板、構建高效開發流程以及如何實踐 Atomic Design 原則。( https://parg.co/b9u )

5 個提升 React Native 應用性能的方法：本文作者分享了自己在過去一段時間內嘗試提升公司 React Native 應用性能的實踐經驗，包括如何設置有效的性能測試、強制啟動 no-bind 規則、使用函數式組件、重制 TabMap 的邏輯等等。( https://parg.co/b93 )

京東 618：如何配合業務打造 JDReact 三端融合開發平臺？：良好解決多終端開發問題是提升團隊開發效率的有效方法，本文全面解析了京東 JDReact 三端融合平臺。本文首先回顧了傳統無線開發的痛點，然后討論了 React Native 的優勢與局限，最后介紹了 JDReact 三端融合平臺的整體架構、在功能、加載性能、內存方面的改進與優化以及發布到生產環境中的流程等內容。( https://parg.co/b9U )

React 服務端渲染：本文循序漸進地介紹了 React 中服務端渲染的相關知識，首先討論了服務端渲染相較于客戶端渲染帶來的優勢、然后介紹了如何在 React 中添加服務端渲染的支持，最后還討論了如何通過同構的高階函數在服務端抓取數據然后顯示在客戶端。( https://css-tricks.com/server... )

大前端公共知識梳理：這些知識你都掌握了嗎？：近年來，隨著移動化聯網浪潮的洶涌而來與瀏覽器性能的提升，iOS、Android、Web 等前端開發技術各領風騷，大前端的概念也日漸成為某種共識。 其中特別是 Web 開發的領域，以單頁應用為代表的富客戶端應用迅速流行，各種框架理念爭妍斗艷，百花競放。Web 技術的蓬勃發展也催生了一系列跨端混合開發技術，希望能夠結合 Web 的開發便捷性與原生應用的高性能性；其中以 Cordova、PWA 為代表的方向致力于為 Web 應用盡可能添加原生體驗，而以 NativeScript、ReactNative、Weex 為代表的利用 Web 技術或者理念開發原生應用。 平心而論，無論哪一種開發領域或者技術，他們本質上都是進行圖形用戶界面（GUI）應用程序的開發，面對的問題、思考的方式、架構的設計很大程度上仍然可以回溯到當年以 MFC、Swing、WPF 為主導的桌面應用程序開發時代，其術不同而道相似。( https://parg.co/byS )

React Express：針對目前 React 及其生態圈學習曲線過于陡峭的囧境，作者希望創建一個多合一的面向初學者的 React 技術棧學習教程，從最簡單的 create-react-app、npm、webpack、babel 等工具的使用，到 ES2015、ES2016、JSX 等基礎語法，最后還包括 React、Redux、CSS-in-JS 等工程實踐。( https://github.com/dabbott/re... )

Airbnb React VR 實踐：Airbnb 自 2014 年以來一直使用 React 構建用戶交互界面，并且為社區貢獻了很多優秀的開源項目；而隨著 React VR 的發布，Airbnb 也利用其來快速原型化與測試 VR 相關的創意。本文即是介紹 Airbnb 在 React VR 實踐方面的一些經驗總結，本文首先闡述了 React、React Native 與 React VR 三者之間的關系與差異，然后介紹了 React VR 在布局、基礎組件方面的語法，最后還討論了 React VR、WebVR 以及 VR 技術本身的發展可能性。更多 WebVR 相關資料參考 https://parg.co/bFR。

深入 React 動畫實踐：本文介紹了在 React 開發中多種創建動畫效果的途徑，包括了基于 React 組件狀態的 CSS 動畫、基于 React 組件狀態的 JavaScript 樣式動畫以及第三方依賴的 React Motion、Animated、Velocity-React 等庫。本文最后還討論了如何用 GreenSock 等經典強大的動畫庫來輔助 React 組件動畫開發；更多 React 相關資料參考 https://parg.co/bM1 。

metro-bundler：為了更好地社區支持，原 react-native-packager 被獨立為 Metro Bundler；其致力于打造具有亞秒級別的重載以及較好可擴展性的模塊系統，同時它仍然是 React Naive 內置的開箱即用的工具。( https://github.com/facebook/m... )

React Flight: React Flight 能夠幫我們輕松地構建組件之間的過渡動畫，它允許開發者定義初始狀態的組件與結束狀態的組件，React Flight 會自動地完成組件之間的切換并且添加動畫效果。

React Native Node: React Native Node 能夠在基于 React Native 開發的 Android 應用中啟動后臺 Node.js 進程，從而可以利用 Node.js 中的流、文件系統接口等特性來進行功能操作；React Native Node 主要依靠 Node.js 7.1.0 版本能夠被獨立編譯為 bin_node_v710 可執行文件。另一方面，盡管 iOS 并不支持直接運行 V8，但是該項目正在致力于為 ChakraCore 打造類 V8 特性支持。

react-simple-maps: react-simple-maps 是基于 d3-geo 與 topojson 的 React 地圖組件庫，允許開發者快捷方便地構建自定義的 SVG 地圖；目前的特性包括了縮放、標記、自定義 SVG 標記、自定義著色、氣泡圖、動畫支持等等。

redux-query:React/Redux 中查詢與管理網絡狀態的庫：對于很多開發者而言，同步本地狀態與網絡狀態會是一件很麻煩的事情。其中需要太多的妥協與考量，甚至于面對不同的問題需要使用不同的技術棧。而 redux-query 即是 AmplitudeEng 的工程師在實踐中的總結與應用，它可以被當做基于 React/Redux 以及 RESTful API 的應用的很好的輔助工具。它允許將網絡狀態鏈入到當前的 Redux Store 中，并且提供了刪除、樂觀更新、響應緩存、刪除重復等等優秀的功能。

react-native-offline-utils：react-native-offline-utils 允許我們在 React Native 應用中優雅地處理離線情況，能夠根據連接情況動態判斷需要使用的組件渲染或者數據抓取邏輯。同時 react-native-offline-utils 還能夠平滑地集成 Redux，能夠自動轉發特殊的離線 Action。( https://github.com/rauliyohmc... )

react-pdf：在瀏覽器、移動端與服務端皆可適用的基于 React 語法的 PDF 文件創建工具。( https://github.com/diegomura/... )

Rapscallion：React 服務端渲染的性能一直是廣為詬病，相較于其他前端框架會滿上很多，筆者在此文中也進行過簡要探討。而 Rapscallion 則是新的支持 React 服務端渲染的開源包體，它支持異步非阻塞渲染，相較于renderToString其能達到將近 50% 的性能提升。同時 Rapscallion 官方還為我們準備了基于 Redis 的緩存實例。( http://suo.im/3YS6pz )

react-native-interactable：react-native-interactable 是由 wix 發布的用于創建高性能用戶交互效果的聲明式接口。典型的用戶場景包括滑動式卡片、抽屜菜單、伸縮式應用頭、聊天頭等。( https://github.com/wix/react-... )

react-overdrive：非常簡單易用的 React 應用轉場動畫實現庫，能夠在不同的頁面間指定相同 ID 的元素，Overdrive 會自動為這兩個元素之間添加轉場動畫。( https://github.com/berzniz/re... )

react-perimeter：react-perimeter 能夠為目標元素創建隱藏的柵欄，當用戶的鼠標移動到目標元素的指定范圍內時會觸發預設時間，譬如可以執行組件預加載等操作。( https://github.com/aweary/rea... )

glamorous：來自 PayPal 的 React 組件的 CSS-in-JS 解決方案，其支持 JSX 語法、自定義樣式組件等多種靈活的功能。( https://parg.co/b4Q )

React Data Grid：基于 React 構建的類似于 Excel 的網格組件，其提供了編輯、鍵盤導航、復制粘貼等多種功能。( https://github.com/adazzle/re... )

create-next-app：基于 Next.js 的類似于 create-react-app 的快速創建支持服務端渲染的 React 應用的命令行輔助工具。( https://open.segment.com/crea... )

Create XP App: 近日，微軟的 Skype 團隊發布了基于 React Native 的跨平臺開發框架 ReactXP，而 create-xp-app 則是快速創建 ReactXP 應用的腳手架。本文則是對于 create-xp-app 的安裝與基本使用的介紹，包括了如何運行在 Web 與 iOS/Android 等原生環境中，以及如何進行打包等內容。

haul：Haul 是基于 Webpack 這樣開源框架構建的 react-native 命令行工具的替代品，它支持從運行于開發時服務器到打包發布至生產環境等全生命周期的功能。Haul 的最大特性在于允許開發者使用 Webpack 生態系統中各種合影的加載器與插件，并且不需要 watchman 等外部工具的輔助，還優化了錯誤提示信息。( https://github.com/callstack-... )

react-move：方便快捷地 React 組件動畫庫，支持 React、React Native 以及 React VR。React Move 允許開發者忽略具體的動畫屬性控制而完全托管于框架，同時它還提供了多個生命周期中的回調函數方便開發者進行控制。( https://github.com/tannerlins... )

React 學習與實踐資料索引

React 與前端工程化實踐

前端每周清單半年盤點之 Vue.js 篇