手摸手带你学Raxjs

锵锵锵&＃xff5e;
小伙伴们&＃xff0c;新出的会议室预约系统用着还顺手吗&＃xff1f;快告诉我&＃xff0c;系统响应快不快&＃xff1f;预约网红会议室像不像淘宝双十一的大抢购&＃xff1f;悄悄告诉你&＃xff0c;会议室预约系统采用的前端框架&＃xff0c;就是淘宝双十一的 Rax。
那什么是 Rax&＃xff0c;怎么用 Rax&＃xff0c;什么时候用 Rax 涅。接下来&＃xff0c;前端女同学就来聊聊会议室预约系统的前端技术使用。

What

什么是 Rax 呢&＃xff0c;来看官方定义&＃xff1a;Rax 是用于构建通用应用程序的渐进式 React 框架&＃xff0c;其内部提供基础UI组件。目前&＃xff0c;在阿里系公司展开使用&＃xff0c;并在淘宝双十一购物节中独领风骚。
通过上面定义我们知道&＃xff0c;Rax 是基于 React 标准&＃xff0c;并支持在不同容器中渲染&＃xff08;当前最重要的容器即 Weex 和 Web &＃xff09;。
核心思想两个 “ React ” 标准和 “ 跨容器 ”。别问为什么&＃xff0c;先记住&＃xff0c;快&＃xff0c;我知道你要问什么&＃xff1b;因为接下来我要讲 Rax 和 React 的关系了&＃xff0c;听完你就没有疑惑了。

Rax 和 React

1. 我们可以把React 看作是一种标准&＃xff0c;那么Rax 是对该标准的一个跨容器框架的实现。Rax 只是 React 的无线端的解决方案&＃xff0c;与 React 并无冲突&＃xff0c;可以把 Rax 看作是一种扩展&＃xff1b;
2. Rax 没有 createClass() 方法&＃xff1b;
3. Rax 可以返回多个结点&＃xff0c;React 只能有一个结点&＃xff1b;
4. React 中的生命周期在 Rax 也同样可用&＃xff0c;一些副作用和钩子函数也可使用。

说到这里&＃xff0c;你一定会想到&＃xff0c;state 状态的设计一定也一样&＃xff0c;然而并不是。

setState不同

setState()&＃xff0c;在 React 中是异步的&＃xff0c;而 Rax 中是同步的。
先回顾一下 React 中怎么处理setState问题。

React 的 setState 机制

在 React 中&＃xff0c;如果是由 React 事件引发的 setState&＃xff08;如 onClick )&＃xff0c;调用 setState 是异步更新&＃xff0c;除此之外的 setState 是同步执行&＃xff08;如 addEventListener 和定时器等&＃xff09;

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

1. 先对 React 的事件进行标记&＃xff1b;
2. 将 React 事件引发的 setState 更新放入异步队列中并 dirty 标记&＃xff0c;需要批量更新 state&＃xff0c;把 VDom 到 Dom 的操作降到最小&＃xff1b;
3. 非 React 事件引发的 setState &＃xff0c;进行同步执行直接更新&＃xff1b;

Rax 的 setState 机制

Rax 的 setState 为同步更新。只要调用 setState 就会直接更新对应的状态。
然而 setState 是会引起视图的更新会引发重绘&＃xff0c;会重新走一遍更新阶段的生命周期&＃xff0c;势必会带来性能问题&＃xff0c;开发者需要控制好更新时机。由此可见&＃xff0c;Rax 对开发者的要求较高。

Rax 特点

1. 设计上支持不同容器&＃xff1b;
   Rax 在设计上尽量抹平各个端的差异性&＃xff0c;这也使得开发者在开发中&＃xff0c;差异性和兼容性方面再也不需要投入太多精力。
2. 体积足够小&＃xff1b;
   Rax 是一个面向无线端的解决方案&＃xff0c;因此自身的体积对于性能来讲就显得非常重要。Rax 压缩 &＃43; gzip 后的体积是 8.0kb, 相比 React 的体积, 对于无线端很友好。
3. 支持返回多个同级节点&＃xff1b;
   这一特性可以有效减少页面的嵌套层级&＃xff0c;从而减少应用因嵌套层级过多而出现的 crash 问题。
4. 标准化&＃xff1b;
   需要适配各个端&＃xff0c;那么需要各个端的一致性&＃xff0c;一致则必有规范可依&＃xff0c;目前 Rax 遵循 W3C 标准&＃xff0c;受限于各个端的差异&＃xff0c;「更标准化」这也是 Rax 未来的重要目标之一。

多端运行

Rax 的跨容器特性是通过抽象出抽象 View 层的实现。
Rax 将 Vdom 与 Dom之间的转化定义为 Driver&＃xff0c;依靠 Driver 来驱动实现跨端&＃xff1b;Driver 定义了 VDOM 在具体容器下的渲染实现。比如在 Web 场景下&＃xff0c;对应的 Driver 为 Driver-Dom&＃xff0c;它描述了在浏览器中&＃xff0c;如何将 VDOM 渲染为真实的 DOM。基于这种思路&＃xff0c;同一套代码&＃xff0c;经过不同的 Driver 就可以运行在不同的容器下。

how

创建

快速创建一个 Rax 多端应用

npm init rax todoList


初始化

初始化项目过程中&＃xff0c; 按照项目的需要选择配置信息。
以下是简单 todolist 的 demo 演示所需要的配置项。

项目目录

初始化的项目后&＃xff0c;得到如下项目结构

├── README.md # 项目说明
├── build.json # 项目构建配置
├── package.json
└── src # 源码目录├── app.js # 应用入口文件├── app.json # 应用配置&＃xff0c;包括路由配置&＃xff0c;小程序 window 配置等├── public # (可选)静态资源目录&＃xff0c;会拷贝内容至 build 目录├── components # 应用的公共组件│ └── Logo # 组件│ ├── index.css # Logo 组件的样式文件│ └── index.jsx # Logo 组件 JSX 源码├── document # 页面的 HTML 模板│ └── index.jsx └── pages # 页面└── Home # home 页面└── index.jsx

路由配置

Rax 使用 rax-use-router 来管理多个页面&＃xff0c;生成的 Rax App 是一个单页应用&＃xff08;可通过 build-plugin-rax-multi-pages 切换成多页应用&＃xff09;

1. 配置&＃xff1a;路由的配置如同小程序的配置&＃xff0c;在 app.json 中直接写入&＃xff1b;
2. 使用&＃xff1a;路由正常使用&＃xff0c;动态路由和路由对参数&＃xff0c;不能直接从 props.id 获取&＃xff0c;路由信息需要自己解析&＃xff0c;不能像 react-router 那样&＃xff0c;。
   路由的配置信息如下图所示。
   

状态管理

状态管理方面可以采用和 React 相同的状态管理库&＃xff0c;大致分为两类&＃xff1a;
第一类&＃xff1a;搭配中间件 Redux 状态管理&＃xff0c;为了简化开发关注点&＃xff0c;对 Redux 进一步封装&＃xff0c;例如&＃xff1a;Dva等等&＃xff1b;
第二类&＃xff1a;采用 observerble 的方案&＃xff0c;例如&＃xff1a;MobX 等&＃xff1b;
如果使用状态管理的业务场景较少&＃xff0c;可以考虑 React 的 Context &＃xff0c;官网推荐的 hooks 中 useContext &＃43; useReducer 搭配使用。具体的使用方案还是要看具体的业务需求。

组件传参

父 &＃61;> 子&＃xff1a;父组件可以通过 props 给子组件传递数据&＃xff1b;
子 &＃61;> 父&＃xff1a;子组件可以通过 callBack 的方式调用父组件&＃xff1b;
兄 <&＃61;> 弟&＃xff1a;对于兄弟组件或者跨层组件&＃xff0c;可以通过发事件的方式通信&＃xff0c;也可以单独引入状态管理框架来处理。
当然了&＃xff0c;也可以拿到组件的实例&＃xff0c;使用 ref 直接调用相应的方法。

UI 组件库

Rax 的社区不够活跃&＃xff0c;几乎没有可用的第三方 UI 组件库&＃xff0c;仅有官方提供的一些常用功能组件&＃xff0c;三大类组件库如下&＃xff1a;

1. 基础组件&＃xff1a;如 View 视图组件&＃xff0c;默认 Flexbox 布局&＃xff0c;可任意嵌套&＃xff1b;
2. 基础容器&＃xff1a;如 ScrollView 滚动容器&＃xff0c;设置确定的高度展示列表内容&＃xff1b;
3. 功能组件&＃xff1a;Embed 内嵌内容容器&＃xff0c;在 Weex 容器中通过 实现&＃xff0c;在 Web 容器中通过 实现&＃xff1b;

打包

1. 在 build.json 中选择一个或多个需要投放的端&＃xff0c;目前可供选择的有 Web、 Weex、Alibaba Miniapp、WeChat MiniProgram、Kraken (Flutter)&＃xff1b;
   
2. 运行npm run build 命令即可按需生成 build 打包文件。
   
   miniapp &＃61;> 阿里系小程序&＃xff08;支付宝小程序、天猫精灵小程序&＃xff09;
   web &＃61;> web 页面
   weex &＃61;> weex 容器
   wechat-miprogram &＃61;> 微信小程序
   kraken &＃61;> 一款轻量级的面向前端网络开发人员的框架

踩坑

&＃xff08;1&＃xff09;需要利用 PureComponent&＃xff0c;StatelessComponent 优化组件渲染
Rax 把很多处理性能优化的工作交给了开发者来处理&＃xff0c;这也是 Rax 对开发人员要求更高的一个原因。PureComponent 在更新触发时会比较 props 和 state&＃xff0c;如果没变化就不更新。StatelessComponent 在组件渲染时不会生成 Component 实例&＃xff0c;能减少一定性能开销&＃xff1b;
&＃xff08;2&＃xff09;尽量自己来控制 Dom 的更新时机&＃xff1b;
Rax 的 setState 是同步的&＃xff0c;要避免频繁调用&＃xff0c;最好是数据都统一更新&＃xff0c;自己手动调用 forceUpdate 更新 Dom&＃xff1b;
&＃xff08;3&＃xff09;子组件适当提供 Key&＃xff0c;尽量保持组件 Dom 结构的稳定&＃xff1b;
子组件设置 Key 和 Vue 原理类似的&＃xff0c;保持 Dom 结构稳定&＃xff0c;也和虚拟 Dom 的 Diff 有关&＃xff0c;可以避免频繁的 Dom 操作&＃xff1b;
&＃xff08;4&＃xff09;Rax 无单位与 rem 单位等价&＃xff0c;页面宽度默认是 750rem&＃xff0c;各端兼容&＃xff1b;
&＃xff08;5&＃xff09;路由传参&＃xff0c;很遗憾&＃xff0c;不支持 props.id 直接获取&＃xff0c;路由信息需要自己解析&＃xff1b;

when

Rax 优点 跨容器、高性能、轻量。

但是Rax本质上还只是属于UI层模式&＃xff0c;在接入时应该注意和自己的底层框架解耦。并且Rax对开发者的要求较搞&＃xff0c;如果没有一定的经验和规范约束&＃xff0c;容易导致项目臃肿、结构混乱的问题。

目前在移动端React和Vue都有很高的占比&＃xff0c;社区生态也都比较活跃。具体的选型可以结合团队的实际情况。

无论选择哪个框架&＃xff0c;都需要认真研究框架原理&＃xff0c;对框架的优缺点和潜在问题做到心里有数&＃xff0c;如果能够掌握其运行机制就更棒了&＃xff0c;这样在应对一些复杂需求和重大变化时才能游刃有余。