React高阶组件及CRA的定制

高阶组件

高阶函数

高阶函数：一个函数内部返回一个新的函数，内部采用闭包的写法。

var add = x => {
  return y => {
     return x+y
 }
}

例如数组的的map(),reduce(),filter(),sort()方法，都是高阶函数

高阶组件

高阶组件：（HOC） Higher-Order-Component
高阶组件本质上就是一个函数，内部可以接收一个组件，然后返回新的组件。
例如： React.memo() react-redux中的connect()

封装一个具有版权信息的高阶组件withCopy,内部接收一个组件，最终返回一个新的组件。
withCopy高阶组件

 import React, { Component } from 'react'
    //高阶组件，本质上是一个函数  withCopy(Comp) 返回一个新的组件
    //高阶组件内部可以对传入进来的组件传递一些新的属性给他，那样的话Comp组件就可以通过this.props获取到外部传入来的属性了
    //connect()(UI组件)  ===> 大家就理解了UI组件的props上面就可以获取到redux状态与更改redux状态的方法了
    
    const withCopy = Comp =>{
        return class WithCopyRight extends Component{
            render(){
                return (
                    <div>
                        <Comp {...this.props}/>
                        &copy;千锋教育
                    </div>
                )
            }
        }
    }
    
    export default withCopy

About组件：

  import React, { Component } from 'react'
    //引入高阶组件withCopy
    import withCopy from "./withCopy"
    class About extends Component {
        render() {
            return (
                <div>
                    About {this.props.info}
                </div>
            )
        }
    }
    export default withCopy(About)

App组件：

import React, { Component } from 'react'
import About from "./About"
export default class App extends Component {
  render() {
    return (
      <div>
        <About info={"这是app给他传过去的"}/>
      </div>
    )
  }
}

对于CRA的定制

因为我们发现，调用高阶组件的时候采用withCopy(About)代码，但是不够简洁优雅。

那么我们可以采用装饰器的写法实现调用高阶组件

    @withCopy
    class About extends Component {
        render() {
            return (
                <div>
                    About {this.props.info}
                </div>
            )
        }
    }
    export default About

很不幸，目前的cra是不支持这种写法，我们需要单独进行定制，让其支持这种写法。
1.yarn add react-app-rewired
可以在npm网站中搜索react-app-rewired进行使用
在进行文档的阅读后可以继续以下步骤

2. 对脚手架进行轻微的调整
   将package.json文件中的react-scripts更改为react-app-rewired
   “scripts”: {
   - “start”: “react-scripts start”,
   + “start”: “react-app-rewired start”,
   - “build”: “react-scripts build”,
   + “build”: “react-app-rewired build”,
   - “test”: “react-scripts test --env=jsdom”,
   + “test”: “react-app-rewired test --env=jsdom”,
   “eject”: “react-scripts eject”
   }

3. yarn start启动项目发现报错了，原因是因为根路径下面缺少 config-overrides.js文件
   在项目根目录下创建文件并进行配置
   .

    module.exports = function override(config, env) {
        return config;
    }

但是启动的时候，发现还是报错，原因是缺少对于decorators-legacy的支持。

5. 如果想配置的更加方便的话，需要安装 customize-cra ,
   在项目根目录下创建config-overrides文件
   yarn add customize-cra (前提需要react-app-rewired安装)
   在npm官网中进行搜索并查阅使用

    const {
        addDecoratorsLegacy,
        override
    } = require("customize-cra");
    
    module.exports = override(
        addDecoratorsLegacy()   //就代表让当前的cra支持decorators了！
    )

react面向社区化的。它把一些常用到的包都放在社区，用到的话单独去查找去进行相应的配置。
vue的话面向官方化，很多东西内部都帮助我们去实现了。可以直接在根目录下创建 vue.config.js文件来规定 标准