react传送门portals

一,前言

1.在react中,我们可以认为组件的子元素及props.children是默认挂载在距离父组件最近的元素上。

2.react提供了一种传送门技术,让组件的子元素能够挂载在其他dom节点上

二,ReactDOM.createPortal

1.createPortalReactDOM上的API

2.ReactDOM.createPortal(componentt,dom节点),接收一个组件和组件要挂载的dom节点作为参数,返回的是一个组件。

三,使用形式

1.ReactDOM.createPortal不能作为一个组件内部的某个元素。作用比较单纯使某个组件的子节点挂载在其他节点上。
在这里插入图片描述
2.常见使用形式
在这里插入图片描述

四,注意事项

1.即使portals组件不是直接挂载在父组件下,但是其他默认行为和直接挂载在父组件下的组价是一致,例如事件冒泡。是会被父组件捕获的。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 学习 React 框架的原理的一个好方法是从官方文档开始。React 官方网站提供了一些教程和文档,可以帮助您了解 React 的基础概念和用法。 首先,您可以阅读 React 的官方教程,了解 React 如何工作,包括它的基本概念、组件、状态和生命周期等。这将有助于您熟悉 React 的基础用法。 其次,您可以学习 React 的官方文档,深入了解 React 的各种功能和用法。React 官方文档中包含了大量的详细信息,可以帮助您了解 React 的详细原理。 此外,您还可以通过实践来加深对 React 的理解。您可以尝试使用 React 构建一些小型应用或者尝试在现有应用中使用 React。通过不断实践和探究,您可以进一步加深对 React 的理解。 另外,您还可以参加一些在线课程或者报名参加 React 相关的培训,从专业人士那里学习 React 的知识和技巧。这些方式可以帮助您更快地掌握 React,并且能够得到专业的指导和帮助。 ### 回答2: 学习React这门框架的原理可以按照以下步骤进行: 1. 学习JavaScript基础:React是基于JavaScript语言的,因此首先需要熟悉JavaScript的基本语法、函数、对象等概念。了解JavaScript的基础知识会有助于理解React的工作原理。 2. 学习React的核心概念:React的核心概念包括组件、虚拟DOM、状态和属性等。通过阅读React官方文档或相关教程,在编写简单的React组件时要了解这些概念的作用和用法。 3. 掌握React的生命周期:React组件具有生命周期,包括组件的创建、更新和销毁等阶段。掌握React的生命周期方法,比如`componentDidMount`、`componentDidUpdate`等,可以更好地理解组件是如何工作的。 4. 理解React的虚拟DOM:React通过虚拟DOM来实现高效的页面更新。了解虚拟DOM的概念和原理,以及与真实DOM的区别,对于优化性能和理解React工作原理很有帮助。 5. 阅读React源码:阅读React源码是学习其原理的最佳途径之一。通过查看React的源码,可以深入理解其内部实现机制,例如组件渲染、事件处理、状态更新等。 6. 实践项目:通过实践项目来应用和巩固学习的知识。可以尝试创建简单的React应用、组件库或其他前端项目,通过实践来加深对React原理的理解。 7. 参与社区:加入React社区,与其他开发者交流并学习。可以参与讨论、提问问题,获得更多关于React原理方面的经验和见解。 在学习React的原理过程中,需要保持持续的学习和实践,并且不断关注最新的React版本和更新,以保持与时俱进。 ### 回答3: 学习React框架的原理主要分为以下几个步骤: 1. 掌握基础知识:学习React的基础概念,包括组件、虚拟DOM、状态和属性等。理解React的思想和设计模式,学习React相关的JavaScript语法和ES6+特性。 2. 实践项目:选择一个小型的React项目,通过实际的编码过程来理解React的使用和原理。可以先从快速搭建React开发环境开始,然后逐步添加组件、处理事件和状态等。通过项目实践,深入理解React的工作原理。 3. 深入研究源码:阅读React的源代码是学习React原理的重要一环。可以从React的官方文档中找到源码地址,阅读和分析React的核心模块。重点关注虚拟DOM的实现以及组件的生命周期等。可以通过调试源码、查阅相关资料和参考优秀的开源实现等方式来加强理解。 4. 学习相关技术栈:React通常会和其他技术栈一起使用,如Webpack、Babel、Redux等。学习这些相关的技术可以更好地理解React的原理及其与其他技术的结合。可以参考相关文档、教程和实践项目来学习这些技术。 5. 参与社区和交流:积极参与React的相关社区和交流平台,如官方论坛、GitHub等,与其他开发者交流、分享经验和学习资源。参与开源项目,审阅他人的代码,给出自己的建议和改进。通过与社区的互动,不断提升自己的技术水平。 总之,学习React的原理需要结合理论和实践,通过实际的项目和阅读源码来加深对其原理的理解。同时,学习相关技术栈和积极参与社区交流也是提高React技术水平的重要途径。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值