组件的挂载和渲染

最新推荐文章于 2024-08-10 03:50:48 发布
原创 最新推荐文章于 2024-08-10 03:50:48 发布 · 704 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

本文解析React组件的挂载和渲染概念，指出挂载是初次添加到DOM，渲染是状态变化后更新UI。强调挂载与后续状态更新的区别，承诺后续深入源码剖析。

React的挂载和渲染

React的生命周期中包括三个主要的阶段：挂载、渲染以及卸载。

很多小伙伴包括我自己可能对挂载和渲染的概念比较模糊，今天这篇文章主要的目的是为了解答我们的这个小疑惑~

这张图是从其他地方搬运过来的，这张图中描述的主要是class组件的过程。
在这里插入图片描述
通过这张图，我们知道【挂载】是发生在class组件的constructor之后的，我们可以理解为挂载其实就是首次渲染，通过componentDidMount的含义也可以知道这个生命周期描述的是组件挂载完成，即它前面的render函数已经将JSX转换为了DOM结构。表明现在DOM树结构是已经搭建好了。

后续由于props或者state更新引起的重新渲染，是与【挂载】这个概念完全无关的，涉及的变化都是渲染，即重新渲染。因为我们的DOM树是在页面打开的时候进行首次挂载的，后面的变化都是在原有DOM树的结构上去进行更新。

好的，下面我们来总结一下：
React的挂载和渲染是两个不同的概念，它们在React组件的生命周期中的不同阶段发生。

  • 挂载(Mounting)是指React组件被添加到DOM中的过程。当组件第一次被加载到页面上时，React会将组件实例化，并将组件渲染成真实的DOM节点，最后将该节点插入到页面中指定的位置。

  • 渲染(Rendering)是指React组件在更新时重新绘制UI的过程。当组件的状态发生变化时，React会重新执行渲染函数并生成一个新的虚拟DOM树。然后React将新的虚拟DOM树与旧的虚拟DOM树进行比较，找出需要更新的部分，并将变化的部分渲染到真实的DOM节点中。

相信通过上面的分析，我们对于挂载和渲染的概念有了一定的认知，后续我会从源码角度进行分析，不断鞭策自己成长~

vue组件挂载到全局方法的示例代码
10-18
4. 组件挂载：实例化组件后，调用`instance.$mount()`将组件挂载到一个临时的DOM元素上，然后我们可以将这个元素添加到实际的DOM中，例如`document.body.appendChild(instance.vm.$el)`。这样用户就可以在页面上看到...
6.（vue3.x+vite）动态挂载组件并传递参数和方法.rar
04-16
总结而言，掌握Vue3.x与Vite结合的动态组件挂载技术，对于提高前端开发的灵活性和效率至关重要。开发者不仅需要对Vue3.x的核心特性有深入理解，还应该熟悉Vite的构建优势，这样才能在开发中得心应手地应用这些工具，...
react组件挂载了解
宝宝是个小气鬼i
09-03 3384
react组件挂载 概念 将组件渲染，并构建DOM元素然后插入页面的过程 组件内部在挂载是进行的过程——constructor #初始化组件 ——render() # 挂载 ——构建DOM元素插入页面再进行挂载过程中还有一些具体的过程——constructor #初始化组件 ——componentWillMount() #在组件插入页面之前进行 ——render() #挂载 ——构建DOM元素插
vue组件挂载与html加载区别,vue中的挂载是什么意思?
weixin_39633054的博客
06-09 2467
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。vue中的挂载是什么意思?将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。vue几种挂载方式区别1、第一种,最常见.vue-cli模板就是这样impor...
浅析浏览器渲染页面过程
大菜鸟的博客
12-12 3689
1.解析HTML文件，创建DOM树 自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。 2.解析CSS 优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式； 特定级：id数*100+类或伪类数*10+tag名称*1 3.将CSS与DOM合并，构建渲染树（rendering...
渲染组件
jean_0920的博客
08-30 290
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。 例如，这段代码会在页面上渲染 “Hello, Sara”： function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element...
vue挂载前后与DOM渲染-学习笔记
前端入门
05-21 455
vue挂载前后与DOM渲染mounted二级目录三级目录 mounted 二级目录 三级目录
React如何将组件渲染到指定DOM节点详解
08-29
如果我们需要控制组件的位置，我们可以在 RenderInBody 组件中添加一些属性，例如 left 和 top 属性。这样，我们可以在将组件渲染到指定的 DOM 节点时，控制其位置。 总结 在本文中，我们学习了如何使用 React 将...
react-使用自定义元素将React组件挂载到DOM
08-14
然而，React也支持将组件挂载到自定义元素，这是一种更灵活的方式，可以扩展React的应用场景。本文将深入探讨如何在实际项目中实现这一功能。 首先，我们需要了解什么是自定义元素。自定义元素是Web Components技术...
深入理解Vue生命周期、手动挂载及挂载子组件
08-29
总结，深入理解Vue生命周期有助于优化组件管理和更新逻辑，而手动挂载和挂载子组件则提供了更大的灵活性，尤其在处理动态渲染和复杂场景时。同时，通过自定义指令，可以实现更强大的DOM操作和验证功能。
Vue学习疑问：你一口一个渲染、挂载所以到底应该怎么理解？
真的好想再回到那时，可现在能做的只有补救。————个人博客：https://w7h1te.github.io/
03-14 2228
前情提要： 在刚接触到vue时，总会出现几个名词：渲染、挂载、热更新等等，所以到底应该怎么去理解呢？ 以及引申的知识。 Vue渲染方式 Vue中的渲染方式个人总结可分为4种: 原有模板语法，挂载渲染 使用render属性，createElement函数直接渲染 使用render属性，配合组件的template属性，createElement函数渲染 使用render属性，配合单文件组件，createElement函数渲染 超详细的Vue渲染原理讲解 MVVM、MVP和MVC MVVM，即model、
React 中的“重新渲染”和“组件初次挂载”的区别
十步杀一人-千里不留行
07-04 610
初次挂载：当组件第一次被渲染到页面上时（如打开一个包含这个组件的页面），会触发useEffect中的 API 调用。重新渲染：当组件的状态或属性发生变化时，组件会重新渲染，但由于useEffect依赖数组为空，API 不会再次被调用。通过在useEffect中调用 API 并传入空依赖数组，确保 API 调用只在组件初次挂载时执行一次，从而避免不必要的重复请求。
在vue中什么是挂载和渲染关系
m0_57836225的博客
08-10 347
指的是。
什么时候组件会挂载？
m0_57236802的博客
04-22 727
组件挂载是指将React组件插入到DOM中的过程。在React应用程序中，当组件被首次渲染或插入到页面上时，组件会挂载。总之，组件挂载是将React组件插入到DOM中的过程。这通常在页面首次加载、父组件渲染子组件或满足条件渲染时发生。在函数式组件中，你可以使用。在这个例子中，当用户点击“Toggle component”按钮时，Hook在组件挂载时执行特定操作，例如数据获取或订阅。组件会被挂载到ID为。状态会切换，从而导致。
React的生命周期的三个阶段 挂载、渲染、卸载
JackieDYH的博客
06-30 2367
1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmount () 2. 更新过程 2.1. componentWillReceiveProps (nextProps) 2.2.shouldComponentUpdate(nextProps,nextState) 2.3.componentWillUpdate (nextProps,nextState) 2....
vue样式的渲染顺序
web_zq的博客
08-12 1176
样式的渲染顺序 本以为是跟curr.unreserved 和 curr.lunar.isTody的顺序有关，结果并不是这个顺序的影响 而是style样式里面的顺序影响 是哪个样式写在上面先渲染哪个顺序，后面得样式会覆盖前面的样式 ...
UI组件渲染的方式
tiangej的专栏
05-27 2278
1. 延迟渲染（集中渲染）      通过ENTER
vue父子组件的创建及挂载顺序
Tyler_zch的博客
06-28 1137
Vue的created和mounted执行顺序，created自上而下，mounted自下而上
视频渲染是什么意思？
QQ2558030393的博客
05-08 6053
参考：https://zhuanlan.zhihu.com/p/35679418
父子组件挂载顺序
最新发布
08-23
### 三级标题：Vue 父子组件挂载顺序详解 在 Vue 应用中，父子组件的生命周期钩子函数具有明确的执行顺序，这对组件间的数据通信和依赖管理具有重要意义。在组件挂载阶段，父组件和子组件的生命周期钩子函数依次执行，确保组件树的正确渲染。 在初始化阶段（首次渲染），首先执行父组件的 `beforeCreate`，此时 Vue 实例刚刚创建，数据观测和事件配置尚未完成。随后执行父组件的 `created`，该阶段已完成数据观测和方法绑定，但 DOM 还未生成。接着执行父组件的 `beforeMount`，表示模板编译完成，即将挂载到 DOM。 此时开始进入子组件的生命周期流程。子组件依次执行 `beforeCreate`、`created` 和 `beforeMount`。当子组件完成这些初始化步骤后，进入 `mounted` 阶段，表示其 DOM 已完成挂载并可进行 DOM 操作。此时父组件的 `mounted` 钩子函数才被调用，表示父组件及其所有子组件均已挂载完成 [^1]。 该顺序确保了父组件在挂载自身之前，子组件已经完成挂载操作，从而保证了父子组件间的数据传递和 DOM 操作的正确性。例如，在父组件的 `mounted` 钩子中，可以安全地访问子组件的 DOM 元素或调用其方法。 ```javascript // 父组件示例 export default { mounted() { console.log('父组件已挂载'); } }; // 子组件示例 export default { mounted() { console.log('子组件已挂载'); } }; ``` 在开发过程中，若父组件依赖异步数据传递给子组件，则应确保在父组件的 `mounted` 钩子中进行数据的初始化或更新，以避免子组件因数据未就绪而无法正确渲染 [^2]。 ### 三级标题：相关机制与注意事项 在 Vue 中，父子组件的生命周期不仅影响挂载顺序，还涉及更新和销毁阶段的执行流程。例如，在数据更新过程中，父组件的 `beforeUpdate` 先于子组件的 `beforeUpdate` 执行，而子组件的 `updated` 则在父组件之前完成。这一机制确保了组件更新的顺序性，避免因异步更新导致的视图不一致问题。 组件销毁阶段同样遵循父子顺序：父组件的 `beforeDestroy` 先执行，随后是子组件的 `beforeDestroy` 和 `destroyed`，最终父组件的 `destroyed` 被调用。这种顺序确保了在销毁过程中，子组件资源能够被正确释放后再处理父组件的销毁逻辑 [^2]。 此外，在使用 `mixin` 混入机制时，混入的生命周期钩子会与组件自身的钩子合并，并按照混入顺序依次执行。混入的钩子在组件钩子之前运行，确保混入逻辑不会干扰组件自身的初始化流程 [^2]。 ### 三级标题：总结 通过理解 Vue 父子组件的挂载顺序，可以更好地控制组件间的依赖关系和数据流。父组件的 `beforeMount` 和 `mounted` 钩子分别在子组件挂载前后执行，为组件通信和 DOM 操作提供了可靠的执行时机。开发过程中应合理利用这些生命周期钩子，确保组件渲染和数据更新的正确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值