就在前不久，React Conf 2017 在加利福尼亞州的聖克拉拉萬豪酒店圓滿落幕，這已經是第三屆 React 官方大會了。今年的大會怎麼樣，有哪些新東西，外刊君接下來將會給大家來個大起底，Day 1 大放送！
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 也在一步步發生變化。
- Webview Conversions: 有更好的互動體驗；
- High Iteraction Views：需求不斷變化，快速迭代的功能；
- Other Full-Sreen Views：全屏功能的 View；
- Cross-App Views：跨 App 功能介面共享。
React 端到端效能（React Fiber）
目前如何合理安排 React 計算渲染更新是優先順序很高的核心工程。React 團隊設計出thread、worker、build 優先順序等等，最終獲得了一個可行的模型，重新確定如何繪製UI——即 React Fiber。React Fiber 不是一個新的專案，是 React 的新架構，將在 React 16 釋出。github.com/acdlite/rea… 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 模型的一種衍生，但有三點主要的不同：
- 單一 Store;
- 使用pure function代替dispatcher
- store/state 是不可變資料
Preethi Kasireddy 用了一個很有意思的比喻。可以把 Mobx 當做一個 spreadsheet，有一類是純資料cell，有一類是通過純資料的cell加公式計算出來的cell。純資料的cell上就像加了 obserable，資料cell變化了也會導致另外一種cell中資料的變化。
上面是 Redux 和 Mobx 內部技術結構的具體比較：
- Redux 的 Store 是單一的，而 Mobx 是分散的，可以按照領域來組織；
- Redux 的資料是純物件，而 Mobx 是一系列的 Observable 資料；
- Redux 依賴的是不可變資料結構，而 Mobx 資料時可變的；
- 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 Don't 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.js
App.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 開源了 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
首先，我想問問演講者 Dustan Kasten，你鬍子這麼長，你老婆不管你麼？
一圖勝千言：
Create React Native App: 5 Minutes to "Hello, World!"
Facebook 宣佈 Create React Native App 開源。
這個專案的靈感來自於 Create React App，與 Expo App結合，無需安裝 xCode 或者 Android Studio，就可以完成 React Native 專案的開發。
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，已經達到可在生產上大規模使用的階段，開始湧現出一些高質量的類庫和最佳實踐。考慮一下，下一個專案是不是可以用起來了呢？
