react 高阶组件
react 高阶组件
概述
- 目的:
实现状态逻辑复用
- 采用
包装(装饰)模式
,比如说:手机壳 - 手机:获取保护功能
- 手机壳:提供保护功能
- 高阶组件就相当于手机壳,通过包装组件,增强组件功能
思路分析
高阶组件
(HOC , Higher-Order Component )是一个函数
,接收要包装的组件,返回增强后的组件- 高阶组件内部
创建一个类组件
,在这个类组件中提供复用的状态逻辑
代码,通过prop将复用的状态传递给被包装组件 WrappedComponent
使用步骤
- 创建一个函数,名称约定
以with开头
- 指定函数参数,参数应该以大写字母开头(作为要渲染的组件)
- 在函数内部创建一个类组件,
提供复用的状态逻辑代码
,并返回 - 在该组件中,渲染参数组件,同时将状态通过 prop 传递给参数组件
- 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
代码示例:
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() {return (<WrappedComponent {...this.state}></WrappedComponent>)}}return Mouse
}// 用来测试高阶组件
const Position = props => (<p>鼠标当前位置:(x: {props.x}, y: {props.y})</p>
)const MousePosition = withMouse(Position)class App extends React.Component {render() {return (<div><h1>高阶组件</h1><MousePosition></MousePosition></div>)}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))
设置displayName
- 使用高阶组件存在的问题∶得到的两个组件名称相同
- 原因∶默认情况下,React使用
组件名称
作为displayName - 解决方式:为高阶组件设置
displayName
便于调试时区分不同的组件 - displayName的作用∶用于设置调试信息(React Developer Tools信息)
- 设置方式:
// 创建高阶组件
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() {return (<WrappedComponent {...this.state}></WrappedComponent>)}}// 设置displayNameMouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`return Mouse
}function getDisplayName(WrappedComponent) {return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}// 用来测试高阶组件
const Position = props => (<p>鼠标当前位置:(x: {props.x}, y: {props.y})</p>
)const MousePosition = withMouse(Position)class App extends React.Component {render() {return (<div><h1>高阶组件</h1><MousePosition></MousePosition></div>)}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))
传递props
- 问题:props丢失
- 原因︰高阶组件没有往下传递props
- 解决方式∶渲染 WrappedComponent时,将
state
和this.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() {return (<WrappedComponent {...this.state} {...this.props}></WrappedComponent>)}}// 设置displayNameMouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`return Mouse
}function getDisplayName(WrappedComponent) {return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}// 用来测试高阶组件
const Position = props => {console.log('Position中的props', props);return (<p>鼠标当前位置:(x: {props.x}, y: {props.y})</p>)
}const MousePosition = withMouse(Position)class App extends React.Component {render() {return (<div><h1>高阶组件</h1><MousePosition MousePosition a="1" /></div>)}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))
react 高阶组件相关推荐
- react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- [react] 高阶组件(HOC)有哪些优点和缺点?
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点 通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度 缺点 组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
- 「react进阶」一文吃透React高阶组件(HOC)
一 前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
- React高阶组件探究
React高阶组件探究 在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
- react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与 容器组件(Container component) 2.类组件(Class component ...
- React高阶组件_阶段1
react高阶组件_阶段1 作用: 个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式 非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义 ...
- react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件 高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
- 使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
- react高阶组件和hooks
1. react高阶组件 1.1 高阶组件的概念 高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组 ...
最新文章
- flask-admin 快速打造博客 系列一
- 关于Uri.Segments 属性的理解
- 鱼c论坛python课后题-【零基础】Python3学习课后练习题(十九)
- Elasticsearch搜索类型(query type)详解
- SQL 中GROUP BY 、ROLLUP、CUBE 关系和区别
- offsetX、clientX、screenX、pageX、layerX
- 使用redis保存验证码
- 电力软件系统测试报告,电力巡检系统测试报告-软件工程
- adc0808模数转换实验报告_AD转换程序(ADC0808 TLC2543)
- python量化需要什么基础_真格量化入门课程——②真格量化Python策略编写思路
- 软件可靠性测试概念与应用
- 认识很浅的云南最后的秘境
- 操作系统------资源分配图化简
- 18-关系型数据和文档型数据库有什么区别?
- html简洁风格的个人博客网站模板(源码)
- svg 动画 ------- svg的内容如何围绕自身旋转
- [Yocto RM]11 - Features
- 一个快捷的计算e的值(第4章-5 求e的近似值 (15分))
- Java单体应用 - 架构模式 - 03.设计模式-10.装饰器模式
- 大数据告诉你NBA的字母哥如何年入2415万美金
热门文章
- 1、Android单元测试
- 【AirSim】脚本控制无人机
- F5设备备份映射基本操作
- Vue进阶(五十三):vue-cli 脚手架 webpack.prod.conf.js 配置文件详解
- 【KMRE全新升级】玩法更多、应用更全、体验更好
- CMake入门3之 静态链接库和动态链接库
- 自然语言处理算法工程师笔试题目_NLP算法工程师(实习生)面试总结(持续更新)...
- 英语语音语调练习-American Accent Training(PDF+CD1-5下载)
- 7-228 加法口诀表7-230 美好日子
- Java SE 基础入门知识