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

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

Twitter 宣布移動 Web 技術(shù)棧遷移到 Node.js，Express，React PWA：近日，Twitter 工程師 Nicolas 宣布 Twitter 幾乎所有的移動流量遷移到了以 Node.js 為基礎(chǔ)的服務(wù)中（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 技術(shù)棧主要是基于 Scala，Google Closure Templates 以及少量的 JavaScript。后來 CharlieCroom 開始嘗試將登出服務(wù)遷移到 JavaScript 技術(shù)棧中，并且進(jìn)行了約 9 個月的線上測試，效果尚可，因此 Twitter 決定全部遷移到 JavaScript 技術(shù)棧中。同時，Twitter Web APP 還支持所謂的 PRPL 范式：主動推送首屏關(guān)鍵資源、僅渲染初始路由、預(yù)存其他路由、按需懶加載與創(chuàng)建剩余路由。

來自 MuseFinder 的 React 組件編寫實踐：該指南來源于 MuseFind 在多年的產(chǎn)品開發(fā)中總結(jié)而來的 React 實踐經(jīng)驗，其包含了對于組件聲明方式、樣式類的使用、初始狀態(tài)聲明、Props 聲明、方法聲明、Props 結(jié)構(gòu)、裝飾器的使用、函數(shù)式組件的聲明等等多個方面。

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

基于 ReactNative 與 MobX 的 Imgur 應(yīng)用開發(fā)教程：此文中作者結(jié)合 ReactNative 與 MobX 開發(fā)一個展示 Imgur 中圖片的應(yīng)用，涉及到了如何使用 MobX 進(jìn)行狀態(tài)管理、如何與 RESTful API 進(jìn)行交互、如何在 ListView 中渲染全屏圖片以及如何監(jiān)聽設(shè)備狀態(tài)等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2017 簡明 React 入門指南：本文是針對那些熟悉 jQuery 與傳統(tǒng) JavaScript 開發(fā)的前端工程師準(zhǔn)備的現(xiàn)代 React 開發(fā)入門指南，其包括了環(huán)境配置、create-react-app 使用、學(xué)習(xí)資料、應(yīng)用編寫與發(fā)布等等章節(jié)。( https://parg.co/bCx )

React Bits：一本關(guān)于 React 設(shè)計模式、技術(shù)與技巧的書，涵蓋了常見的 React 應(yīng)用開發(fā)中的設(shè)計模式、需要規(guī)避的反模式、處理 UX 變種、性能調(diào)試與樣式處理等等。（ https://github.com/vasanthk/r... ）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用 React、Redux 以及 Webpack 創(chuàng)建 TODO 應(yīng)用：本文是面向新手的教學(xué)文章，介紹了如何利用 React、Redux 以及 Webpack 創(chuàng)建簡單的 TODO 應(yīng)用，包括利用 Webpack 搭建構(gòu)建環(huán)境、編寫基本的 React 組件以及使用 Redux 管理應(yīng)用狀態(tài)等內(nèi)容。( https://parg.co/bMT )

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

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

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

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

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

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

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

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

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

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

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

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

我們?yōu)槭裁催x擇使用 React 生態(tài)：本文是京東金融移動研發(fā)部工程師分享的它們對于前端框架、工具與方法的選擇過程中的考慮。( https://parg.co/biP )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

react-perimeter：react-perimeter 能夠為目標(biāo)元素創(chuàng)建隱藏的柵欄，當(dāng)用戶的鼠標(biāo)移動到目標(biāo)元素的指定范圍內(nèi)時會觸發(fā)預(yù)設(shè)時間，譬如可以執(zhí)行組件預(yù)加載等操作。( https://github.com/aweary/rea... )

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

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

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

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

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

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

React 學(xué)習(xí)與實踐資料索引

React 與前端工程化實踐

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