React Conf 2017 不能错过的大起底——Day 1！

就在前不久，React Conf 2017 在加利福尼亚州的圣克拉拉万豪酒店圆满落幕，这已是第三届 React 官方大会了。今年的大会怎么样，有哪些新东西，外刊君接下来将会给你们来个大起底，Day 1 大放送！

ReactConf2017 应用

ReactConf2017

Fhinkmill 的工程师基于 React Native 开发一个应用——ReactConf2017。下载：iOS、Android。参会者能够在应用上查看日程安排，会议地点，获取参会路线等等。参会体验++。

ReactConf2017‘s home page

主题演讲（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 进一步衡量了启动渲染各个环节消耗的时间，尽可能缩短或者并行处理这些环节。

performance

通用

针对 iOS和Android的差别，提供通用的 API。

parity

开发者体验

Facebook 主应用上千人维护，几分钟才能编译一次，React Native 作到了即改即现，优化与navigation的集成，实现了添加新的 page，也无需从新编译整个应用。

---

React Native 进过不断的打磨、提高和使用，它的 Scope 也在一步步发生变化。

scope of react native

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 发布。github.com/acdlite/rea… facebook.com 上已经用上了 React Fiber。你们能够下载 react@next react-dom@next 试用。

看动画识 Fiber

fiber

Fiber 能够提高复杂React 应用的可响应性和性能。Fiber 便是React新的调度算法（reconciliation algorithm）。

reconciler and renderer

react 即 reconsiler（调度者），react-dom则是 renderer。调度者一直都是又 React 自己决定，而 renderer 则能够由社区控制和贡献。

那新的调度算法是如何优化可响应性和性能的呢 。

old react

每次有 state 的变化 React 从新计算，若是计算量过大，浏览器主线程来不及作其余的事情，好比 rerender 或者 layout，那例如动画就会出现卡顿现象。

fiber

React 制定了一种名为 Fiber 的数据结构，加上新的算法，使得大量的计算能够被拆解，异步化，浏览器主线程得以释放，保证了渲染的帧率。从而提升响应性。

render/reconciliation and commit

React 将更新分为了两个时期：

render/reconciliation

render/reconciliation

可打断，React 在 workingProgressTree 上复用 current 上的 Fiber 数据结构来一步地（经过requestIdleCallback）来构建新的 tree，标记处须要更新的节点，放入队列中。

commit

commit

不可打断。在第二阶段，React 将其全部的变动一次性更新到DOM上。

除此以外，还有更多的优化细节，能够参看 Lin Clark 的演讲视频。

更详细的解读，能够看到演讲视频或者知乎专栏 进击的React的解读文章：React Fiber是什么

Next.js

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

hacker news write by next.js

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 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 项目的开发。

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