[JavaScript知识库]React复习（10）：高阶组件应用（抽离状态+包装组件）

前言

高阶组件的最后两个应用场景：抽离状态+包装组件

一、抽离状态

基本上就是类似于connect的使用，在导出时使用connect，其实也是返回了一个组件，从store中获取需要的数据，处理然后导出。

二、包装组件

高阶组件本身就是在原生组件上再嵌套一层组件，就像函数一样，这里可以通过对原生组件的包装，统一实现一项目的而节约了代码量和时间。
如下实例，想要从App组件引入A、B两个组件然后传入参数样式，达到主题颜色改变的效果。

class A extends Component{
  render(){
    return (
      <div>A
      </div>
    )
  }
}

class B extends Component{
  render(){
    return (
      <div>B</div>
    )
  }
}

function Theme(WrapComponent) {
  return class NewComponent extends Component{
    render(){
      return(
        <div>
          <WrapComponent></WrapComponent>
        </div>
      )
    }
  }
}

A=Theme(A)
B=Theme(B)

class App extends Component{
  render(){
    return (
      <div>
         <A style={{color:"red"}}></A>
         <B style={{color:"green"}}></B>
      </div>
    )
  }
}

export default App;

以上是基本框架。正常我们的思路就是通过props传递，然后分别给两个子组件添加样式。但使用高阶组件进行封装后我们只需添加一句话，就可以直接改变两个子组件的颜色，即只给Theme高阶组件一个添加样式，便可以直接同步到下方组件，即使样式不一样，也会对应添加上去：

结果显示：