React-高阶组件

React高阶组件(Higher-Order Components, HOC)是一种复用组件逻辑的高级技巧,表现为一个函数,接收组件并返回增强版的新组件。本文介绍了创建高阶组件的步骤,包括如何处理组件名称冲突和props丢失的问题,以及提供了示例代码,帮助开发者更好地理解和应用高阶组件。" 80174046,7536280,使用Linux kickstart创建自动安装脚本,"['Linux', '自动脚本', 'kickstart']
摘要由CSDN通过智能技术生成

高阶组件是 React 中复用组件逻辑的一种技巧,高阶组件是一个函数,接收需要包装的组件,返回值为增强后的组件。

实现思路:

高阶组件内部创建一个类组件,在这个类组件中去提供复用状态的逻辑代码,通过 prop 将复用的状态组件传递给被包装组件。

创建高阶组件步骤:

  1. 创建一个函数,名称约定以 with 开头

  2. 给函数设置形参用于接收传过来的组件,参数以大写字母开头(作为参数组件使用)

  3. 在函数内部创建一个类组件,在类组件中提供复用的状态逻辑代码;并将类组件作为返回值返回

  4. 在类组件中渲染参数组件,同时将类组件的状态通过 prop 传递给参数组件

  5. 调用高阶组件,传入需要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中

示例:

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

import img from './images/tianshi.gif'

// 高阶组件
function withMouse (WrappedComponent) {
   
  // 类组件
  class Mouse extends React.Component {
   
    // 状态
    state = {
   
      x: 0,
      y: 0
    }

    handleMouseMove = e => {
   
      // 修改状态
      this.setState({
   
        x: e.clientX,
        y: e.clientY
      })
    }

    render () {
   
      console.log(this.props)
      // 将当前组件的 state 传递给传入的需要包装的组件
      return <WrappedComponent {
   ...this.state}></WrappedComponent>
    }
	// 组件挂载后注册鼠标移动事件
    componentDidMount () {
   
      window.addEventListener('mousemove', this.handleMouseMove)
    }
    // 卸载组件时解绑鼠标移动事件
    componentWillUnmount () {
   
      window.removeEventListener('mousemove', this.handleMouseMove)
    }
  }

  re
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值