问题背景

在工作中遇到了这样一个场景,写了个通用的弹窗组件,却在同一个页面中多次使用了该组件。当点击打开弹窗时,可想而知,一次性打开了多个弹窗,而业务需求只需要打开一个。

我个人在解决问题过程中的一些已废弃思路

我首先想到的是能不能像mobx的@observer一样用一个譬如@singleton来修饰组件类,然后在像正常组件一样在使用组件的地方使用标签名来使用该组件。google了大半小时,发现行不通,因为每在render方法里使用一个组件,React就会自动实例化一个组件类,所以React本身的设计其实完全不适用于单例

解决问题的核心思路

  1. 采用类似调用方法的形式而非组件标签的形式来调用组件
  2. 只能在一个特定的容器内render组件,从而保证单例

代码


import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
//具体单例类代码
export default class Singleton {
constructor(component){
this.dom = null;
this.component = component;
this.instance = null;
} render(option) {
if(!this.dom) {
this.dom = document.createElement('div');
document.body.appendChild(this.dom);
}
this.instance = ReactDOM.render(<this.component {...option}/>, this.dom);
} destroy() {
unmountComponentAtNode(this.dom);
}
} //使用例子
//在适当地方调用如下代码渲染组件
new Singleton(Component).show();

React实现单例组件的更多相关文章

  1. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  2. React 表单受控组件

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  3. Cocos Creator_继承组件单例

    前言 单例,在游戏开发中是比较常用的功能,全局唯一,可以在任何地方直接获取, 省去了方法赋值 或者 属性面板拖动的麻烦. 普通单例_饿汉模式 不管有没调用,一开始就创建单例 1 // Singleto ...

  4. 学习笔记_Cocos Creator_继承组件单例

    官方文档:https://docs.cocos.com/creator/manual/zh/scripting/reference/class.html 前言 单例,在游戏开发中是比较常用的功能,全局 ...

  5. 我心中的核心组件(可插拔的AOP)~第十五回 我的日志组件Logger.Core(策略,模版方法,工厂,单例等模式的使用)

    回到目录 之前的讲过两篇关于日志组件的文章,分别是<第一回  日志记录组件之自主的Vlog>和<第三回  日志记录组件之log4net>,而今天主要说一下我自己开发的另一种日志 ...

  6. [转]React表单无法输入原因----约束性和非约束性组件

    转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...

  7. 前端笔记之React(二)组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

  8. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  9. Extjs 组件共用(单例)问题

    说明: 将store初始化在类定义时便创建, store实例将成为该类的单例 代码: 测试: 说明: 将store初始化放入initComponent函数中.  每次都将创建一个新的实例. 代码: 测 ...

随机推荐

  1. 使用Caffe预测遇到的问题

    1. 在使用网络预测图像时, prediction = net.predict( [input_image] ) 出现: net.image_dims[0] 不是整数情况, (2).甚至以为np.ze ...

  2. mysql 各项操作流程

    启动mysql:进入命令行输入:net start mysql 如果失败则显示:服务名无效,需跳转到指定Bin目录下进行启动mysql, 成功则进行下一步:登陆 :mysql -uroot -proo ...

  3. spring cloud(三) config

    spring cloud 配置中心 config 搭建过程 1.搭建config-server 服务端 1.1. 新建boot工程 pom引入依赖 <!-- config配置中心 --> ...

  4. Bootstrap 4 - Glyphicons migration?

     https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration Migrating from Glyphi ...

  5. Angular之constructor和ngOnInit差异及适用场景(转)

    原始地址:https://blog.csdn.net/u010730126/article/details/64486997 Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函 ...

  6. Project Euler 23 Non-abundant sums( 整数因子和 )

    题意: 完全数是指真因数之和等于自身的那些数.例如,28的真因数之和为1 + 2 + 4 + 7 + 14 = 28,因此28是一个完全数. 一个数n被称为亏数,如果它的真因数之和小于n:反之则被称为 ...

  7. maven构建本地jar包到本地仓库

    maven命令: mvn:install:install-file -DgroupId=com.oracle -DartifactId=ojdbc6 -Dversion=1.0 -Dpackaging ...

  8. Oracle数据库性能优化基础

    1.数据处理分类OLTP,OLAP 2.Oracle特性 3.数据库优化方法论/原则 方法论:自顶向下优化和自底向上优化 3.1 自顶向下优化 3.2 自底向上优化 对于多年的老系统出现性能问题时,就 ...

  9. 《你又怎么了我错了行了吧》【Alpha】Scrum meeting 3

    第三天 日期:2019/6/16 前言: 第3次会议在女生宿舍召开 讨论了项目功能改进问题,继续代码完善和安排 1.1 今日完成任务情况以及明天任务安排 姓名 当前阶段任务 下一阶段任务 刘 佳 对已 ...

  10. FZU Problem 1853 Number Deletion

    Problem 1853 Number Deletion Accept: 80    Submit: 239 Time Limit: 1000 mSec    Memory Limit : 32768 ...