react-高阶组件

这篇具有很好参考价值的文章主要介绍了react-高阶组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、什么是高阶组件

高阶组件( Higher-Order Component,HOC )是一个以组件作为参数,返回一个新组件函数

  • 高阶组件最大的特点就是复用组件逻辑
  • 高阶组件本身并不是 React 的 API,而是React组件的一种设计模式,一种组件重用的高级技巧
  • 高阶组件是一个函数,接收要包装的组件,返回增强后的组件

二、如何实现一个高阶组件

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

  • 创建一个函数,命名以 with 开头
  • 指定函数参数,参数为组件,所以参数应该以大写字母开头
  • 在函数内部创建一个组件,提供复用的状态逻辑代码,并返回
  • 在该组件中,渲染参数组件,同时将状态通过props传递给参数组件
  • 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
function withMouse(WrappedComponent) {
	class Mouse extends React.Component {
		state = {
		    x: 0,
			y: 0,
		}
		render() {
			return (
				<WrappedComponent {...this.state}></WrappedComponent>
			)
		}
	}
	return Mouse
}
const Position = props => (
	<div>
	    鼠标位置: {props.x}, {props.y}
	</div>
)

const MousePosition = withMouse(Position)

<MousePosition />

三、高阶组件demo

  • 代码
import React from 'react'

/**
 * 高阶组件
 */

// 获取组件名
// function getDisplayName(WrappedComponent) {
// 	return WrappedComponent.displayName || WrappedComponent.name || 'Component'
// }

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

		// 渲染UI,可以将state和props 一起传递给组件
		render() {
			return (
				<WrappedComponent {...this.state} {...this.props}></WrappedComponent>
			)
		}

		// 组件挂载,监听鼠标移动
		componentDidMount() {
			window.addEventListener('mousemove', this.handleMouseMove)
		}

		// 组件卸载,移除监听
		componentWillUnmount() {
			window.removeEventListener('mousemove', this.handleMouseMove)
		}

		// 鼠标移动事件处理程序
		handleMouseMove = e => {
			this.setState({
				x: e.clientX,
				y: e.clientY,
			})
		}
	}

	// 设置displayName  这个为了调试区分用,可以不设置
	// Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

	// 返回增强后的组件
	return Mouse
}

// 位置组件,用来测试高阶组件
const Position = props => (
	<div>
		<h2>
			鼠标位置: {props.x}, {props.y}
		</h2>
		MousePosition组件: 接收的参数 a == {props.a}
	</div>
)

// 猫抓老鼠组件,用来测试高阶组件
const Cat = props => (
	<div>
		<img
			src={require('../../assets/images/cat.png')}
			alt="猫"
			height="22px"
			style={{
				position: 'absolute',
				top: props.y - 10,
				left: props.x - 10,
			}}
		/>
		MouseCat组件: 接收的参数 a == {props.a}
	</div>
)

// 获取增强后的组件
const MousePosition = withMouse(Position)
const MouseCat = withMouse(Cat)

// 使用
class MouseHigher extends React.Component {
	// 渲染增强后的组件
	render() {
		return (
			<div>
				<MousePosition a="111"></MousePosition>
				<MouseCat a="222"></MouseCat>
			</div>
		)
	}
}

export default MouseHigher

  • 效果

react-高阶组件,React,react.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-728297.html

到了这里,关于react-高阶组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React的高阶组件详解

    高阶组件基本介绍 什么是高阶组件呢? 在认识高阶组价之前, 我们先来回顾一下什么是高阶函数? 相信很多同学都知道(听说过?),也用过高阶函数 高阶组件和高阶函数它们非常相似的 高阶函数的定义, 至少满足以下条件之一: 接受一个或多个函数作为参数; 返回一个新的函数

    2024年02月01日
    浏览(48)
  • React 高阶组件(HOC)

    高阶组件不是 React API 的一部分,而是一种用来复用组件逻辑而衍生出来的一种技术。 高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。基本上,这是从 React 的组成性质派生的一种模式,我们称它们为“纯”组件, 因为它们可以接受任何动态

    2024年02月12日
    浏览(38)
  • React:高阶组件|ref转发

            参考文档:高阶组件 – React (reactjs.org)         高阶组件(Higher-Order Components,简称  HOC )是React中用于复用组件逻辑的一种高级技巧。具体而言: 高阶组件是参数为组件,返回值为新组件的函数 。         组件是将 props 转换为 UI,而高阶组件是将组件转换

    2024年02月21日
    浏览(42)
  • React - 你使用过高阶组件吗

    难度级别:初级及以上                                 提问概率:55%  高阶组件并不能单纯的说它是一个函数,或是一个组件,在React中,函数也可以做为一种组件。而高阶组件就是将一个组件做为入参,被传入一个函数或者组件中,经过一定的加工处理,最

    2024年04月16日
    浏览(43)
  • React组件间数据传递(弹框和高阶组件(HOC)特性实现)

    在现代前端开发中,React 已经成为了最受欢迎的 JavaScript 库之一。而在复杂的应用中,不同组件之间的数据传递问题显得尤为关键。在本文中,我们将探讨一种高效的方法,即如何利用弹框和高阶组件特性来实现 React 组件间的数据传递。我们将通过一个具体的业务场景来深入

    2024年02月11日
    浏览(40)
  • React Native Ref转发/Memo缓存/HOC高阶组件/Context上下文

    1、使用自定义组件时,实现外层组件对原始组件(TextInput)的操作 外层组件使用 ref 属性 子组件使用 forwardRef 包裹 2、函数式组件对外暴露实例方法(cusomFocus) 子组件 父组件如图一所示 1 、 避免多余渲染 问题:每次点击按钮都会导致 InfoView 组件发生重绘,即使每次 setI

    2024年01月21日
    浏览(50)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(56)
  • 前端react入门day03-react获取dom与组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 受控表单绑定  React中获取DOM 组件通信 父传子  父传子-基础实现 父传子-props说明 父传子 - 特殊的prop children 子传父  使用状态提升实现兄弟组件通信 使用Context机制跨

    2024年02月01日
    浏览(52)
  • 前端react入门day02-React中的事件绑定与组件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React中的事件绑定 React 基础事件绑定 使用事件对象参数  传递自定义参数  同时传递事件对象和自定义参数  React中的组件  组件是什么 React组件 useState  修改状态的规

    2024年02月06日
    浏览(85)
  • 从javascript到vue再到react:前端开发框架的演变

    目录 JavaScript: 动态语言的基础 JavaScript:Web开发的起点 Vue.js: 渐进式框架的兴起 Vue.js:简洁、高效的前端框架 React.js: 声明式UI的革新 React.js:强大、灵活的前端框架 演变之路与未来展望 演变过程 当提到前端开发中的框架时,JavaScript、Vue.js和React.js是三个最常见的名词。它

    2024年02月07日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包