就在前不久，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 发布。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 模型的一种衍生，但有三点主要的不同：

单一 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 组件就是一个很好的例子。

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 开源了 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

首先，我想问问演讲者 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 项目的开发。

更多关于 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 的内容，外刊君正在紧张的整理中，欢迎关注知乎专栏、微博，扫码关注公众号，敬请期待！