步入React正殿 - React组件设计模式

目录

扩展学习资料

高阶组件

@/src/components/hoc/withTooltip.js

@/src/components/hoc/itemA.jsx

@/src/components/hoc/itemB.jsx

@/src/App.js

函数作为子组件【Render pprops】

函数作为子组件

@/src/components/rp/itemC.jsx【父组件】

@/src/components/rp/withTooltip.js【子组件】

练习


扩展学习资料

资料名称

链接

扩展阅读

React组件Render Props VS HOC 设计模式 - 简书

扩展阅读

React Hooks 之于 HoC 与 Render Props - 知乎

高阶组件

复用业务逻辑:判断用户是否是vip:是->有列表,有推荐

一个组件—高阶函数—>新的逻辑的组件

高阶组件是对已有组件的封装形成新的组件之后有自己的状态和逻辑并可以传递已有的组件

const NewComponent = higherOrderComponent(OldComponent)

hoc【higherOrderComponent】

@/src/components/hoc/withTooltip.js

import React from 'react';
// 带工具提示【函数组件】
const withTooltip = (Component) => {class HOC extends React.Component {state = {showToolTip: false,content: '',};handleOver = (event) => {this.setState({showToolTip: true,content: event.target.innerText,});};handleOut = () => {this.setState({showToolTip: false,content: '',});};render() {return (<div onMouseOver={this.handleOver} onMouseOut={this.handleOut}><Component action={this.state} {...this.props} /></div>);}}return HOC;
};
export default withTooltip;

@/src/components/hoc/itemA.jsx

import React from 'react';
import withTooltip from './withTooltip';
// 一个简单的带工具提示-业务组件A
const ItemA = (props) => {return (<div className='container'><button className='btn btn-primary' type='btn'>Tooltip A</button>{props.action.showToolTip && (<span className='badge badge-pill badge-primary ml-2'>{props.action.content}</span>)}</div>);
};
export default withTooltip(ItemA);

@/src/components/hoc/itemB.jsx

import React from 'react';
import withTooltip from './withTooltip';
// 一个简单的带工具提示-业务组件B
const ItemB = (props) => {return (<div className='container'><button className='btn btn-danger' type='btn'>Tooltip B <i>斜体</i>、<b>粗体</b></button>{props.action.showToolTip && (<span className='badge badge-pill badge-danger ml-2'>{props.action.content}</span>)}</div>);
};
export default withTooltip(ItemB);

@/src/App.js

import React, { PureComponent } from 'react';
import ItemA from './components/hoc/itemA';
import ItemB from './components/hoc/itemB';
class App extends PureComponent {render() {console.log('App - rendering');return (<><ItemA id="1" /><ItemB id="2" /></>);}
}
export default App;

ItemA,ItemB都需要相同的withTooltip【props.action】显示逻辑,只需要将withTooltip封装就能得到一个将已有组件封装为高阶组件高阶(封装)函数

  • 一个函数,传入一个组件,返回一个新组件
  • 一般不会有UI展现
  • 提供一些可复用的功能

函数作为子组件【Render pprops】

解决复用逻辑的问题

函数作为子组件

 1.定义子组件

// 子组件
render () {return (<div>{this.props.render(this.state)}</div>                )
}

2.使用函数作为Props

// 父组件
<RenderPropComponent render={(state)=>(<div>content</div>
)}>

@/src/components/rp/itemC.jsx【父组件】

import React from 'react';
import WithTooltip from './withTooltip';
// 一个简单的带工具提示-业务组件A
const ItemC = (props) => {return (<div className='container'><WithTooltiprender={({ showToolTip, content }) => (<div><button className='btn btn-primary' type='btn'>Tooltip C</button>{showToolTip && (<span className='badge badge-pill badge-primary ml-2'>{content}</span>)}</div>)}>{({ showToolTip, content }) => (<div><button className='btn btn-primary' type='btn'>Tooltip D</button>{showToolTip && (<span className='badge badge-pill badge-primary ml-2'>{content}</span>)}</div>)}</WithTooltip></div>);
};
export default ItemC;

@/src/components/rp/withTooltip.js【子组件】

import React from 'react';
class WithTooltip extends React.Component {// // eslint-disable-next-line no-useless-constructor// constructor(props) {//  super(props);// }state = {showToolTip: false,content: '',};handleOver = (event) => {this.setState({showToolTip: true,content: event.target.innerText,});};handleOut = () => {this.setState({showToolTip: false,content: '',});};render() {return (<div onMouseOver={this.handleOver} onMouseOut={this.handleOut}>{this.props.render && this.props.render(this.state)}{this.props.children && this.props.children(this.state)}</div>);}
}
export default WithTooltip;

练习

【题目1】分别使用Render Props和HOC模式实现购物车ToolTips功能;

【题目2】说明Render Props 和 HOC设计模式的优缺点分别是什么;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/40764.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#调用C++ DLL传参byte[]数组字节值大于127时会变为0x3f的问题解决

最近做了一个网络编程的DLL给C#调用&#xff0c;DLL中封装了一个TCP Client的函数接口&#xff0c;如下所示 //C TCP报文发送接口 int TcpClient_send(unsigned char* buffSend, unsigned int nLen) {unsigned char buff[1024];int len StringToHex(buffSend, buff);int nRet…

stable diffusion安装包和超火使用文档,数字人制作网址

一&#xff1a;文生图、图生图 1&#xff1a;stable diffusion&#xff1a;对喜欢二次元、美女小姐姐、大眼萌妹的人及其友好哈哈(o^^o) 1&#xff09;&#xff1a;秋叶大神安装包和模型包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/11_kguofh76gwhTBPUipepw 提…

机器学习 | Python实现GBDT梯度提升树模型设计

机器学习 | Python实现GBDT梯度提升树模型设计 目录 机器学习 | Python实现GBDT梯度提升树模型设计基本介绍模型描述模型使用参考资料基本介绍 机器学习 | Python实现GBDT梯度提升树模型设计。梯度提升树(Grandient Boosting)是提升树(Boosting Tree)的一种改进算法,GBDT也…

Java System.arraycopy() 对比 C++ memcpy()

System.arraycopy() java.lang.System类为标准输入和输出、加载文件和库或访问外部定义的属性提供了有用的方法。 java.lang.System.arraycopy&#xff08;&#xff09;方法将源数组从特定的起始位置复制到上述位置的目标数组。要复制的参数的数量由一个参数决定。 source_Pos…

前端文件下载通用方法

zip文件和xlsx文件 import axios from axios import { getToken } from /utils/authconst mimeMap {xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,zip: application/zip }const baseUrl process.env.VUE_APP_BASE_API // zip下载 export functi…

214、仿真-基于51单片机温度甲醛一氧化碳(co)电机净化报警Proteus仿真设计(程序+Proteus仿真+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、程序源码 资料包括&#xff1a; 需要完整的资料可以点击下面的名片加下我&#xff0c;找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选择 方案一&a…

It‘s likely that neither a Result Type nor a Result Map was specified.

问题&#xff1a; org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.executor.ExecutorException: A query was run and no Result Maps were 原因&#xff1a; 由于传递参数给 mapper 映射文件&#xff0c;所以必须要指定参数数据格式 如…

Qt+Pyhton实现麒麟V10系统下word文档读写功能

目录 前言1.C调用python1.1 安装Python开发环境1.2 修改Qt工程配置1.3 初始化Python环境1.4 C 调用Python 函数1.5 常用的Python接口 2.python虚拟环境2.1Python虚拟环境简介2.2 virtualenv 安装及使用2.3 在C程序中配置virtualenv 虚拟环境 3.python-docx库的应用4.总结 前言 …

神经网络基础-神经网络补充概念-23-神经网络的梯度下降法

概念 神经网络的梯度下降法是训练神经网络的核心优化算法之一。它通过调整神经网络的权重和偏差&#xff0c;以最小化损失函数&#xff0c;从而使神经网络能够逐渐逼近目标函数的最优值。 步骤 1损失函数&#xff08;Loss Function&#xff09;&#xff1a; 首先&#xff0c…

Springboot多路数据源

1、多路数据源配置 &#xff08;1&#xff09;SpringBootMyBatis-PlusOracle实现多数据源配置 https://blog.csdn.net/weixin_44812604/article/details/127386828 &#xff08;2&#xff09;SpringBootMybatis搭建Oracle多数据源配置简述 https://blog.csdn.net/HJW_233/arti…

网络安全 Day29-运维安全项目-iptables防火墙

iptables防火墙 1. 防火墙概述2. 防火墙2.1 防火墙种类及使用说明2.2 必须熟悉的名词2.3 iptables 执行过程※※※※※2.4 表与链※※※※※2.4.1 简介2.4.2 每个表说明2.4.2.1 filter表 :star::star::star::star::star:2.4.2.2 nat表 2.5 环境准备及命令2.6 案例01&#xff1a…

神经网络基础-神经网络补充概念-31-参数与超参数

概念 参数&#xff08;Parameters&#xff09;&#xff1a; 参数是模型内部学习的变量&#xff0c;它们通过训练过程自动调整以最小化损失函数。在神经网络中&#xff0c;参数通常是连接权重&#xff08;weights&#xff09;和偏置&#xff08;biases&#xff09;&#xff0c;…

ChatGLM2-6B安装部署(详尽版)

1、环境部署 安装Anaconda3 安装GIT 安装GUDA 11.8 安装NVIDIA 图形化驱动 522.25版本&#xff0c;如果电脑本身是更高版本则不用更新 1.1、检查CUDA 运行cmd或者Anaconda&#xff0c;运行以下命令 nvidia-smi CUDA Version是版本信息&#xff0c;Dricer Version是图形化…

LeetCode 160.相交链表

文章目录 &#x1f4a1;题目分析&#x1f4a1;解题思路&#x1f6a9;步骤一&#xff1a;找尾节点&#x1f6a9;步骤二&#xff1a;判断尾节点是否相等&#x1f6a9;步骤三&#xff1a;找交点&#x1f344;思路1&#x1f344;思路2 &#x1f514;接口源码 题目链接&#x1f449;…

Ubuntu下mysql安装及远程连接支持配置

1.安装 下载mysql-server&#xff08;必须加sudo&#xff09; sudo apt update sudo apt install mysql-server 查看mysql的状态 sudo service mysql status 通过如下命令开启mysql sudo service mysql start 2.配置 第一次安装mysql后&#xff0c;为root设置一个密码 …

Linux -- 进阶 Autofs应用 : 光驱自动挂载 操作详解

服务端自动挂载光驱 第一步 &#xff1a; 关闭安全软件&#xff0c;安装自动挂载软件 [rootserver ~]# setenforce 0 [rootserver ~]# systemctl stop firewalld [rootserver ~]# yum install autofs -y 第二步 &#xff1a; 修改 autofs 主配置文件&#xff0c; 计划挂载光…

C++之map的emplace与pair插入键值对用例(一百七十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

213、仿真-基于51单片机智能电表电能表用电量电费报警Proteus仿真设计(程序+Proteus仿真+原理图+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、原理图 五、程序源码 资料包括&#xff1a; 需要完整的资料可以点击下面的名片加下我&#xff0c;找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选…

uniapp tabbar 浏览器调试显示 真机不显示

解决方案&#xff0c;把tabBar里面的单位全改为px&#xff0c;rpx是不会显示的&#xff01; 注意了&#xff0c;改完一定要重新运行&#xff0c;不然无效&#xff0c;坑爹 "tabBar": {"borderStyle": "black","selectedColor": &quo…

java-JVM内存区域JVM运行时内存

一. JVM 内存区域 JVM 内存区域主要分为线程私有区域【程序计数器、虚拟机栈、本地方法区】、线程共享区域【JAVA 堆、方法区】、直接内存。线程私有数据区域生命周期与线程相同, 依赖用户线程的启动/结束 而 创建/销毁(在 HotspotVM 内, 每个线程都与操作系统的本地线程直接映…