react portal 不会冒泡到document

2024-10-11

React Portal - 弹出层的优秀解决方案

对于需要使用弹出层的需求 ,Portal可以说是提供了一种完美的解决方案.相比于React Native中的实现更多的使用Modal或者绝对定位,Portal实在是简易友好得多. 场景对话框,确认提示框,悬浮窗这些组件,一般都要做一个比当前视图层层级更高的View,但是现有的方案都很难跳出父容器的约束.如何破除这个约束? Portal提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案子节点可以被渲染到父组件之外的DOM上,这不就是解除了这个约束了吗? Portal:传送门.

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理事件捕获与冒泡 DOM 事件会先后经历捕获与冒泡两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | --

React Portal All In One

React Portal All In One react multi root https://reactjs.org/docs/portals.html https://zh-hans.reactjs.org/docs/portals.html ReactDOM.createPortal(child, container) demo https://codepen.io/gaearon/pen/yzMaBd Modal refs 2017 https://github.com/reactjs

react 阻止事件传递/冒泡

当我们设计界面时,在以下情况会需要阻止元素/组件内的事件阻断,不被上层触发: 弹出提示框,期望点击框外空白区域可以关闭弹框.点击框内不关闭弹框组件设计时,期望点击全局/点击指定元素时,显示不一样的交互. 网上搜到三种答案: ev.preventDefault() ev.stopPropagation(); ev.nativeEvent.stopImmediatePropagation(); 推荐第三个: componentDidMount() { document.onclick = e =>

react 阻止事件冒泡

前言在学习react阻止事件冒泡,需要先了解合成事件和原生事件合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:react有自己的一套事件处理机制,它将所有事件都绑定在document上,然后再用dispatchEvent来分发,这时候分发的就是合成事件实际是document上绑定了两个事件: // react 合成事件, dispatchEvent里面执行回调函数 document.addEventListe

React 为什么要把事件挂载到 document 上 & 事件机制源码分析

前言我们都知道 React 组件绑定事件的本质是代理到 document 上,然而面试被问到,为什么要这么设计,有什么好处吗? 我知道肯定不会是因为虚拟 DOM 的原因,因为 Vue 的事件就能挂载到真实的 DOM 节点.所以继续往下探究吧 React 模拟 DOM 事件冒泡的原理设有一段代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

react组件直接在document上添加事件

demo:比如组件里有个div写的框框,点击document body的背景色变红,点击div写的框框没效果 componentDidMount(){ document.onclick = this.ChangeBodyBgcolor; } clickDiv= (e)=>{ e.nativeEvent.stopImmediatePropagation();//阻止冒泡 } ChangeBodyBgcolor= ()=>{ document.body.style.backgroundColor=

高性能迷你React框架anu在低版本IE的实践

理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错.因此必须让react连IE6,7都支持,这才是最安全.但React本身并不支持IE6,7,因此anu使有用武之地了. https://github.com/RubyLouvre/anu 但光是anu不行,兼容IE是一个系统性的工程,涉及到打包压缩,各种polyfill垫片. 首先说一下anu如何支持低版本浏览器.anu本身没有用到太高级的API,像Object.definePrope

React的JSX语法及组件

最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭喜同事当爸了,打心理为他感到高兴! 代码down下来后开始查看的时候语法基本上使用的都是CMD,ES6还有本文讲的JSX,React组件.CMD,ES6这不难毕竟平常也经常用.但是JSX,React组件一开始就有点懵逼, 不过多看几遍加百度Google就懂了. (好像废话有点多,好了,开始讲重点..

React事件杂记及源码分析

前提最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点调用方法时需要手动绑定this React事件是一种合成事件SyntheticEvent,什么是合成事件? 事件属性会在事件调用后被回收,即不能异步访问事件机制的源码分析 1).注册阶段源码分析 2).触发阶段源码分析 3).总结相关流程带着问题,通过查询资料和源码来探寻~ 1.调用方法时需要手动绑定this 先从一段官方代码看起: 代码中的注释提到了一句话: This binding

react 点击空白处隐藏弹出层

点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡即可. class Select extends Component { constructor(props) { super(props); this.state = { selected: props.list[0], showList: false }; this.showList = thi

react事件机制

1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> <input value={this.state.name} onChange={this.handleChange} /> 合成事件与原生事件的区别 1. 写法不同,合适事件是驼峰写法,而原生事件是全部小写2. 执行时机不同,合适事件全部委托到document上,而原生事件绑定到DOM元素本身3.

【React】354- 一文吃透 React 事件机制原理

大纲主要分为4大块儿,主要是结合源码对 react事件机制的原理进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神.大佬斧正. 01 - 对事件机制的初步理解和验证 02 - 对于合成的理解 03 - 事件注册机制 04 - 事件执行机制 01 02 是理论的废话,也算是我的个人总结,没兴趣的可以直接跳到 03-事件执行机制. ps: 本文基于 react15.6.1进行分析,虽然不是最新版本但是也不会影响我们对

源码看React 事件机制

对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册首先还是看我们熟悉的代码 <button onClick={this.autoFocus}>点击聚焦</button> 这是我们在React中绑定事件的常规写法.经由JSX解析,button会被当做组件挂载.而onClick这时候也只是一个普通的props.ReactDOMComponent在进行组件加载(moun

深入理解React：事件机制原理

目录序言 DOM事件流事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述事件注册 document 上注册回调函数存储事件分发小结参考 1.序言 React 有一套自己的事件系统,其事件叫做合成事件.为什么 React 要自定义一套事件系统?React 事件是如何注册和触发的?React 事件与原生 DOM 事件有什么区别?带着这些问题,让我们一起来探究 React 事件机制的原理.为了便于理解,此篇分析将尽可能用图解代替贴 Re

React 17 要来了，非常特别的一版

写在前面 React 最近发布了v17.0.0-rc.0,距上一个大版本v16.0(发布于 2017/9/27)已经过去近 3 年了与新特性云集的 React 16及先前的大版本相比,React 17 显得格外特殊——没有新特性: React v17.0 Release Candidate: No New Features 不仅如此,还带上来了 7 个 breaking change…… 一.真没有新特性? React 官方对 v17 的定位是一版技术改造,主要目标是降低后续版本的升级成本:

react的每个方法为什么一定要bind this

一开始学习react的时候就了解了react的每个方法都要bind(this)或者使用箭头函数绑定this的指向,到底是为什么要这么写呢,当时要学习的东西太多了就没在意,今天特别好奇(不搞懂不吃饭的态度),就深入学习一下 SyntheticEvent是个什么东西 react官网有一节介绍了SyntheticEvent,大家可以去官网了解一下,我也就是简单了解了一下,dom树上绑定事件是耗性能的,一个页面,如果你在dom节点上绑了很多事件,但是用户就点了几个按钮,那其他事件绑上去岂不是浪费了? r

React的使用与JSX的转换

前置技能:Chrome浏览器一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能组件弃用 react-tools 编译器优化吃糖:开门见山,上代码. <!DOCTYPE html> <html> <head> <title>zqz_JSX_demo</title> <script type="text/j

React.js深入学习详细解析

今天,继续深入学习react.js. 目录: 一.JSX介绍二.React组件生命周期详解三.属性.状态的含义和用法四.React中事件的用法五.组件的协同使用六.React中的双向绑定一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字

初探React，将我们的View标签化

前言我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候你一个飞机以及装备还没满级,新的装备就又出来了,并且一定是更强! 于是很多人便直接抛弃当前的飞机与装备,追求更好的,这个时候如果是人民币玩家或者骨灰级大神玩家的话,基本可以很快站在世界的顶端,一者是装备好,一者是技术好,但是我不愿意投入太多钱,也不愿意投入过多精力,于是在一套极品装备满级后会积累资源

react portal 不会冒泡到document

热门专题