標籤：

React Conf 2017 不能錯過的大起底——Day 1！

01-26

就在前不久，React Conf 2017 在加利福尼亞州的聖克拉拉萬豪酒店圓滿落幕，這已經是第三屆 React 官方大會了。今年的大會怎麼樣，有哪些新東西，外刊君接下來將會給大家來個大起底，Day 1 大放送！

> 截圖來自於 React Conf 2017 大會視頻。

ReactConf2017 應用

Fhinkmill 的工程師基於 React Native 開發一個應用——ReactConf2017。下載：iOS、Android。參會者可以在應用上查看日程安排，會議地點，獲取參會路線等等。參會體驗++。

主題演講（keynote）

一些事實

  • React Dev Tools 的安裝量超過 50w；
  • Facebook 自家的 App 已經有成百上千的 Screen 使用了 React Native；Facebook 主應用使用還是React + Hybrid；Instagram 已無法指出 Native 和 React Native 上體驗的差別。
  • Facebook 的工程師沒有打算使用 React Native 重寫整個Facebook主應用；

React Native 在 Facebook 不斷地推進

為了在 Facebook 主應用中逐漸地引入 React Native，對如下三個方面進行了優化。

性能

文件壓縮減少體積自然不用說了，React Native 進一步衡量了啟動渲染各個環節消耗的時間，盡量縮短或者並行處理這些環節。

通用

針對 iOS和Android的差異，提供通用的 API。

開發者體驗

Facebook 主應用上千人維護，幾分鐘才能編譯一次，React Native 做到了即改即現，優化與navigation的集成，實現了添加新的 page，也無需重新編譯整個應用。

React Native 進過不斷的打磨、提升和使用，它的 Scope 也在一步步發生變化。

  1. Webview Conversions: 有更好的交互體驗；
  2. High Iteraction Views：需求不斷變化，快速迭代的功能；
  3. Other Full-Sreen Views：全屏功能的 View；
  4. Cross-App Views：跨 App 功能界面共享。

React 端到端性能（React Fiber）

目前如何合理安排 React 計算渲染更新是優先順序很高的核心工程。React 團隊設計出thread、worker、build 優先順序等等，最終獲得了一個可行的模型，重新確定如何繪製UI——即 React Fiber。React Fiber 不是一個新的項目，是 React 的新架構，將在 React 16 發布。https://github.com/acdlite/react-fiber-architecture。實際上 facebook.com 上已經用上了 React Fiber。大家可以下載 react@next react-dom@next 試用。

看動畫識 Fiber

Fiber 可以提升複雜React 應用的可響應性和性能。Fiber 即是React新的調度演算法（reconciliation algorithm）。

react 即 reconsiler（調度者），react-dom則是 renderer。調度者一直都是又 React 本身決定，而 renderer 則可以由社區控制和貢獻。

那新的調度演算法是如何優化可響應性和性能的呢 。

每次有 state 的變化 React 重新計算，如果計算量過大，瀏覽器主線程來不及做其他的事情，比如 rerender 或者 layout，那例如動畫就會出現卡頓現象。

React 制定了一種名為 Fiber 的數據結構，加上新的演算法，使得大量的計算可以被拆解，非同步化，瀏覽器主線程得以釋放，保證了渲染的幀率。從而提高響應性。

React 將更新分為了兩個時期：

render/reconciliation

可打斷，React 在 workingProgressTree 上復用 current 上的 Fiber 數據結構來一步地（通過requestIdleCallback）來構建新的 tree，標記處需要更新的節點，放入隊列中。

commit

不可打斷。在第二階段，React 將其所有的變更一次性更新到DOM上。

除此之外，還有更多的優化細節，可以參看 Lin Clark 的演講視頻。

更詳細的解讀，可以看到演講視頻或者知乎專欄 進擊的React的解讀文章：React Fiber是什麼

Next.js

React SSR（Server Side Render）框架。作者 Guillermo Rauch （socket.io 作者）甚至使用 Next.js 重寫了 hacker news。

Guillermo Rauch 分享了很多 Next.js 的實現細節和設計哲學，更多可以參看分享視頻。

外刊君：不敢想像，通過 Next.js 這個框架，我們編寫熟悉的 React 代碼，以最快的速度完成一個具備 SSR 能力的站點，無需一行配置。

React + ES.next = ?

又一個從 Backbone 切換到 React 的例子 :)。Ben Ilegbodu 給我們介紹如何結合 ECMAScript 新的特性，寫出更贊的 React 代碼！

這五個特性大家都認識吧！

Destructuring（解構負值）

從對象中解構出屬性，甚至負值給新的變數：

從對象參數中解構：

Spread operator

兩種 Spread operator 的實戰用法：

代替 Object.asigin 和 Array.prototype.concat，實現不變數據：

代替 Function.prototype.apply 展開數組作為參數：

Arrow Funciton

結合上上面的特性，我們甚至可以這麼編寫 JS：

const MyComponent = ({children, style}) => { <div style={style}>{children}</div>}

Promise

Promise 就略去不表了，不熟悉的童鞋，再去看看視頻複習複習吧。演講者提到了 Pormise.all方法，同事也還有類似的 Promise.race、Promise.resolve、Promise.reject 等等，可以學習學習。

Async Function

使用 Async/Await 我們真的可以使用同步的代碼書寫非同步的實現了。

注意這裡的fatch返回的是一個 Promise 對象，fetch 的操作其實是非同步的。注意 需要使用 try catch 來捕獲 Promise 對象 reject 的錯誤！

Redux VS MobX

兩個技術方案的比較必須先了解每個的優勢和權衡，在形成自己的理想簡介。看看 Preethi Kasireddy 是怎麼說的。

Redux 是 Flux 模型的一種衍生，但有三點主要的不同：

  1. 單一 Store;
  2. 使用pure function代替dispatcher
  3. store/state 是不可變數據

Preethi Kasireddy 用了一個很有意思的比喻。可以把 Mobx 當做一個 spreadsheet，有一類是純數據cell，有一類是通過純數據的cell加公式計算出來的cell。純數據的cell上就像加了 obserable，數據cell變化了也會導致另外一種cell中數據的變化。

上面是 Redux 和 Mobx 內部技術結構的具體比較：

  1. Redux 的 Store 是單一的，而 Mobx 是分散的，可以按照領域來組織；
  2. Redux 的數據是純對象，而 Mobx 是一系列的 Observable 數據；
  3. Redux 依賴的是不可變數據結構，而 Mobx 數據時可變的；
  4. Redux 的狀態沒有花頭，都是普通對象，而 Mobx 的狀態實際上是嵌套的，因為是一系列 Observable 數據的依賴樹。

學習曲線比較，Mobx 比價容易，OO編程，不過有一些 Magic；而 Redux 則帶著 FP 的思想，不過 Redux 沒有黑魔法，reasonable。

妹子認為 Redux 學習曲線比較陡峭，尤其是應用複雜以後，如何規劃 Store 是個問題。

誰更容易快速上手？

開發工具：

在可確定性、調試方面 Mobx 不及 Redux。模塊化開發角度來說，Mobx 略勝。

在擴展性、可維護性、社區 Redux 都更勝一籌。

setState vs Redux vs Mobx

setState 作為 React 的 API，一切都是從這裡開始，我們有必要學習 React 的最基本的用法。但是涉及到在多個孤立節點共享狀態時，只用 React 就有些力不從心了。這時候，Redux 和 Mobx 就可以派上場了。

Preethi 認為 Mobx 適合做一些簡單的應用，原型實驗，適合小的團隊使用。Mobx 的優點是響應狀態的變化。

而 Redux 適合複雜的應用，大團隊，需求變化多。它的有點是響應動作和事件。

不過最終該選什麼呢？Preethi 的回答是：

pick tool that makes you a happy developer.

更多的細節內容，可參看演講視頻，或者知乎專欄 pure render 的詳細介紹：MobX vs Redux: Comparing the Opposing Paradigms - React Conf 2017 紀要

Type Systems Will Make You a Better JavaScript Developer

首先先複習一下 JavaScript 的類型系統：

通常，會存在一些意想不到，難於定位的錯誤。

使用 lint 工具可以避免一部分 錯誤。 通過 runtime 的類型檢查也可以做到，但是有大量的檢查代碼。

React 中的 propTypes 同樣也起到了類型檢查的作用，不過是在 runtime，相對來講，更好用一些。

今天的主教出場了 flow，靜態 JavaScript 類型檢查工具。

集中類型檢查方式的比較：

接下來是 Jared Forsyth 一些 flow 使用心得，即就算有了 Static Type Checking 也無法處理的部分——即那些代碼中暗含的約定。最後 Jared 總結道：

閃電分享#1

Moving Fast with Nuclide and Flow

Nuclide 是 Facebook 工具團隊開發的 IDE，基於 Atom。Andres Suarez 為了我介紹 Nuclide 結合 Flow 的各種特性，比如自動補全、Type Checking、跳轉到定義、代碼大綱等等功能。有興趣的童鞋可以動手使用起來。

AWS Lambda + AWS Gateway + React = AWEsome

編寫一個函數，上傳到 AWS Lambda，Lambda 就可以執行這個函數來幫你響應 HTTP 請求，文件上傳事件等等。伺服器的監控、複雜均衡等等都不用關心。這是一種"serverless" 服務。目前支持 Node.js、Python 和 Java。

於是，我們可以這來構建項目：

於是作為工程師，我們就可以很歡快地編寫 React 和 JavaScript 函數來開發我們的應用了。

React to Code

Merrick Christensen 分享了自己的項目，react-sourcerer，使用 JSX 的語法來描述 JavaScript AST 的匹配規則。

The Road to Styled Components

一個非常有趣的項目，提供了一種耳目一新的方式來構建一個帶樣式的組件：

外刊君：這其實用到了 ES6 Template literals 特性。

Title、Wrapper 組件的用法與 React 組件無異：

甚至還支持繼承、主題等特性。

Building Applications for a Studio in the Cloud at Netflix

Feather Knee 來 React Conf 2017 走了一遭，宣布我大 Netflix 去年11月份也開始用 React啦，然後分享了一下他們的 React 技術棧。

React Native in the "Brown Field"

Leland Richardson 把整個 React Native 到已有項目中稱為「Brown Field」。Leland 帶來了 React Native 到 Airbnb 的整合實戰經驗。

  • Airbnb 2016年3月開始實驗性地使用 React Native；
  • 7月，Airbnb 第一個 React Native 開發的功能上線；
  • 11月，Aibnb Trips 平台建立，iOS/Android客戶端的大量功能都是使用 React Native 開發的。

適合的事情交給適合的語言和平台去做，React Native 本身就包含C/C++ Objective-C，Java，JavaScript 這四種語言的代碼。

來分析哪些是 Native 哪些是 JavaScript：

  • YOGA Native 布局類庫，Native 的；
  • React，純 JavaScript 類庫；
  • 大部分核心組件都是Native實現，暴露JavaScript介面；

歸類下來，一部分是實現需求的代碼（Product Code），另外一部分就是基礎設施代碼，其目的是使得Product Code更容易編寫。

但對於開發 Brown Field 來說，是另外一種景象，隨著 React Native 的不斷引入，Product code 更多地由 JavaScript 完成，基礎設施代碼也逐漸暴露出 JavaScript API。

在Brown Field和Green Field都存在的應用中，基礎代碼使用 Native 來實現就會有很多好處。比如 Navigation 組件就是一個很好的例子。

Navigation

React Native 官方和社區有很多 navigation 的實現。但做的比較好的只有兩個：

  • NavigationiOS：不能跨平台；
  • react-native-navigation：跨平台，但是無法滿足Airbnb App的需要。

Airbnb 需要從 Native 的導航到 React Native 上，又能導航回來。唯一能做的就是自己實現。

Airbnb 利用每個平台相應的 Native 組件來實現一個跨平台的 navigation，並提供成 JavaScript API。

為了共享原生的 Navigation，Airbnb 採用多個 React Root View 共享一個 Bridge 的方式來實現。

更多的實現細節和 React API 可以參看大會視頻。

優點

nagivation 使用使用 Native 實現提供 React Native API 的優勢有：

  • 便於在 Native 和 React Native 之前切換；
  • navigation 狀態得以保存，並且快速切回來；
  • native 切換，效果好，性能高；
  • 渲染時可配置；
  • 可以遵循不同平台的設計原則，避免自己實現的各種細節和 Bug；
  • 允許複雜的自定義。

開源

Airbnb 自己研製的 native-navigation 一道開源了，歡迎使用！

Moving Beyond Animations to User Interactions at 60 FPS in React Native

哪種應用你覺得是優秀的？首先動畫的幀率達到60，而且用戶交互起來需要有真實的感覺。

如果純粹通過 React Native 提供的 JS API 來實現有什麼問題，看下圖：

不斷地響應用的事件，並通過 Bridge 通知 JS，通過修改 React 組件的狀態來實現動畫。JavaScript 和 Native 通信有消耗，事件一多就會掉幀。動畫自然也沒法流暢了。

Tal Kol 的做法就是提供給 JS 聲明式的 API，JavaScript 只通知 Native 該如何響應用戶手勢，具體動畫的過程由 Native 來控制。

具體如下圖示意：

在 iOS 下我們可以藉助原生的物理引擎來實現，而在 Android 下，我們就得開發自己的物理引擎來實現同樣的效果。下面是物理：

接下來就是開源啦！

react-native-interactable 已經開源，而且可以到商店中搜索 React Native Interactions，下載 Demo App 體驗！

閃電分享#2

You Dont Need a Fancy Framework to Use GraphQL with React

分享的內容在這篇文章You don』t need a fancy framework to use GraphQL with React 里都可以看到。Samer Buna 給我們介紹了一種模式如何在不使用框架（Relay 或者 Apollo）的情況下，輕鬆地使用 GraphQL。

// In src/components/App.jsApp.GraphQL = ` query GetArticleList($apiKey: String!) { viewer(apiKey: $apiKey) { data: articles { ...ArticleListFragment } } } query GetArticle($apiKey: String!, $articleId: String!) { viewer(apiKey: $apiKey) { data: findArticle(id: $articleId) { ...ArticleFragment } } } ${ArticleList.GraphQL} ${Article.GraphQL}`;

Samer 認為可以像 React 組件樹一樣，組織對應組件的 GraphQL 查詢語句。然後由根組件發出查詢，子組件像個傻瓜一樣，接受來自父組件的數據即可。

除此之外，一個更有意思的東西是，Samer 開源了 https://graphfront.com/——GraphQL Backend as a Service，一個可以在線配置 GraphQL 後端 API 的服務；包括 graphfront 和 graphfront-ui。

Cross-Platform Data Visualization with React and React Native

Peggy Rayzis 做了很多數據可視化的工作。她們公司為了給用戶提供一致的體驗需要跨平台實現同樣的數據圖表。

可以選擇 d3.js，鑒於 d3.js 綁定數據到 DOM 的方式，但很難和 React 結合起來。或者使用 d3-scale，d3-shape 來解決問題，不過需要多喝幾杯咖啡，做很多數學工作，然後使用 react-native-svg 來解決 React Native 的問題。

Peggy 介紹了 Victory，同時還有 Victory-Native，實現了跨平台，並且提供了基於 d3.js 的 animation wrapper，動畫效果也不需要 CSS 來實現。

Using React for Anything but Websites

非常有趣，Ken Wheeler 使用 React 來開發了 PPT 工具，基於 Victory 的將圖標輸出到終端的 Victory CLI；React Game KIT，React Music 等等。

React Everything, Render Everywhere

一圖勝千言：

Create React Native App: 5 Minutes to "Hello, World!"

Facebook 宣布 Create React Native App 開源。

這個項目的靈感來自於 Create React App，與 Expo App結合，無需安裝 xCode 或者 Android Studio，就可以完成 React Native 項目的開發。

更多關於 CRNA 和 Expo 的內容可以參考演講視頻和官方介紹。

Day 1 總結

React Conf 2017 第一天內容就很豐富：

  • 1個主題演講；
  • 7專題演講；
  • 兩場閃電分享，10個 talk；
  • 20位講師上台演講。

演講分享涉及到 React 社區的各個方面：

  • 語言層面：ES.Next 和 Flow 類型靜態檢查；
  • 框架層面：React 16，Fiber 架構；
  • 類庫：Next.js、Mobx、Styled Components、等等；
  • 開源：native-navigation、create-react-native-app；
  • 各種 React、React Native 的實踐。

整體上，React 和 React Native 都趨向成熟，尤其是 React Native，已經達到可在生產上大規模使用的階段，開始湧現出一些高質量的類庫和最佳實踐。考慮一下，下一個項目是不是可以用起來了呢？

關於 Day 2 的內容，外刊君正在緊張的整理中，歡迎微信搜索「前端外刊評論」關注公眾號，敬請期待！

推薦閱讀：

※解析 Redux 源碼
※我對Flexbox布局模式的理解
※從0到1，細說 React 開發環境搭建那點事
※Immutable 詳解及 React 中實踐
※React 組件如何與其他框架進行數據交流？

TAG:React | ReactNative | iOS |