react中什么是hoc-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

HOC是react中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个React API，它是一个方法，一个接收一个组件作为参数，返回一个增强的组件的方法。

What ？什么是HOC

HOC（High Order Component）是 react 中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个 React API 。它只是一种设计模式，类似于装饰器模式。

具体而言，HOC就是一个函数，且该函数接受一个组件作为参数，并返回一个新组件。

从结果论来说，HOC相当于 Vue 中的 mixins(混合) 。其实 React 之前的策略也是采用 mixins ，但是后来 facebook 意识到 mixins 产生的问题要比带来的价值大，所以移除了 mixins。想要了解更多

Why ? 为什么使用HOC

来看个例子

import React, { Component } from 'react'class Page1 extends Component{
  componentWillMount(){
    let data = localStorage.getItem('data')    this.setState({ data })
  }
 
  render() {    return (
      <h2>{this.state.data}</h2>
    )
  }
} 
 
export default Page1

这个例子中在组件挂载前需要在 localStorage 中取出 data 的值，但当其他组件也需要从 localStorage 中取出同样的数据进行展示的话，每个组件都需要重新写一遍 componentWillMount 的代码，那就会显得非常冗余。那么在 Vue 中通常我们采用:

1	`mixins: []`

但是在 React 中我们需要采用HOC模式咯

import React, { Component } from 'react'
 
const withStorage = WrappedComponent => {
  return class extends Component{
    componentWillMount() {
      let data = localStorage.getItem('data')
      this.setState({ data })
    }
 
    render() {
      return <WrappedComponent data={this.state.data} {...this.props} /> 
    }
  }
}
 
export default withStorage