HOC（Higher-Order Components）高阶组件

为了提高组件复用率，可测试性，就要保证组件功能单一性；但是若要满足复杂需求就要扩展功能单一的组件，在React里就有了HOC（Higher-Order Components）的概念。

定义：高阶组件是参数为组件（function组件或class组件），返回值为新组件的函数。

// hoc: 是一个函数，接收一个组件，返回另外一个组件；
//这里写开头的Cmp是指function或者class组件

const foo=(Cmp)=>(props)=>{ 
    return(<div className='border'>
             <Cmp {...props}/>
          </div>)  ;
}

function Child(props){
    return (<div>   
              {console.log('this is child component, its props is: ',props)}      
               this is child component！its name is {props.name}
            </div>)
}

let Foo=foo(Child);  //使用高阶组件（调用函数）
export default class HocPage extends React.Component{
    render(){
        return(
            <div>
               <Foo name='pp'/>
            </div>
           
        )
    }
}

结果如下：

 

链式调用

let Foo=foo(foo(foo(Child)));

 

配置装饰器器写法

高阶组件本身是对装饰器器模式的应用，自然可以利用ES7中出现的装饰器器语法来更更优雅的书写代码。

npm install --save mobx mobx-react
npm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save

yarn add mobx mobx-react --save
yarn add customize-cra@1.0.0 react-app-rewired@^2.1.8 @babel/plugin-proposal-decorators@^7.13.15 -D

项目根目录新建config-overrides.js文件加入以下代码:

//配置完成后记得重启下
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
  addDecoratorsLegacy()  //配置装饰器器
);

修改package.json文件如下：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

如果 vscode 对装饰器有 warning ， vscode 设置里里加上

javascript.implicitProjectConfig.experimentalDecorators": true

报错

解决办法：原因是缺少react-scripts插件，安装 yarn add react-scripts --save