6、react高阶组件HOC

高级组件概念：

为了提⾼组件复⽤率，可测试性，就要保证组件功能单⼀性；

但是 若要满⾜复杂需求就要扩展功能单⼀的组件，在React⾥就有了 HOC（Higher-Order Components）的概念，

定义：⾼阶组件是⼀个⼯⼚函数，它接收⼀个组件并返回另⼀个组 件。

import React from 'react';
import './App.css';
import Home from './pages/Home';


function Child(props){
  return <div>Child</div>
}

const foo=Cmp=> props=>{
  return(
  <div style={{border:'solid 1px red'}}>
    <Cmp {...props} />
  </div>)
}

function App() { 
  const Foo = foo(Child)
  return (
    <div className="App">
    <Child></Child>
      <Foo />
      {/* <Home /> */}
    </div>
  );
}

export default App;

高阶组件可以实现链式调用，不过不推荐实际使用，基于上面代码

const foo2=Cmp=> props=>{
  return(
  <div style={{border:'solid 1px orange', padding:'10px'}}>
    <Cmp {...props} />
  </div>)
}

function App() { 
  const Foo = foo2(foo(Child))
  return (
    <div className="App">
    <Child></Child>
      <Foo />
      {/* <Home /> */}
    </div>
  );
}

 Hoc使用装饰器，装饰器配置可以参考https://www.cnblogs.com/nothingness/p/13620129.html

import React,{Component} from 'react'

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

@foo //装饰器方法要写在使用的对象上面
class Child extends Component{
    render(){
        return <div>Child</div>
    }
}


class HocHooks extends Component{
    render(){
        // const Foo = Child;
        return(
            <div>
                <h1>hello HocHook</h1>
                <Child />
            </div>
        )
    }
}
export default HocHooks;