跨端框架 RAX 初体验

作者 | 马靖

day day up, bye bye bug

锵锵锵～ 小伙伴们，新出的会议室预约系统用着还顺手吗？快告诉我，对比之前的古老预定方式是不是方便很多？系统响应快不快？界面是不是一目了然？交互方式友好吗？

看着每天预约人数这么多，无疑答案都是肯定的。

那你有没有预约个会议室来把玩一下？预约网红会议室像不像淘宝双十一的大抢购？悄悄告诉你，会议室预约系统采用的前端框架，就是淘宝双十一的 Rax。爱学习的你一定嗅到了知识的味道～

那什么是 Rax，怎么用 Rax，什么时候用 Rax 呢？接下来，前端女同学就来聊聊会议室预约系统的前端技术使用。

1. What

什么是 Rax 呢？来看官方定义

Rax 是用于构建通用应用程序的渐进式 React 框架，其内部提供基础UI组件。目前，在阿里系公司展开使用，并在淘宝双十一购物节中独领风骚。

通过上面定义我们知道，Rax 是基于 React 标准，并支持在不同容器中渲染（当前最重要的容器即 Weex 和 Web ）。

核心思想两个 “ React ” 标准和 “ 跨容器 ”。别问为什么，先记住，快，我知道你要问什么；因为接下来我要讲 Rax 和 React 的关系了，听完你就没有疑惑了。

1.1 Rax 和 React

我们可以把 React 看作是一种标准，那么Rax 就是对该标准的一个跨容器框架的实现。也可以说 Rax 只是 React 的无线端的解决方案，与 React 并无冲突，我们就把 Rax 看作是一种扩展，因为 Rax 与 React 还是有一定的区别。

比如：Rax 没有 createClass() 方法；Rax 可以返回多个同级结点，React 只能有一个结点；React 中的生命周期在 Rax 也同样可用，一些副作用和钩子函数均可使用。说到这些，你一定会想到 state，认为 state 状态的设计一定也一样，其实暗藏玄机（故意神秘）。

1.2 setState 不同

常言道： 结论先行，来，上结论。setState(updater, callback) 在 React 中是异步/同步的，而在 Rax 中是同步的。

先一起回顾一下 React 中怎么处理 setState 问题。

1.2.1 React 的 setState 机制

在 React 中，setState 后通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能。

这也是通常操作，React 里面有两个更新 state 的方式，同步和异步。如果是由 React 事件引发的 setState（如 onClick 和钩子函数)，调用 setState 是异步更新，除此之外的 setState 是同步执行（如 addEventListener 和定时器等）

React 会把每一次的 setState 操作放入一个队列里面，会先判断是否由 React 事件引发的 setState ，来判断是直接更新还是批量更新。

1. 先对 React 事件进行标记，将 setState 传入的 state 参数存储在当前组件实例的 _pendingStateQueue 中；

2. 将 React 事件引发的 setState 更新放入异步队列中并 dirty 标记，需要批量更新 state，把 VDom 到 Dom 的操作降到最小；

3. 非