React 高阶组件（高级）

关于组件公共逻辑的抽离

• mixin，已被 React 弃用
• 高级组件 Higher Order Component（简称 HOC）
• Render Props

高阶组件基本用法

// 高阶组件不是一种功能，而是一种模式
const HOCFactory = (Component) => {
  class HOC extends React.Component {
    // 在此定义多个组件和公共逻辑
    render() {
      return <Component {...this.props} /> // 返回拼装的结果
    }
  }

  return HOC
}

const EnhancedComponent1 = HOCFactory(WrappedComponent1)
const EnhancedComponent2 = HOCFactory(WrappedComponent2)

高阶组件实例

定义一个 HOCDemo.js

import React from "react";

// 高阶组件
const withMouse = (Component) => {
  class withMouseComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        x: 0,
        y: 0
      }
    }

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

    render() {
      return (
        <div style={{height: '500px'}} onMouseMove={this.handleMouseMove}>
          {/*1、透传所有 props 2、增加 mouse 属性*/}
          <Component {...this.props} mouse={this.state}/>
        </div>
      )
    }
  }

  return withMouseComponent
}

const App = (props) => {
  const a = props.a
  const {x, y} = props.mouse // 接收 mouse 属性
  return (
    <div style={{height: '500px'}}>
      <h1>The Mouse position is ({x},{y})</h1>
      <p>a:{a}</p>
    </div>
  )
}

export default withMouse(App)

测试下

<HOCDemo a="123"/>

redux connect 是高阶组件

比如

import {connect} from 'react-redux'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList