专栏首页JavaEdgeReact.js 实战之 元素渲染将元素渲染到 DOM 中

React.js 实战之 元素渲染将元素渲染到 DOM 中

元素是构成 React 应用的最小单位

元素用来描述在屏幕上看到的内容

与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象 React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致

注意: 初学者很可能把元素的定义和一个内涵更广的定义“组件”给搞混了 会在下节当中对组件进行详细的介绍 元素事实上只是构成组件的一个部分

将元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>

在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称之为 “根” DOM 节点

我们用React 开发应用时一般只会定义一个根节点 但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点

要将React元素渲染到根DOM节点中,我们通过把它们都传递给ReactDOM.render() 的方法来将其渲染到页面上

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React.js 实战之 事件处理

    React事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) ...

    JavaEdge
  • 这可能是你见过最好的Redis主从复制原理

    在Redis复制的基础上(不包括Redis Cluster或Redis Sentinel作为附加层提供的高可用功能),使用和配置主从复制非常简单,能使得从 Re...

    JavaEdge
  • SpringBoot2.0响应式编程系列(一)-导读

    JavaEdge
  • 一统江湖的大前端(7)React.js-从开发者到工程师

    许多入职前端的开发者,都是从熟练使用框架进行业务逻辑开发而开始的。说到框架,Vue,React,Angular三大框架都已经圈定了自己的用户群,从粉丝的数量...

    大史不说话
  • React的diffing算法学习

    这段时间主要在学习React的使用,React是一个用于构建用户界面的框架,其使用了一些方式来使得视图渲染更加高效,这里主要记录一下学习期间了解到的Diffin...

    IMWeb前端团队
  • C#开发移动应用系列(1.环境搭建)

    前言 是时候蹭一波热度了..咳咳..我什么都没说.. 其实也是有感而发,昨天看到Jesse写的博文(是时候开始用C#快速开发移动应用了),才幡然醒悟 , 原来我...

    GuZhenYin
  • 【产品科普】腾讯云如何保障云上数据安全?

    近期微盟恶意删库事件,在业内一片哗然,企业安全部门核实员工操作权限以及数据安全方案等等。对于云上客户大量的咨询云上各个产品,如果数据被删除,云上自恢复能力,一线...

    开元
  • 一条执行4秒的sql语句导致的系统问题(r3笔记第10天)

    一般来说一条sql语句执行个4秒钟是可以接受的,没有什么问题,但是如果应该执行1秒,却执行了4秒,问题就挺大的了。 今天查看数据库负载,发现在中午12:00 ...

    jeanron100
  • jQuery常用的选择器

    当我们想要操所页面中的元素时,首先要做的就是选取元素。选取页面中元素可以使用jQuery给我们提供的$()方法,该方法需要提供选择器作为参数,方法执行完成后会返...

    小周sri的码农
  • Elasticsearch 7.6.0 发布,分布式搜索和分析引擎

    Elasticsearch 7.6.0 发布了,Elasticsearch 是一个分布式的 RESTful 风格的搜索和数据分析引擎。

    Debian社区

扫码关注云+社区

领取腾讯云代金券