qyb-react-umd

qyb-react-umd是一个集成React框架以及一些组件库（比如antd）的一个umd包。提供传统前端下使用组件化前端框架组件的一种方式，作为前端转型过渡方案。 如下是集成antd库表格示例

集成

把dist文件夹下qybreactumd.js拷贝到项目资源目录

目前qybreactumd.js 包含React基础框架和Antd组件库

在index页面引入qybreactumd.js

另外如果想用其他React组件库，并且其他组件库提供了umd打包，可以在下面继续引入对应的js。（如果需要一起打包到qybreactumd.js中，可联系公共组件重新打包或提供不同的umd文件）

    <!-- 加载 React-->
    <script src="assets/qybreactumd.js"></script>
    <script src="assets/otherReactcomponentslib.umd.js"></script>

使用

定义容器div

  <div id="content_ant_table" />

新建与渲染组件

  // 如下就是上面示例图片中表格的全部基础代码
  
  // 拿到React 和 ReactDOM 等框架相关对象。
    var React = QybReactUmd.React
    var ReactDOM = QybReactUmd.ReactDOM
    const e = React.createElement;
  // 拿到基础组件对象 antd对象下为所有antd的所有组件对象，使用方法参考antd文档
    var AntTable = QybReactUmd.antd.Table
    
    const columns = $params.columns
    const datas = $scope.datas
  
  // 根据基础组件新建业务组件（需要熟悉React框架函数组件使用）
    var MyTable = function() {
        const [state, setState] = React.useState({ text: "", checked: false })
        return e(AntTable, {
          columns: columns,
          dataSource: data,
          bordered: true,
          size: "middle",
          scroll: {
            x: 'calc(700px + 50%)',
            y: 240
          }
        });
    }
    ReactDOM.render(
      e(MyTable),
      document.getElementById('content_ant_table')
    );	

其他

1. 目前打包了整个antd库，体积较大，gzip后依然达到700k左右。生产环境需开启gzip。如需减少体积，可以通过只打包使用到了的组件实现。
2. 可以提取通用组件集成到库中来
3. tsx转换成js工具
4. Antd文档
5. React文档

IE 下注意事项

1. 兼容IE9+
2. IE下不支持箭头函数，const 关键字，在写组件时应注意。