React HOC高阶组件

最新推荐文章于 2025-05-23 19:27:46 发布

原创最新推荐文章于 2025-05-23 19:27:46 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #vue #js

react 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨React中的HOC（高阶组件）概念，通过实例讲解如何利用HOC实现组件复用，增强组件功能。文章详细展示了如何创建一个能够获取鼠标坐标的HOC，并将其应用于一个简单的待加工组件上，最终实现组件的功能增强。

HOC高阶组件

功能：组件复用

相似参考点：类似于JavaScript中的高阶函数。二者都是将函数作为参数，在内部进行加工返回后再使用，具有接收和返回其他函数（类）的附加能力，可以把它们想象成游戏当中的”附魔“。

案例：新建一个子组件A，该子组件移动鼠标能获取相应的坐标值。

关键点：在于render。

在rcc类外嵌套一个函数作为构造函数，参可以把这个函数想象为一个二次加工的工厂，参数为需要加工的组件。这里的参数名为;Wcomponent。render返回的就是一个组件，将工厂组件A的state结构赋值给加工组件。加工完成后的组件就能复用工厂组件内的处理好的值了。

A组件

import React, { Component } from 'react'
//Wcomponent  为需加工(附魔)的简单组件，作为参数进行传递。
export default function withCom(Wcomponent){
 class Mouse extends Component {
    constructor(){
        super()
        this.state={
            x:0,
            y:0
        }
    }
     //解构赋值给简单组件，在简单中用props进行调用
    render() {
        return <Wcomponent {...this.state}></Wcomponent>
    }
    componentDidMount(){
        window.addEventListener("mousemove",this.mouseMoveHandler)
    }
    mouseMoveHandler=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
}
return Mouse
}

父组件及待加工组件

import React, { Component } from 'react'
import './App.css';
import Mouse from "../src/component/mousemove/index"
//待加工组件
function Position(props) {
  return (
    <div>
      <p>{props.x} </p>
    </div>
  )
}
// 完成组件的加工
const MousePosition = Mouse(Position)
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 组件加工完成后进行一个挂载 */}
       <MousePosition></MousePosition>
      </div>
    )
  }

}