Skip to content

Commit

Permalink
update README
Browse files Browse the repository at this point in the history
  • Loading branch information
@roland-reed
roland-reed committed Sep 20, 2017
1 parent f786dde commit 0918c37
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 101 deletions.
115 changes: 15 additions & 100 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,31 @@
# Qreact

## 简介

Qreact 是 React 的迷你兼容实现，它在dist目录包括以下几个文件
1. React.js 支持IE9＋,包含一些官方React已经声明废弃或分离出去的API，没有特殊要求，业务线同学直接可以使用该文件。
2. ReactIE.js 支持IE6－8（打包时记得配合lib/polyfill.js一起使用）,包含一些官方React已经声明废弃或分离出去的API。一般对兼容性有要求的PC平台。
3. ReactShim.js 要求浏览器支持[es6 Map对象](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), 不再包含PropTypes, createClass, createFactory。 一般用于移动端


## 使用

```
npm install anujs
npm install qreact
```
webpack或yit中的配置

```
resolve: {
alias: {
'react': 'anujs',
'react-dom': 'anujs',
'react-tap-event-plugin': 'anujs/lib/injectTapEventPlugin' 　//如果你用到了onTouchTap事件
}
}
```
或者 直接使用ykit-config-anu

anujs是qreact的开发代号，线上环境使用请务必使用qreact. 有问题请联系qincheng.zhong.


使用方法与React大同小异。

## 与官方React

> preact(-compat) 是指preact+ peact-compat
| 名称 | 类别 | React | qreact | preact(-compat) |
|----------------------------------------------|---------------|-------|--------|-----------------|
| React.Component | class | ✔️ | ✔️ | ✔️ |
| React.PureComponent | class | ✔️ | ✔️ | ✔️ |
| React.createClass | Top-Level API | ✔️ | ✔️ | ✔️ |
| React.createElement | Top-Level API | ✔️ | ✔️ | ✔️ |
| React.cloneElement | Top-Level API | ✔️ | ✔️ | ✔️ |
| React.createFactory | Top-Level API | ✔️ | ✔️ | ✔️ |
| React.isValidElement | Top-Level API | ✔️ | ✔️ | ✔️ |
| React.DOM | Top-Level API | ✔️ | ✖️ | ✔️ |
| React.PropTypes | Top-Level API | ✔️ | compat | compat |
| React.Children | Top-Level API | ✔️ | ✔️ | ✔️ |
| ReactDOM.render | Top-Level API | ✔️ | ✔️ | ✔️ |
| ReactDOM.unmountComponentAtNode | Top-Level API | ✔️ | ✔️ | ✔️ |
| ReactDOM.unstable_renderSubtreeIntoContainer | Top-Level API | ✔️ | ✔️ | ✔️ |
| ReactDOM.findDOMNode | Top-Level API | ✔️ | ✔️ | ✔️ |
| ReactDOMServer.renderToString | Top-Level API | ✔️ | ✔️ | ✔️ |
| ReactDOMServer.renderToStaticMarkup | Top-Level API | ✔️ | ✖️ | ✖️ |

其中，createClass，isValidElement，PropTypes，Children，unmountComponentAtNode，unstable_renderSubtreeIntoContainer不建议大家使用了。

## 组件实例API 对照表

| 名称 | 类别 | React | qreact | preact(-compat) |
|------------------------|---------------|-------|-----|-----------------|
| Instance .setState | Component API | ✔️ | ✔️ | ✔️ |
| Instance .replaceState | Component API | ✔️ | ✖️ | ✔️ |
| Instance .forceUpdate | Component API | ✔️ | ✔️ | ✔️ |
| Instance .isMounted | Component API | ✔️ | ✖️ | ✔️ |
QReact 是去哪儿网推出一个迷你 React 框架，让 React 在业务线上更具通用价值。众所周知，React 一直存在体积过大的诟病，集成了许多在线上环境不需要功能。YMFE 团队在熟读其源码的基础上，去芜存精，重新实现了 React 所有公开接口，体积只有 React 的约三分之一，从而解决它在移动端上加载过慢的问题。由于没有使用高级 API，因此只需在 webpack ,uglify 上修改配置，便能运用于 IE8 上，从而解决 PC 端同学使用 React 的问题。

## 组件Specs 对照表
对比 `preact/react-lite`，QReact 的优势在于事件系统更为完善，更具扩展性。像 `mouseenter/mouseleave`,`focus/blur` 等不冒泡的事件，`preact` 存在暇疵。

QReact 也实现了官方 `react/lib` 下的许多模块，这些模块可能被 RN 引用，这也为 QReact 支持三端合一的 QRN-WEB 做技术支撑。

| 名称 | 类别 | Specs | React | anu | preact(-compat) |
|--------------|-----------|-------|-------|-----|-----------------|
| render | Component | Specs | ✔️ | ✔️ | ✔️ |
| state | Component | Specs | ✔️ | ✔️ | ✔️ |
| defaultProps | Component | Specs | ✔️ | ✔️ | ✔️ |
| propTypes | Component | Specs | ✔️ | ✔️ | ✔️ |
- QReact 与 React 完全兼容，具有高度一致的 API 和行为。

- QReact 包含了 `react` 及 `react-dom` 的全部功能，同时有着更小的体积（`minified: 24KB gzipped : 10KB`），作为对比， `[email protected]` + `[email protected]` 的体积则大了很多（`minified: 42.5KB + 182KB = 224.5KB gzipped: 9.1KB + 46.1KB = 55.2KB`）。

- QReact 支持 IE 6 - IE 8，详细信息请[参见使用](https://qreact.ymfe.org/usage.html)中的“在 IE 6 - IE 8 及以下使用”。

## 组件生命周期 对照表
- 为了减小体积___没有___实现 `React.PropTypes`，但这并不意味着代码中使用了 `PropTypes` 就会报错，只是不起作用而已。

| 名称 | 类别 | React | qreact | preact(-compat) |
|---------------------------------------|--------------------|-------|-----|-----------------|
| componentWillMount(合并setState) | Component Lifecyle | ✔️ | ✔️ | ✔️ |
| componentDidMount | Component Lifecyle | ✔️ | ✔️ | ✔️ |
| componentWillReceiveProps(合并setState) | Component Lifecyle | ✔️ | ✔️ | ✔️ |
| shouldComponentUpdate | Component Lifecyle | ✔️ | ✔️ | ✔️ |
| componentWillUpdate | Component Lifecyle | ✔️ | ✔️ | ✔️ |
| componentDidUpdate | Component Lifecyle | ✔️ | ✔️ | ✔️ |
| componentWillUnmount | Component Lifecyle | ✔️ | ✔️ | ✔️ |
## 如何使用

## 特性支持对照
详细使用方式请[参见使用](https://qreact.ymfe.org/usage.html)。

| 名称 | 类别 | React | qreact | preact(-compat) |
|-------------------------|-----|------------|--------|-----------------|
| contextTypes | 特性 | ✔️ | ✔️ | ✔️ |
| getChildContext | 特性 | ✔️ | compat | compat |
| ref | 特性 | ✔️ | ✔️ | ✔️️ |
| getDOMNode | 特性 | ✔️ | ✔️ | ✖️ |
| style | 特性 | ✔️ | ✔️ | ✖️ |
| onEvent | 特性 | ✔️ | ✔️ | ✔️ |
| onEventCapture | 特性 | ✔️ | ✔️ | ✖️ |
| dangerouslySetInnerHTML | 特性 | ✔️ | ✔️ | ✖️ |
| （非）受控组件 | 特性 | ✔️ | ✔️ | ✖️ |
| IE8支持 | 特性 | ✔️（高版本不支持） | ✔️ | ✖️ |
## 组件规范

三方都支持React官方的Chrome DevTools
为了减少常见的编码错误，请尽量遵循[编码规范](https://qreact.ymfe.org/standard.html)。

## 鸣谢

## License
QReact 基于开源项目 [developit [email protected]](https://github.com/developit/preact/tree/7.1.0/) [developit [email protected]](https://github.com/developit/preact-compat/tree/3.14.1) 及 [Facebook [email protected]](https://github.com/facebook/react/tree/v15.3.1)。

MIT
QReact 中包括 Virtual DOM 以及 diff 机制等核心部分基于 Preact，通过修改数据结构及 diff 逻辑进一步减小与原生 React 的差异。

此外，QReact 使用 React 的原生事件系统替换了 Preact 的事件绑定，并提供包含了 PanResponder 的 React Native Web 版本。
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "qreact",
"version": "1.1.0",
"version": "1.1.1",
"description": "a mini React-like framework",
"main": "dist/React.js",
"scripts": {
Expand Down

0 comments on commit 0918c37

Please sign in to comment.