前端每週清單半年盤點之 React 與 ReactNative 篇

前端每週清單半年盤點之 React 與 ReactNative 篇

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（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 等工具的使用，到 ES201五、ES201六、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 篇