首页 > 其他分享 >ReactDOM.render 和 ReactDOM.createRoot 二者的区别

ReactDOM.render 和 ReactDOM.createRoot 二者的区别

时间:2024-08-22 11:19:41浏览次数:8  
标签:createRoot render 渲染 React 组件 ReactDOM

ReactDOM.render 和 ReactDOM.createRoot 都是用于在 React 应用程序中渲染组件的方法,但它们之间存在一些区别:

ReactDOM.render:这个方法是 React 早期版本中使用的,现在已经被 ReactDOM.createRoot 替代。
ReactDOM.render 方法接受两个参数:第一个参数是要渲染的 React 组件,第二个参数是 DOM 元素,将组件渲染到该元素上。

ReactDOM.render(modal, div);

将modal渲染到div中

ReactDOM.createRoot:这个方法是在 React 18 版本中引入的,用于创建一个新的根容器,以便在应用程序中渲染组件。
与 ReactDOM.render 不同,ReactDOM.createRoot 不需要指定一个现有的 DOM 元素,而是返回一个可以用于渲染组件的根容器对象。

divRoot = ReactDOM.createRoot(div);
divRoot.render(modal);

总结:ReactDOM.createRoot 是 React 18 版本中引入的新方法,用于创建新的根容器,而 ReactDOM.render 是早期版本中使用的方法,已被 ReactDOM.createRoot 替代。

标签:createRoot,render,渲染,React,组件,ReactDOM
From: https://www.cnblogs.com/longmo666/p/18373410

相关文章

  • 使用 prerenderRoutes 进行预渲染路由
    title:使用prerenderRoutes进行预渲染路由date:2024/8/20updated:2024/8/20author:cmdragonexcerpt:prerenderRoutes函数是Nuxt3中一个强大的工具,它能够帮助开发者优化页面加载速度和改善用户体验。通过使用prerenderRoutes,你能够灵活地指定需要预渲染的路由,提......
  • 【收藏】Arcgis api4.x renderer根据字段值渲染,唯一值渲染和分级渲染
    1.根据字段值渲染(唯一值渲染)  定义唯一值渲染器中每个唯一值的样式,以根据数据字段的不同值为要素指定不同的符号,从而实现基于分类数据的图形化表示。 constrenderer={type:"unique-value",field:"type",defaultSymbol:{type:"simple-marke......
  • 《心灵杀手》安装时renderer_w32_f.dll丢失:从原因分析到实际操作,全方位解决《心灵杀手
    《心灵杀手》(AlanWake)是一款备受好评的动作冒险游戏,但有时玩家在安装过程中会遇到“renderer_w32_f.dll丢失”的错误提示。这个问题通常意味着游戏启动时未能找到所需的动态链接库(DynamicLinkLibrary,DLL)文件,从而阻止了游戏的正常安装或运行。本文将探讨这一问题的常见原因......
  • xrender中的FormRender使用示例
    xrender是阿里的中后台「表单/表格/图表」开箱即用解决方案。先采用在线工具创建一个简单的schema:simple.tsexportdefault{"type":"object","properties":{"title":{"title":"标题","type&qu......
  • Unity强化工程 之 SpriteRender
    本文仅作笔记学习和分享,不用做任何商业用途本文包括但不限于unity官方手册,unity唐老狮等教程知识,如有不足还请斧正1.SpriteRenderer是什么渲染精灵用的,是渲染的核心组件,有许多重要参数所以要详细讲一讲SpriteRenderer-Unity手册2.参数DrawMode精灵绘制模式Sim......
  • vue3 自定义渲染,渲染函数实现,配置渲染render函数,低代码配置自定义渲染函数核心实现
    代码父组件<template><divclass="component-name"><!--全局自动的icon--><Extend:render="render"/></div></template><scriptsetuplang="ts">import{ref,reac......
  • 国产渲染引擎ssRender(Lua+LuaPanda调试篇)
        秉承着说多了都是故事的理念,直接上干货。    今天给大家带来的是一篇关于Lua+Vscode+LuaPanda的远程调试篇,或许对你有一些启发。    资源给大家放在链接里:LuaPanda+LuaSocketDebug资源文件http://[email protected]:hwYang1995/ssRender_Lua_Debug_......
  • 前端画图引擎ZRender,echarts的渲染器,你知道吗?
    Zrender是一个轻量级的Canvas和SVG渲染库,它提供了一个高性能的图形绘制和交互的解决方案,用于在Web页面上创建丰富的数据可视化和交互式图形。可能大部分小伙伴不知道这个类库,本文给大家科普一下。一、Zrender是谁?该项目由EFE团队开发而来,项目托管在GitHub上。Zrender基于HT......
  • uniapp中renderjs的使用
    renderjs是一个运行在视图层的js。它只支持app-vue和web。renderjs的主要作用有2个:1.让APP端引入web端的js库,可以使用web的功能2.大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力<template><view><button@click="lzRend.emitData">触发renderjs......
  • Vue预渲染prerender-spa-plugin+vue-meta-info
    前言:公司现有一个新需求需要在原有的vue2项目上面进行预渲染,进行SEO的优化,在网上进行了一系列的搜索,发现两种简单易上手的方案(1.使用prerender-spa-plugin+vue-meta-info进行打包构建;2.使用nuxt.js在开发过程中就渲染呈现出来)因是在原有项目基础上进行,所以采用第一种方案进行构......