注意事项 ⚠️ #

  • 可以通过 React.eventSystem 或者 ReactDOM.eventSystem 来判断,官方没有提供该对象,所以只要该对象存在,就是 QReact。
  • QReact 使用了一部分 ES6 的 API,所以如果需要在旧版浏览器中运行的话,需要自行 polyfill,通常的方法是在项目入口文件引入 babel-polyfill 或者在 ykitwebpack 的打包配置中将 babel-polyfill 加入 entry 中。
  • 如果项目中使用了 react-addons-css-transition-group,请使用 react-transition-group/CSSTransitionGroup 代替(React v15 请使用 v1 版本,React v16 请使用 v2 版本),因为 react-addons-css-transition-group 是直接导出的 react/lib/ReactCSSTransitionGroup,而 QReact 并没有提供这个文件,所以需要使用 react-transition-group/CSSTransitionGroup 替换掉,实际上新版 React 也不再提供这个文件了。

在 ykit 中使用 #

如果使用 ykit 构建项目,可以在 modifyWebpackConfig 中配置 alias 来使用 qreact 替换 reactreact-dom:

module.exports = {
  /*
        ...
        */
  config: {
    modifyWebpackConfig: function(baseConfig) {
      // 其他 webpack 配置
      baseConfig.resolve = {
        alias: {
          react: 'qreact',
          'react-dom': 'qreact',

          // 若要兼容 IE 请使用以下配置
          // 'react': 'qreact/dist/ReactIE',
          // 'react-dom': 'qreact/dist/ReactIE',

          // 如果需要在 IE 下使用redux
          // 建议使用 QReact 提供的 ReduxIE 来减少性能损耗
          // 'redux': 'qreact/lib/ReduxIE',

          // 如果引用了 prop-types 或 create-react-class
          // 需要添加如下别名
          // 建议加上这两条,因为即使项目代码中没有用到
          // 第三方代码也可能会用到
          'prop-types': 'qreact/lib/ReactPropTypes',
          'create-react-class': 'qreact/lib/createClass',

          // 如果使用了 react-tap-event-plugin
          // 移动端项目(比如 yo)请务必加上此条
          'react-tap-event-plugin': 'qreact/lib/injectTapEventPlugin.js'
        }
      }

      return baseConfig
    }
  }
  /*
        ...
        */
}

注意 ⚠️

  • 请仔细阅读配置中的别名说明,比如 yo 项目请务必加上 react-tap-event-plugin 的别名。
  • 如果在 yo 项目中用到了 ykitdll,则需要将 ykit-config-yo 升级至 3.7.0 或以上版本,在此之前的版本若将 React 替换 为 QReact 会出现找不到 React 的错误。
  • 如果项目使用了 yo-router,则请务必使用 1.2.1 及以上版本,在此之前的版本可能会出现错误。

在 webpack 中使用 #

如果使用 webpack 构建项目,可以通过配置 webpackalias 来使用 qreact 替换 reactreact-dom:

module.exports = {
  /*
    ...
    */
  resolve: {
    alias: {
      react: 'qreact',
      'react-dom': 'qreact',

      // 若要兼容 IE 请使用以下配置
      // 'react': 'qreact/dist/ReactIE',
      // 'react-dom': 'qreact/dist/ReactIE',

      // 如果需要在 IE 下使用redux
      // 建议使用 QReact 提供的 ReduxIE 来减少性能损耗
      // 'redux': 'qreact/lib/ReduxIE'

      // 如果引用了 prop-types 或 create-react-class
      // 需要添加如下别名
      // 建议加上这两条,因为即使项目代码中没有用到
      // 第三方代码也可能会用到
      'prop-types': 'qreact/lib/ReactPropTypes',
      'create-react-class': 'qreact/lib/createClass',

      // 如果使用了 react-tap-event-plugin
      // 移动端项目(比如 yo)请务必加上此条
      'react-tap-event-plugin': 'qreact/lib/injectTapEventPlugin.js'
    }
  }
  /*
    ...
    */
}

在 script 标签中使用 #

如果是直接使用 script 标签引入,那么可以去掉 reactreact-dom 使用 qreact 取代之:

- <script src="react.js"></script>
- <script src="react-dom.js"></script>
+ <script src="qreact.js"></script>
module.exports = {
  /*
    ...
    */
  // 将 qreact 从打包的 js 文件中抽出
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
  /*
    ...
    */
}

在 IE 6 - IE 8 中使用 #

注意 ⚠️

  • 如果在项目中用到了 requestAnmationFrame,需要引入 request-animation-frame-polyfill,否则会报错。
  • 调试建议:由于 IE 8 及以下浏览器性能很差,如果有很多的日志输出的话,浏览器很容易卡死,因此建议限制一下日志输出的数量,可以通过劫持 console.log 的方式来限制日志的数量。

在 IE 6 - IE 8 中使用需要注意以下几个问题:

  • ykit.js 中的 alias 字段配置需要指向 qreact/dist/ReactIE 而不是 qreact

  • 如果项目直接或间接(比如 CSSTransitionGroup)中用到了 requestAnimatioin 的话,需要单独引入 requestAnimatioin 的 polyfill。

  • .babelrc 中需要在 plugins 中添加 add-module-exports

{
    "plugins": [
        "transform-export-extensions",
        // babel@6 不再以 commonJS 方式输出模块
        // 而在入口文件中中必须以 require 方式引入模块
        // 否则无法正常渲染
        // 详细信息请查看 https://github.com/59naga/babel-plugin-add-module-exports
        "add-module-exports"
    ],
    "presets": [
        "es2015",
        "react"
    ]
}
  • 入口文件不能使用 import 方式引入包或者组件,且需要引入 es5-shimes5-sham
// 引入 shim 解决 IE 8 下 Object.defineProperty 的问题
require('es5-shim')
require('es5-shim/es5-sham')

// 入口文件处不可用 import 引入模块,其他页面不受影响
// 因为 babel 把 import 编译成了 Object.defineProperty
// 而 IE8 中没有这个方法,上方引入的 shim 解决了这个问题
const React = require('react')
const ReactDOM = require('react-dom')
const Hello = require('./component/Hello')

ReactDOM.render(<Hello />, document.getElementById('app'))