高阶组件HOC

高阶组件:

目的:实现状态逻辑复用

高阶组件(HOC、Higher-Order Component) 是一个函数,接收要包装的组件,返回增强后的组件
高阶组件内部创建了一个类组件,在这个类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件WrappedComponent

使用步骤:

  • 创建一个函数,名称约定以with开头
  • 指定函数参数,参数应该以大写字符开头
  • 在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回
  • 在该组件中,渲染参数组件,同时将状态通过props传递给参数组件
  • 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面
import React from 'react'
import ReactDOM from 'react-dom'

/* 
  高阶组件
*/

// 创建高阶组件
function withMouse(WrappedComponent) {
  // 该组件提供复用的状态逻辑
  class Mouse extends React.Component {
    // 鼠标状态
    state = {
      x: 0,
      y: 0
    }

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

    // 控制鼠标状态的逻辑
    componentDidMount() {
      window.addEventListener('mousemove', this.handleMouseMove)
    }

    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handleMouseMove)
    }

    render() {
      console.log('Mouse:', this.props)
      return <WrappedComponent {...this.state} {...this.props} />
    }
  }


  // 设置displayName 便于调试区分不同的组件
  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

  return Mouse
}

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

// 用来测试高阶组件
const Position = props => {
  console.log('Position:', props)
  return (
    <p>
      鼠标当前位置:(x: {props.x}, y: {props.y})
    </p>
  )
}

// 获取增强后的组件: 调用withMouse函数
const MousePosition = withMouse(Position)

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>高阶组件</h1>
        <MousePosition a="1" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 React 中,高阶组件(Higher-Order Component,HOC)是一种函数,接收一个组件作为参数,并返回一个新的组件。HOC 可以用于复用组件逻辑、增强组件功能或包装组件。 以下是一个简单的例子来说明如何创建一个 HOC: ```javascript import React from 'react'; // HOC 接收一个组件作为参数,并返回一个新的增强组件 const withLogger = (WrappedComponent) => { return class extends React.Component { componentDidMount() { console.log('Component is mounted'); } render() { // 返回被包装的组件,并传递所有的 props return <WrappedComponent {...this.props} />; } }; }; // 被包装的组件 const MyComponent = (props) => { return <div>{props.message}</div>; }; // 使用 HOC 包装组件 const EnhancedComponent = withLogger(MyComponent); // 在应用中使用增强后的组件 const App = () => { return <EnhancedComponent message="Hello, World!" />; }; ``` 在上面的例子中,`withLogger` 是一个 HOC,它接收一个组件作为参数,并返回一个新的增强组件。在返回的增强组件中,我们可以添加一些额外的逻辑或功能。在这个例子中,我们在增强组件的 `componentDidMount` 生命周期方法中打印一条日志。 然后,我们创建了一个被包装的组件 `MyComponent`,它接收一个 `message` 属性并进行渲染。 最后,我们使用 `withLogger` HOC 包装了 `MyComponent` 组件,将增强后的组件 `EnhancedComponent` 作为应用的一个子组件进行渲染。 这只是 HOC 的一个简单示例,你可以根据需要创建更复杂的 HOC 来增强组件的功能。HOC 可以帮助我们实现代码的复用和逻辑的封装。但是在使用 HOC 时,也要注意遵循一些最佳实践,例如避免命名冲突、正确传递 props 等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值