03-React脚手架工具dva和umi，组件库引入，高阶组件

亦凉 2021-07-26 02:12 461阅读 0赞

一、DVA  
1、安装dva-cli  
确保dva版本在0.9.1或以上

$ npm install dva-cli -g
    $ dva -v
    dva-cli version 0.9.1

2、创建新应用

$ dva new project_name

3、进入项目目录，并启动开发服务器

$ cd dva-quickstart
    $ npm start

详见dva官网

二、UMI  
1、安装umi

$ yarn global add umi 或 $ npm install -g umi

2、创建项目、进入项目

$ mkdir myapp 
    $ cd myapp

3、创建页面

$ umi generate page index

4、启动项目

$ umi dev

5、打包  
$ umi bulid

详见umi官网

三、组件库引入  
PC端：Ant Design Pro  
移动端：Ant Design Mobile

1、安装  
$ npm install antd-mobile -D

2、引入react-app-rewired  
$ npm install reacr-app-rewired customize-cra -D

3、修改package.json中的配置  
将package.json中的“scripts”改为：

“scripts”:\{  
“start”:“react-app-rewired start”,  
“build”:“react-app-rewired build”,  
“test”:“react-app-rewired test”,  
“eject”:“react-app-rewired eject”  
\}  
4、在项目根目录创建config-overrides.js用于修改默认配置  
npm install babel-plugin-import -D  
然后在config-overrides.js中写入

const \{override, fixBabelImports\} = require(‘customize-cra’);  
module.exports = override(  
fixBabelImports(‘import’,\{  
libraryName:‘antd-mobile’,  
style:‘css’  
\});  
)

5、在组件内使用即可

四、高阶组件  
1、Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。

2、功能：

进行某些方法或是属性的复用  
让外层的组件替我们完成任务，里层组件直接使用  
3、示例代码：

// CopyRight.js 定义一个高阶组件

import React, { Component, Fragment } from 'react';
    
    const CopyRight = Comp => {
        return class extends Component {
            constructor(props) {
                super(props)
                this.state = {
                    info: "zhangsan"
                }
            }
            render() {
                return (
                    <Fragment>
                        <Comp {...this.state}></Comp>
                    </Fragment>
                )
            }
        }
    }
    
    export default CopyRight
    
    //AComp.js
    import React, { Component } from 'react';
    
    class AComp extends Component {
        render() {
            return (
                <div>
                    AComp--{this.props.info}
                </div>
            )
        }
    }
    
    export default AComp
    
    // App.js中使用方式
    import React, { Component } from 'react';
    import './App.css';
    import CopyRight from './pages/CopyRight '
    import AComp from './pages/AComp'
    
    const AHoc = CopyRight(AComp)
    
    class App extends Component {
      render() {
        return (
          <div>
            <h2>高阶组件</h2>
            <AHoc></AHoc>
          </div>
        )
      }
    }
    
    export default App;