hoc是react中对组件逻辑复用部分进行抽离的高级技术，但hoc并不是一个react api，它是一个方法，一个接收一个组件作为参数，返回一个增强的组件的方法。
相关教程推荐：React视频教程
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 中通常我们采用:
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当我们构建好一个HOC之后，我们使用的时候就简单多了，还看最开始的例子，我们就不需要写 componentWillMount 了。
import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'
class Page1 extends Component{
render() {
return <h2>{this.props.data}</h2>
}
}
export default withStorage(Page1)很明显，这是一个装饰器模式，那么就可以使用ES7形式
自从百度屏蔽淘宝客网站、淘宝抛弃淘宝客之后，个人站长集体陷入了恐慌之中。此时，什么值得买网的异军突起引起了广大个人站长的极大关注。做一个什么值得买一样的导购网站成了众多个人站长的一致心愿！ TP-COUPON 导购系统 即是让个人站长实现此心愿的绝佳选择！ 欢迎个人站长选用。V1.1版 更新记录：1.修正请求时查询淘宝店铺错误的bug2.删除一些无用的代码
import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'
@withStorage
class Page1 extends Component{
render() {
return <h2>{this.props.data}</h2>
}
}
export default Page1How ? 怎么使用HOC
使用场景
操纵 props
通过 ref 访问组件实例
组件状态提升
用其他元素包装组件
Tips 注意事项
1，命名
把被包装的组件名称也包到HOC的显示名称中。
2，时机
不要在组件的 render 方法中使用HOC，尽量也不要在组件的其他生命周期中使用HOC。因为调用HOC的时候每次都会返回一个新的组件，于是每次render，前一次高阶组件创建的组件都会被卸载(unmount)，然后重新挂载(mount)本次创建的新组件，既影响效率又丢失了组件及其子组件的状态。
3，静态方法
如果需要使用被包装组件的静态方法，那么就需要手动复制这些静态方法，因为HOC返回的新组建不包含被包装组件的静态方法。
4，ref
不会被传递给被包装组件
HOC和Mixin的比较
高阶组件属于函数式编程(functional programming)思想，对于被包裹的组件时不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。而Mixin这种混入的模式，会给组件不断增加新的方法和属性，组件本身不仅可以感知，甚至需要做相关的处理(例如命名冲突、状态维护)，一旦混入的模块变多时，整个组件就变的难以维护，也就是为什么如此多的React库都采用高阶组件的方式进行开发。
更多编程相关知识，请访问：编程入门！！
