阅读 1083

React HOC(高阶组件)

首先打个广告,系列文章:

  1. 古老的React mixins
  2. HOC(高阶组件)
  3. render props
  4. React Hooks

下面进入正题:

什么是HOC

我们写的纯函数组件只负责处理展示,很多时候会发现,由于业务需求,组件需要被“增强”,例如响应浏览器事件等。如果只有一两个组件我们大可以全部重写为class形式,但如果有许多组件需要进行相似或相同的处理(例如都响应浏览器窗口改变这个事件)时,考虑到代码的复用性,很容易想到用函数处理,HOC也正是为了解决这样的问题而出现的。

说白了,高阶组件的存在和React mixins类似,都是为了解决代码复用的问题。

基本原理

HOC高阶组件的基本原理可以写成这样:

const HOCFactory = (Component) => {
  return class HOC extends React.Component {
    render(){
      return <Component {...this.props} />
    }
  }
}
复制代码

很明显HOC最大的特点就是:接受一个组件作为参数,返回一个新的组件

举个🌰

我们还沿用上篇文章中响应鼠标事件的的🌰。

import React from 'react'
import ReactDOM from 'react-dom'

const withMouse = (Component) => {
  return class extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }

    render() {
      return (
        <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
          <Component {...this.props} mouse={this.state}/>
        </div>
      )
    }
  }
}

// APP是一个纯函数无状态组件
const App = (props) => {
  const { x, y } = props.mouse
  return (
    <div style={{ height: '100%' }}>
      <h1>The mouse position is ({x}, {y})</h1>
    </div>
  ) 
}

const AppWithMouse = withMouse(App)

ReactDOM.render(<AppWithMouse/>, document.getElementById('root'))
复制代码

优劣分析

优点:

  • 支持ES6,光这一项就战胜了mixins
  • 复用性强,HOC是纯函数且返回值仍为组件,在使用时可以多层嵌套,在不同情境下使用特定的HOC组合也方便调试。
  • 同样由于HOC是纯函数,支持传入多个参数,增强了其适用范围。

当然HOC也存在一些问题(不然我就不会写这篇文章了...)

  • 当有多个HOC一同使用时,无法直接判断子组件的props是哪个HOC负责传递的。
  • 重复命名的问题:若父子组件有同样名称的props,或使用的多个HOC中存在相同名称的props,则存在覆盖问题,而且react并不会报错。当然可以通过规范命名空间的方式避免。
  • 可以发现HOC产生了许多无用的组件,加深了组件层级。

所以即使React HOC(高阶组件)比古老的React mixins在解决代码复用问题上进步了不少,但是依然不能令人满意。进一步的方案,参考下篇文章:React render props。

文章分类
前端
文章标签