/qreact

QReact 是去哪儿网 YMFE 团队推出的 100% 兼容官方 React 的迷你框架

Primary LanguageJavaScriptApache License 2.0Apache-2.0

简介

QReact是去哪儿网推出的一款高度兼容 React迷你的 React 框架,让 React 在业务线上更具通用价值。

众所周知,React 一直存在体积过大的诟病,集成了许多在线上环境不需要功能。YMFE 团队在熟读其源码的基础上,去芜存精,重新实现了 React 所有公开接口,体积只有 React 的约三分之一,从而解决它在移动端上加载过慢的问题。由于没有使用高级 API,因此只需在 webpack ,uglify 上修改配置,便能运用于 IE8 上,从而解决 PC 端同学使用 React 的问题。

它对比官方 react, preact, inferno, react-lite 等框架,它具有以下优势。

  • 对比 preact等迷你框架,QReact 的事件系统更为完善,更具扩展性。像 mouseenter/mouseleave,focus/blur 等不冒泡的事件,preact 简单的基于**addEventListener(type, fn, true)**是无法正常运行。

  • 对比 preact等迷你框架,QReact 在处理混杂着 ref 与生命周期钩子的逻辑时,与官方的行为是保持一致。React.Children 与 React.cloneElement 在 key 生成策略上也是与官方行为一致。其他迷你框架则出入很大,或干脆没有实现。简而言之,QReact 与 React 高度兼容,在细节上做得原汁原味。因此它 99%上运行阿里的antd这样复杂的 UI 框架,当然我们不限于此,会努力做到完全兼容。

  • QReact 实现了官方 react/lib 下的许多子模块,它们的实现也非常简洁,从而整体减少 bundle 的大小。如果没有实现它们,许多第三方库就会直接引用官方提供的 react/lib 子模块,但由于迷你 React 们的内部实现与官方不一样,因此即便引用,也会运行出错。其次,RN 也用到它们,,这也为 QReact 支持三端合一的 QRN-WEB 做技术支撑。

  • QReact 包含了 reactreact-dom 的全部功能,同时有着更小的体积,QReact@2.1.4 的体积为(minified: 34.45KB gzipped : 12.88KB),作为对比, react@16.2.0 + react-dom@16.2.0 的体积则大了很多(minified: 5.1KB + 88.7KB = 93.8KB gzipped: 2.2KB + 28.3KB = 30.5KB)。

  • QReact 支持 IE6 - IE8,详细信息请参见使用中的“在 IE 6 - IE 8 及以下使用”。

  • QReact 是一个充满活力的库,它的开发版本anujs几乎每天都有更新,不断跟进官方 React 的新特性,React 16 的一些新功能也渐渐加入。

如何使用

详细使用方式请参见使用

组件规范

为了减少常见的编码错误,请尽量遵循编码规范

鸣谢

QReact 基于开源项目 developit preact@7.1.0 developit preact-compat@3.14.1Facebook React@v15.3.1

QReact 在开发过程,从 preact, react-lite 的源码受到许多启迪,特此鸣谢。

欢迎大家对 QReact 与 anujs 进行试用与提 issue 与 PR!