步入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'>
      <WithTooltip
        render={({ 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设计模式的优缺点分别是什么;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java版电子招投标管理系统源码-电子招投标认证服务平台-权威认证 tbms

​ 功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;…

Java进阶篇--数据结构

目录 一.数组&#xff08;Array&#xff09;&#xff1a; 1.1 特点&#xff1a; 1.2 基本操作&#xff1a; 1.3 使用数组的好处包括&#xff1a; 1.4 数组也有一些限制&#xff1a; 二.集合框架&#xff08;Collections Framework&#xff09;&#xff1a; 2.1 列表…

【TA 挖坑02】RayMarching SDF 物体黏合

写在前面 由于实习和忙着论文很久没经营博客了&#xff0c;最近以各种方式收集到了一些想实现的效果&#xff0c;其中一个就是卡通云融合、变大变小、聚散收拢的效果如何实现的问题&#xff0c;这就不得不提搁置了很久的RayMarching... 挖坑&#xff01;整理一下有帮助的文章…

Octree八叉树python

原理 简单示例&#xff1a; 假设我们有以下一组三维点云数据&#xff1a; points [[0.1, 0.1, 0.1],[0.4, 0.1, 0.1],[0.1, 0.4, 0.1],[0.4, 0.4, 0.1],[0.1, 0.1, 0.4],[0.4, 0.1, 0.4],[0.1, 0.4, 0.4],[0.4, 0.4, 0.4], ] 我们可以使用八叉树将这些点云数据存储在三维空…

MATLAB高分辨率图片

把背景调黑&#xff0c;把曲线调黄&#xff0c;把grid调白&#xff0c;调调字体字号的操作 close all a0:0.1:10; noise2*rand(1,length(a)); bsin(a)sin(3*a)noise;plot(a,b,y,linewidth,2); ylim([-3 4]) %y轴范围 set(gca,xgrid,on,ygrid,on,gridlinestyle,-,Grid…

8.13黄金是否进入下行通道?下周开盘如何布局

近期有哪些消息面影响黄金走势&#xff1f;黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周五(8月11日)现货黄金小幅收低&#xff0c;受累于美元走强和美国国债收益率上升&#xff0c;本周录得6月底以来最差单周表现。投资者在评估最新一批通胀报告和消费者信…

【hive】简单介绍hive的几种join

文章目录 前言1. Common Join2. Map Join介绍&#xff1a;使用方法&#xff1a;限制&#xff1a; 3. Bucket Map Join介绍&#xff1a;好处&#xff1a;使用条件&#xff1a;使用方法&#xff1a; 4. Sort Merge Bucket Map Join介绍&#xff1a;如何使用&#xff1a; 5. Skew …

使用 HTML、CSS 和 JavaScript 创建多步骤表单

使用 HTML、CSS 和 JavaScript 创建多步骤表单 为了处理又长又复杂的表单&#xff0c;我们需要将它们分成多个步骤。通过一次只在屏幕上显示一些输入&#xff0c;表单会感觉更容易理解&#xff0c;并防止用户感到被大量的表单字段淹没。 在本文中&#xff0c;我将逐步指导如何…

OSI七层模型及TCP/IP四层模型

目录 OSI七层模型 TCP/IP四层模型 OIS七层模型和TCP/IP模型图 七层详解 两种模型比较 为什么OSI七层体系结构不常用 四层详解 网络为什么要分层&#xff1f; 说说 OSI 七层模型和 TCP/IP 四层模型的关系和区别 OSI七层模型 OSI&#xff08;Open System Interconnect&a…

编译redis-5.0.9报错zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录问题解决

上图 解决&#xff1a; make && make install MALLOClibc原因: 原因是jemalloc重载了Linux下的ANSI C的malloc和free函数。

【Spring Boot】构建RESTful服务 — 实战:实现Web API版本控制

实战&#xff1a;实现Web API版本控制 前面介绍了Spring Boot如何构建RESTful风格的Web应用接口以及使用Swagger生成API的接口文档。如果业务需求变更&#xff0c;Web API功能发生变化时应该如何处理呢&#xff1f;可以通过Web API的版本控制来处理。 1.为什么进行版本控制 …

JVM中对象和GC Root之间的四种引用关系

1. 强引用 只有所有 GC Roots 对象都不通过【强引用】引用该对象&#xff0c;该对象才能被垃圾回收 由GC Root直接new出来的对象是强引用&#xff0c;只有当GC Root不再引用该对象的时候&#xff0c;才会被回收 例子&#xff1a; List<String> list new ArrayList<&…

【STM32】FreeRTOS事件组学习

事件组&#xff08;Event Group&#xff09; 一个任务执行之前需要经过多个条件进行判断&#xff0c;当条件全部满足或多个条件中的某一个条件满足才执行。 实验&#xff1a;创建两个任务&#xff0c;一个事件组&#xff0c;当按键一二三都按过一遍才打印。 实现&#xff1a…

STM32 CubeMX (Freertos任务通信:队列、信号量、互斥量,事件组,任务通知)第二步

STM32 CubeMX STM32 CubeMX ____Freertos任务通信&#xff1a;队列、信号量、互斥量&#xff0c;事件组&#xff0c;任务通知 STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用…

【STM32+ESP8266上云连载①】给ESP8266烧录AT固件

文章目录 一、给NodeMCU烧录固件1.1硬件准备1.2软件准备1.3AT固件下载1.4配置设置1.5开始烧录 二、给ESP8266-01S烧录固件2.1硬件准备2.2AT固件下载2.3连线2.4烧录配置 三、给ESP-12E/F/S单片烧录固件四、指令测试4.1HTTP测试4.2MQTT测试 我在使用ESP8266的时候遇到了一些问题&…

智能仓储管理系统(自动化仓库管理解决方案)

企业实际的仓储管理中&#xff0c;往往会出现那样这样的错误&#xff0c;归根结底&#xff0c;主要是由于没使用合适的仓库管理工具。相反&#xff0c;人工使用合适的仓库管理工具&#xff0c;不仅可以在日常仓库管理方法中根据采集到的产品信息数据&#xff0c;大大地提高管理…

vue3学习笔记(一)

一、API风格 Vue 的组件可以按两种不同的风格书写&#xff1a;选项式 API 和组合式 API。 二、组合式API 1.&#xff08;组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量&#xff0c;并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由&#x…

vue项目根据word模版导出word文件

一、安装依赖 //1、docxtemplaternpm install docxtemplater pizzip -S//2、jszip-utilsnpm install jszip-utils -S//3、pizzipnpm install pizzip -S//4、FileSaver npm install file-saver --save二、创建word模版 也就是编辑一个word文档&#xff0c;文档中需要动态取值的…

用 React+ts 实现无缝滚动的走马灯

一、走马灯的作用 走马灯是一种常见的网页交互组件&#xff0c;可以展示多张图片或者内容&#xff0c;通过自动播放或者手动切换的方式&#xff0c;让用户能够方便地浏览多张图片或者内容。 本次实现的不是轮播图而是像传送带一样的无限滚动的形式。 二、需求梳理 走马灯可设…

大数据培训前景怎么样?企业需求量大吗

大数据行业对大家来说并不陌生&#xff0c;大数据行业市场人才需求量大&#xff0c;越早入行越有优势&#xff0c;发展机会和上升空间等大。不少人通过大数据培训来提升自己的经验和自身技术能力&#xff0c;以此来获得更好的就业机会。 2023大数据培训就业前景怎么样呢?企业需…