GoldenaArcher
GoldenaArcher

[React 进阶系列] React Portal 案例学习

[React 进阶系列] React Portal 案例学习

    • 什么是 Portal
    • 使用 Portal
    • 事件冒泡
    • Context 的使用
    • 参考资料

最近看文档/教程/资料，偶然间看到了一个以前没有碰到的东西：Portal。本着学习的精神打开了文档一看，才发现 Portal 的存在真的解决了一些以前碰到的问题。

什么是 Portal

Portal 是 ReactDOM 在 v16 的时候新推出的一个特性，到目前来说已经有 5 年的特性。它的优点有这几个：

  1. 可以在虚拟 DOM 树之外挂载 React 结点
  2. 挂在的 React 结点虽然物理地址在虚拟 DOM 树之外，但是其父组件可以监听到该组件的事件冒泡
  3. React Context 可以完整地保留

使用 Portal

官方文档上举例 Portal 的应用场景，包括：dialogs(对话框), hovercards(悬浮卡片), and tooltips(提示工具)。

下面就是一个 Modal 的简单的案例。

import "./styles.css";

const Modal = () => {
  return <div className="modal">Modal</div>;
};

export default function App() {
  return (
    <div className="App">
      <div className="modal__wrapper">
        <Modal />
      </div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h3>What happen here</h3>
      <h4>something happen here</h4>
    </div>
  );
}

其渲染结果如下：

[React 进阶系列] React Portal 案例学习_第1张图片

基本上可以满足我的需求。

但是，有的时候业务逻辑是需要在组件中进行条件渲染，这个时候 Modal 的定位可能就会出现问题，如：

[React 进阶系列] React Portal 案例学习_第2张图片

以及

[React 进阶系列] React Portal 案例学习_第3张图片

诚然，再创建一个新的 backdrop，定位高度宽度为 100vh，让其背景色为透明， position 设置为 relative,再继续使用 CSS 对 Modal 进行位置的调控也能暴力解决问题(惭愧……这就是之前我为了快速推进度而采取的解决方法)。不过这样粗暴的解决方法也有一定的问题：

  1. 用户不关闭当前 Modal 之前是无法与背景上的元素进行任何的交互

  2. 语义化的结构也不对

这个时候，使用 Portal 就可以解决这个问题，如：

[React 进阶系列] React Portal 案例学习_第4张图片

对 div 进行位置上的改变：

[React 进阶系列] React Portal 案例学习_第5张图片

渲染效果还是完全一样的。

这是因为 Portal 被挂载的元素在元素 id 为 modal 的结点上，而 modal 所处的位置在：

<body>
  <noscript> You need to enable JavaScript to run this app. noscript>
  <div id="modal">div>
  <div id="root">div>
body>

对渲染的 HTML 结果进行分析，也会发现 Modal 组件被挂载到了 #modal 结点上：

[React 进阶系列] React Portal 案例学习_第6张图片

事件冒泡

现在将代码少许更新一下：

import "./styles.css";
import ReactDOM from "react-dom";

const Modal = ({ clickHandler }) => {
  return (
    <div className="modal">
      <button onClick={clickHandler}>btn</button>
    </div>
  );
};

export default function App() {
  const clickHandler = () => {
    console.log("hello world");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h3>What happen here</h3>
      <h4>something happen here</h4>
      <div className="modal__wrapper">
        {ReactDOM.createPortal(
          <Modal clickHandler={clickHandler} />,
          document.querySelector("#modal")
        )}
      </div>
    </div>
  );
}

这里也模拟了一些使用 Modal 会经常碰到的情况，也就是事件处理。在使用 Portal 的情况下，App 这个父组件是可以将事件处理函数传送到 Modal 中：

[React 进阶系列] React Portal 案例学习_第7张图片

同样的情况下，onChange 之类的事件监听也是可以触发，从而修改父组件中的状态，或是复用父组件中的事件处理函数。

Context 的使用

我会加上这一点其实是因为这个 Stack Overflow 的回答：How to use ReactDOM.createPortal() in React 16?，其中得分最高的回复人说到：

I’m emphasizing on it because very popular libraries like react-router, redux heavily uses the react context. So context availability when using Portal is very helpful.

如 react-router, redux 的第三方库是 React Context 的重度依赖者，因此想要最大程度地享用这些库的特性，也需要保留 React Context 的内容。

参考资料

  • How to use ReactDOM.createPortal() in React 16?
  • Portals

你可能感兴趣的:(#,React,react.js)

  • PHP框架为基础的购物平台设计思路分步骤说明 星糖曙光 后端语言（nodejavascriptvue等等）学习课程设计vue.jspythonphp
    以下是以PHP框架为基础的购物平台设计思路分步骤说明：一、技术选型阶段技术栈={后端框架：Laravel/Yii2（提供ORM、路由、中间件支持）前端框架：Vue.js/React（可选SPA方案）数据库：MySQL8.0+（事务型数据存储）缓存：Redis（会话/商品缓存）队列：RabbitMQ（异步处理订单）\text{技术栈}=\begin{cases}后端框架：Laravel/Yii2（提
  • 可视化埋点在React Native中的实践 Shopee技术团队 前端reactnative前端react.js
    本文首发于微信公众号“Shopee技术团队”。1.背景笔者所在团队为Shopee的本地生活前端团队，用户可以在我们的平台购买优惠券，然后去线下门店使用。随着用户规模不断增加，研究用户行为数据可以更好地指导产品功能设计，提供更加优秀的用户体验。用户行为数据的研究首先涉及到如何采集，即我们常说的“埋点”。一直以来，我们项目中的埋点都采用代码埋点，每次新增埋点往往是一些重复性的工作，且需要重新发布代码才
  • 去哪儿网 ReactNative 跨小程序多端方案介绍 去哪儿网技术沙龙 大前端前端reactnative小程序
    1前言qrn-remax-unir是由去哪儿网前端技术团队实现的一套将RN适配到小程序端的跨端组件，通过该组件库可快速方便的将RN源代码直接运行到小程序端。方案参考了react-native-web的适配方案，使用remax框架来实现适配组件库并达到适配多小程序的目的。和react-native-web一样，它对RN源代码侵入度低，并且调试和替换组件相当方便。方案来自于社区，我们只是合理的应用用来
  • Android端ReactNative环境搭建——上 hzulwy reactnativereactnativeandroidreact.js
    前言最近一年，因为公司业务需要，部门引入了rn这门跨段技术来开发业务需求。从去年部门大佬调研rn这个框架到现在已有超过一年的时间了。而我从当时毕业不到1年的小白成长到现在负责维护项目的Android端代码的主力。同时，自己对rn相关的技术有了不少理解。因此，想要分享一些知识点，希望可以帮助到大家。我会以一个专栏的方式述说在这一年当中使用rn开发需求遇到的困难。大家可以借鉴参考下，共同进步！！！使用
  • React Native 迁移的阵痛 Ethan. L ReactNative&JSreactnativereact.jsandroidios
    背景由于我们的移动应用程序已经存在多年，经历了许多开发者的更替，因此变得越来越臃肿和难以维护。此外，我们团队中的Android开发人员一直很短缺，这导致我们在两个平台上的开发进度和质量存在巨大差异。因此，我们决定采用ReactNative技术，将原生工程迁移到该平台上，以提高应用程序的可维护性和整体性能。我在《ReactNative技术选型分析》中，阐述了对现有原生工程集成ReactNative的
  • Android React Native应用逆向分析初探 byc6352 androidandroid
    随着移动互联网时代的到来，用户在移动设备上花费的时间越来越多，不仅是因为移动设备方便携带，而且还因为层出不穷的大量应用提供为用户使用，以往在电脑上才能做的事情，现在仅靠一部手机就可以解决了。当前的移动设备厂商很多，但是被广泛使用的主流系统却只有两个，Android和iOS，因此现在大多数应用都会有两个版本，Android版本和iOS版本。然而这两种应用的开发方式却完全不同，移动客户端开发人员不得不
  • 前端开发：这就是终点吗？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而
  • 通俗易懂的讲解MobX luckucu javascripthtml5react.js前端
    什么是MobX？想象一下，你有一个小白板，上面写着你每天要做的事情。你每完成一件事，就在白板上打个勾。这个小白板就像是你的“状态”，而你打勾的动作就是“更新状态”。MobX就是这样一个工具，它帮助你管理和更新你的“小白板”。核心概念MobX有几个核心概念：observable、action、computed和reaction。我们用一个家庭日常生活的例子来解释这些概念。Observable（可观察
  • vite项目中vite.config.js使用.env.development文件中的配置数据 初遇你时动了情 vitereactvue3javascriptecmascriptvite
    如下图.env和vite.config.js配置同级目录loadEnv就可以获取.env配置信息import{defineConfig,loadEnv}from"vite";importreactfrom"@vitejs/plugin-react-swc";import{resolve}from"path";importvitePluginImpfrom"vite-plugin-imp";impo
  • github如何为开源项目作出贡献 PXM的算法星球 github开源
    就在昨天，笔者取得了第一次开源项目贡献，虽然更新的内容很小，但是也算是迈出了第一步1.选择合适的开源项目（1）兴趣优先选择自己感兴趣的项目会更有动力参与，比如你喜欢前端开发，可以关注React、Vue相关的开源项目；如果喜欢后端，可以尝试贡献Django、SpringBoot等项目。（2）关注活跃度一个活跃的开源项目通常意味着更快的反馈和更友好的开发者社区。你可以通过以下方式判断：Issue更新频
  • 使用 React 和 Cypress 进行单元测试 pxr007 单元测试react.jsjunit
    每个开发人员都希望发布一个没有错误的生产应用程序。为了实现这一点，我们需要考虑如何将测试集成到我们的应用程序中。我们可以使用许多测试工具、框架和测试类型。Cypress是一个现代化的自动化测试套件。它是一个基于JavaScript的完全开源的测试框架，由Mocha和Chai等支持BDD和TDD断言样式的库构建。此外，如果您熟悉用JavaScript编写测试，那么使用Cypress会很容易。Cypr
  • 前端面试：[React] scheduler 调度机制原理？ returnShitBoy 前端react.jsjavascript
    ReactScheduler是React16.8引入的一种调度机制，旨在对高效渲染和复杂应用程序的性能进行优化。它允许React在空闲时间进行渲染，优先处理对用户体验最为重要的任务。以下是Scheduler调度机制的原理，以及它在实际工作中如何帮助管理渲染。1.调度机制的背景React的渲染过程可能会受到多个因素的影响，例如用户输入、网络请求以及其他状态变化。传统的渲染机制在某些情况下可能导致性能
  • Tinyflow AI 工作流编排框架 v0.0.7 发布 自不量力的A同学 人工智能
    目前没有关于TinyflowAI工作流编排框架v0.0.7发布的相关具体信息。Tinyflow是一个轻量的AI智能体流程编排解决方案，其设计理念是“简单、灵活、无侵入性”。它基于WebComponent开发，前端支持与React、Vue等任何框架集成，后端支持Java、Node.js、Python等语言，助力传统应用快速AI转型。该框架代码库轻量，学习成本低，能轻松应对简单任务编排和复杂多模态推理
  • Vue3-笔记002-Ref与Reactive ·焱· vue3学习笔记笔记vue.jsjavascript
    002-Ref与Reactive-目录Refref案例ref与RefifRefshallowReftriggerRefcustomRefdom元素的refReactive与ref的共同点与ref的不同点数组的异步赋值问题readonlyshallowReactivetoReftoRefstoRawRef接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个.valueproperty
  • Vue3-day3-Ref-Reactive 金串串 vue.jsjavascript前端
    Ref：创建基本类型的响应式数据作用：定义响应式变量语法：letxxx=ref(初始值)返回值：一个RefImpl的实例对象，简称ref对象或者ref，ref对象的value属性是响应式的注意点：js中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。对于letname=ref('张三')来说，name不是响应式的，name.value是响应式的。代码段姓名：{{name
  • element plus table树形数据，增、删、改子节点数据时，进行局部刷新，而不刷新整个页面 catino vue.jsjavascriptelementui
    ...constlistLoading=ref(false)//保存节点映射的Mapconstmaps=reactive(newMap())constload=async(row,treeNode,resolve)=>{constpid=row.idmaps.set(pid,{row,treeNode,resolve})constpost_data={parent_id:row.id,}listL
  • 清晰架构之typescript实践：构建可扩展服务的利器 吕曦耘George
    清晰架构之typescript实践：构建可扩展服务的利器react-with-clean-architectureCleanarchitecturebasedreactprojectsamplecode.项目地址:https://gitcode.com/gh_mirrors/re/react-with-clean-architecture在软件开发的浩瀚宇宙中，找到一个既能维持代码的清晰度又能确保
  • 新建react native项目都失败，创建出来的都是.xcodeproj，而不是.xcworkspace，如何解决？？ bug菌¹ 全栈Bug调优(实战版)reactnativereact.jsjavascript
    本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！全文目录：问题描述解决方案1.确保正确设置代理源（如果你在国内）2.手动安装CocoaPods依赖3.检查你的Ruby和CocoaPods环境4.尝试清理并重建项目5.查
  • Android com.facebook.react:react-native:+ 版本问题 小铁-Android reactnativeandroid
    Executionfailedfortask':app:desugarBetaDebugAndroidTestFileDependencies'.>Couldnotresolveallfilesforconfiguration':app:betaDebugRuntimeClasspath'.>Failedtotransformreact-native-0.71.0-rc.0-debug.aar(c
  • cesium 文字避让 花归去 cesiumjavascript前端vue.js
    token记得换成您自己的！！！申请cesium的token官网【Cesium:ThePlatformfor3DGeospatial】>import*asCesiumfrom'cesium';import{onMounted,reactive,ref,computed,nextTick}from'vue';//地图实例letviewer:any;constshowText=()=>{viewer.
  • React 18 如何定义变量，及赋值 与渲染 痴心阿文 Reactreact.jsjavascript前端
    React18中，定义变量、赋值和渲染的方式因变量的用途和作用域不同而有所差异，下面为你详细介绍不同场景下的实现方法。1.函数组件内定义普通变量在函数组件里，你可以像在普通JavaScript函数中一样定义变量，并且这些变量会在每次组件重新渲染时重新创建。importReactfrom'react';constMyComponent=()=>{//定义普通变量并赋值constmessage='He
  • react-native 实现AES RSA MD5加密 花程序媛
    importReact,{Component}from'react';import{Platform,StyleSheet,Text,View,Image,Dimensions,ScrollView,TouchableOpacity,Modal,TouchableHighlight,NativeModules,ToastAndroid,Alert,FlatList,}from'react-nati
  • Netty源码—3.Reactor线程模型四 东阳马生架构 Netty应用与源码NettyReactor线程模型
    大纲5.NioEventLoop的执行总体框架6.Reactor线程执行一次事件轮询7.Reactor线程处理产生IO事件的Channel8.Reactor线程处理任务队列之添加任务9.Reactor线程处理任务队列之执行任务10.NioEventLoop总结8.Reactor线程处理任务队列之添加任务(1)Reactor线程执行一次事件轮询的过程(2)任务的分类和添加说明(3)普通任务的添加(4
  • Netty源码分析之Reactor线程模型详解 Java-进阶架构师 javajava编程java后端java-ee
    在分析源码之前，我们先分析，哪些地方用到了EventLoop？NioServerSocketChannel的连接监听注册NioSocketChannel的IO事件注册NioServerSocketChannel连接监听在AbstractBootstrap类的initAndRegister()方法中，当NioServerSocketChannel初始化完成后，会调用case标记位置的代码进行注册。f
  • React 中 Context 的作用是什么，在什么场景下使用它？ 前端大白话 大白话前端八股react.js前端javascript
    大白话React中Context的作用是什么，在什么场景下使用它？React中Context的作用在React里，组件之间常常需要共享数据。通常情况下，数据是通过props从父组件传递到子组件。不过，要是组件嵌套层次很深，就需要在每一层组件都传递props，这样会让代码变得复杂且难以维护。Context能帮我们解决这个问题。它可以创建一个数据“容器”，让处于不同层级的组件都能直接访问其中的数据，而
  • Netty源码—2.Reactor线程模型二 东阳马生架构 Netty应用与源码NettyReactor线程模型
    大纲1.关于NioEventLoop的问题整理2.理解Reactor线程模型主要分三部分3.NioEventLoop的创建4.NioEventLoop的启动4.NioEventLoop的启动(1)启动NioEventLoop的两大入口(2)判断当前线程是否是NioEventLoop线程(3)创建一个线程并启动(4)NioEventLoop的启动总结(1)启动NioEventLoop的两大入口入口一
  • 【致100位技术同路人：代码无边界，GIS×编程的双向奔赴！】 喆星时瑜 留言感谢你们的关注
    今天在地理信息科学的坐标系里标记了一个闪亮锚点——我的CSDN粉丝破百啦！✨破百节点亮起的不只是GISer，还有无数程序员伙伴的坐标！感谢你们的关注，是你们的每一次的让这些文章有了生命力，每一次的都化作我深夜调试的动力。作为穿梭在GIS与通用编程之间的开发者，我始终相信：空间算法是经纬度的代码诗，而工程思维是让地理智能落地的坐标系。未来会继续用PostGIS的严谨写空间索引，用React/Vue的
  • 如何在 React 项目中优化列表渲染性能，避免不必要的重绘？ 前端大白话 大白话前端八股react.js前端前端框架
    大白话如何在React项目中优化列表渲染性能，避免不必要的重绘？在React项目里，要是列表数据量很大，每次数据变化都重新渲染列表，会严重影响性能。1.使用key属性key属性能帮助React识别哪些元素发生了变化，这样在更新列表时，React就只更新那些真正改变的元素，而不是重新渲染整个列表。importReactfrom'react';//假设这是我们的数据列表constdata=[{id:1
  • nextjs 实现rag知识库检索增强的ai问答app *goliter * web开发学习人工智能
    AI-Chat-一个基于LLM大语言模型的知识库问答系统项目源码：https://github.com/goliter/ai-chat项目简介AI-Chat是一个基于Next.js和React开发的现代化大语言模型的知识库问答系统。该平台提供了简易的对话界面，支持上传文件进行知识库的构建，让用户在与大语言模型进行问答时给与大模型知识库内的相关内容。主要功能上传文件构建属于自己的知识库支持doc,t
  • PakePlus支持将vue/react等项目打包为跨平台桌面软件了 1024小神 多端开发vue.js前端javascript
    PakePLus介绍Turnanywebpage/Vue/ReactandsoonintoadesktopappandmobileappwithRust.轻松将任意网站/Vue/React等项目构建为轻量级(仅5M)多端桌面应用和多端手机应用。pakeplus开源地址：GitHub-Sjj1024/PakePlus:Turnanywebpage/Vue/Reactandsoonintoadeskt
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他