React-高阶组件

最新推荐文章于 2024-04-23 13:42:04 发布

蓬莱老仙

最新推荐文章于 2024-04-23 13:42:04 发布

阅读量217

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_44486539/article/details/104370892

版权

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

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

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

实现思路：

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

创建高阶组件步骤：

创建一个函数，名称约定以 with 开头
给函数设置形参用于接收传过来的组件，参数以大写字母开头（作为参数组件使用）
在函数内部创建一个类组件，在类组件中提供复用的状态逻辑代码；并将类组件作为返回值返回
在类组件中渲染参数组件，同时将类组件的状态通过 prop 传递给参数组件
调用高阶组件，传入需要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

示例：

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