五、Hoc高阶组件

最新推荐文章于 2024-07-21 18:16:11 发布

A_bad_boy_hahaha

最新推荐文章于 2024-07-21 18:16:11 发布

阅读量654

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/a_bad_boy_hahaha/article/details/122316970

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在React中使用高阶组件（HOC）来实现鼠标位置的追踪功能。通过创建一个名为`hocComponent`的高阶组件，监听`mousemove`事件并更新状态，将鼠标坐标传递给被包裹的组件。文章提供了详细的代码示例，展示了如何在任何需要此功能的组件中使用这个高阶组件。同时，还提到了通过设置`displayName`来区分经过高阶组件包装后的组件名称。

摘要由CSDN通过智能技术生成

Hoc应用场景：在React中想要对组件进行逻辑的复用，或者功能的扩充的时候，可以使用到高阶组件
给一个组件扩充获取鼠标位置的小功能demo示例:

实现一个获取鼠标位置的高阶组件

//   ./Hoc/Index.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default (WrappedComponent) => {
  
  class hocComponent extends Component {
    // 鼠标的位置
    state = {
      x:0,
      y:0
    }
    
    // 监听鼠标位置
    componentDidMount(){
      window.addEventListener('mousemove', this.handleMouseMove)
    }
    // 鼠标移动事件
    handleMouseMove = ( e ) => {
      this.setState({
        x:e.clientX,
        y:e.clientY
      })
    }
    // 组件卸载的时候取消监听事件
    componentWillUnmount(){
      window.removeEventListener('mousemove', this.handleMouseMove)
    }

    render() {
      return (
        <>
          <h1>高阶组件--开始</h1>
          <WrappedComponent {...this.state} />
          <h1>高阶组件--结束</h1>
        </>) 
    }
  }
  // 小细节：这个时候当你在react devtools中会发现经过高阶组件包装之后的组件名称都叫hocComponent,
  //		当组件数量多的时候会分不清楚，可以通过设置displayName来改变
	hocComponent.displayName = `hocComponent${getDisplayName(WrappedComponent)}`
  return hocComponent
}

function getDisplayName(Component){
	return Component.displayName || Component.name || 'Component'
}

使用高阶组件，在任何一个组件中只要你需要用到获取鼠标位置的功能你都可以使用这个高阶组件进行扩展

import React, { Component } from 'react'
import Hoc from './Hoc/Index.js'

// 基础函数式组件
const Posi = props => {
  return <h1>鼠标的位置{ JSON.stringify(props) }：{props.x}--{props.y}</h1>
}
// 基础类组件
// class Posi extends Component{
//   render(){
//     return (<h1>鼠标的位置{ JSON.stringify(this.props) }：{this.props.x}--{this.props.y}</h1>)
//   }
// }
// 经过高阶组件包装之后得到的增强组件
const WrapCom = Hoc(Posi)

export default class Index extends Component {

  render() {
    return (
      <div>
        {/* 引用经过高阶组件包装之后的组件 */}
        <WrapCom></WrapCom>

      </div>
    )
  }
}