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

一、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: "Orange_SQ"
            }
        }
        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;