Taobao FED

Rax 1.0 版本更新与特性介绍

Rax 1.0 版本更新与特性介绍

Rax 1.0 版本更新与特性介绍

一些数据

本数据截止 2019 年 9 月下旬,Rax 进行了一次大版本的更新,支持了的 Hooks 的编码方式,在工程体系上支持了支付宝小程序的能力,在 Web 项目的体验上有了较大的提升。

  • 4919 commits
  • 1076 pull requests
  • 309 issues
  • 5451 stars

用户体验

Rax 1.0 在 Web 体验上做出了重大突破,更小的包体积、更好的 Web 体验以及服务端渲染让你的页面加载与预览更加流畅。

Core 体积更小以及 Hooks 写法对代码的精简让 Bundle 体积得到一定程度的瘦身,部分 API 从 Core 中剥离按需引用更加灵活。

Core 体积相对于 Rax 0.6.5 有了近一半的体积瘦身。





研发效率



多端的支持上 Rax 1.0 新增支付宝小程序。

小程序的支持方式是通过编译时 JSX 转小程序的方式。

Go Rax 是 Rax 官方组件与 API 的示例项目,可以在官网上找到并预览。





工程插件化,可以更灵活的满足各种业务需求



全新的官网,内容更加丰富。

提供更加智能的工作方式。

更加规范的设计。

开发规范

npm init rax <YourProjectName> 创建工程

区别于 0.6,Rax 1.0 必须指定 Driver。

Hooks 是 Rax 1.0 新增的特性,它可以让函数组件(Function Component)使用状态和生命周期。Rax 在实现上遵循了 React Hooks 的标准。

部分非核心 API 从 Rax Core 中被移除,以独立包的形式提供给业务使用

Example:

1
import findDOMNode from 'rax-find-dom-node';

Rax 支持了一种 JSX 扩展语法 JSX+,它能帮助业务开发者更爽更快地书写 JSX。JSX+ 不是一种新的概念,它是 JSX 基础上的扩展指令概念。

组件在概念上类似于 JavaScript 函数,它接收任意的参数(组件的参数称为“props”),然后返回一个可以被渲染的 Rax 元素。

Rax 元素的事件处理和 HTML 的 DOM 元素类似,但在语法上有一些区别:

  • 事件采用驼峰式命名。
  • 传入函数作为事件处理器而不是字符串。

Rax 中支持 内联样式和独立 css 单位,推荐使用 rpx 单位进行多端开发

  • 不同端上样式支持程度不同需要注意
  • 不同端上提供的 API 也不尽相同,需要了解各自端上特性

未来计划

正在使用 Disqus 评论,请保持网络畅通