首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>,在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称之为 “根” DOM 节点。我们用React 开发应用时一般只会定义一个根节点。

<div id="root"></div>

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

const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

  在实际生产开发中,大多数React应用只会调用一次 ReactDOM.render() 。
  React 只会更新必要的部分,React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。

React-将元素渲染到 DOM 中的更多相关文章

  1. React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber,fiber不解读这个过程也不知道)

    一.ReactDOM.render 都干啥了 我们在写react的时候,最后一步肯定是 ReactDOM.render( <div> <Home name="home&qu ...

  2. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  3. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  4. react学习(二)--元素渲染

    元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...

  5. react 也就这么回事 04 —— 元素渲染

    为了便于后续理解,我们再来回顾和总结前面几个章节的内容 1 元素及其创建 元素是构成 React 应用的最小砖块. 元素描述了你在屏幕上想看到的内容. const element = <h1&g ...

  6. React入门-JSX和虚拟dom

    1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...

  7. dotnet 读 WPF 源代码笔记 布局时 Arrange 如何影响元素渲染坐标

    大家是否好奇,在 WPF 里面,对 UIElement 重写 OnRender 方法进行渲染的内容,是如何受到上层容器控件的布局而进行坐标偏移.如有两个放入到 StackPanel 的自定义 UIEl ...

  8. 从后台获取的数据渲染到页面中的dom操作

    很多情况下页面dom都是从后台拼接字符串添加生成的新的dom元素,在编辑器中不能看到,只能通过检查看到页面的dom结构,但是这时候会发生一个问题,就是如果使用jQuery无法进行dom操作,事件和方法 ...

  9. react基础语法(一)元素渲染和基础语法规则

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 可视化接口管理工具RAP,模拟数据,校验接口

    最近看到一个不错的接口管理的工具,分享一下 RAP ppt介绍:http://www.imooc.com/video/11060 RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校 ...

  2. php使用PHPexcel类读取excel文件(循环读取每个单元格的数据)

    error_reporting(E_ALL); date_default_timezone_set('Asia/ShangHai'); include_once('Classes/PHPExcel/I ...

  3. 语义分割的简单指南 A Simple Guide to Semantic Segmentation

    语义分割是将标签分配给图像中的每个像素的过程.这与分类形成鲜明对比,其中单个标签被分配给整个图片.语义分段将同一类的多个对象视为单个实体.另一方面,实例分段将同一类的多个对象视为不同的单个对象(或实例 ...

  4. Ansible--常用模块使用(2)

    Ansible常用模块 cron 模块 用途:cron模块⽤于设置定时任务,也⽤于管理定时任务中的环境变量使用方法: [root@ansible ~]# ansible-doc -s cron - n ...

  5. springboot 学习之路 20 (整合RabbitMQ)

    整合RabbitMQ: 我的操作系统是window7 ,所以在整合ribbotMQ之前需要先安装rabbitMq服务:安装步骤请参考:window下安装RabbitMQ  这个详细介绍了安装步骤,请按 ...

  6. 3.7Python数据处理篇之Numpy系列(七)---Numpy的统计函数

    目录 目录 前言 (一)函数一览表 (二)统计函数1 (三)统计函数2 目录 前言 具体我们来学Numpy的统计函数 (一)函数一览表 调用方式:np.* .sum(a) 对数组a求和 .mean(a ...

  7. Orcale日期函数to_date(),to_char()

    日期转换的两个函数分别是to_date()和to_char(),to_date() 作用将字符类型按一定格式转化为日期类型, to_char() 将日期转按一定格式换成字符类型 其中当时间需要精确的时 ...

  8. NSObject

    一.前言 该博客里面的方法均是看着苹果官方的API来解释的,一般都是常用的方法如有问题,请指出. 二.简介: 该类集成的是其本身,大家可以从任何一个类去向上追溯,都会发现最终的父类都是NSObject ...

  9. Alpha版本 - 用户反馈

    Alpha版本 - 用户反馈 使用情况 (前天发出了内测apk给身边的人小范围使用,到目前共有31名用户使用过产品) 新增用户数: 用户事件数: Bug反馈 登录/注册出现"无响应" ...

  10. Linux 下安装 Tomcat 出现拒绝访问的情况

    此外也无法调用 java -version 查看版本号 ./shutdown 时:提示找不到 JDK 的某个文件夹 ./startup 时:却启动正常 访问 8080 端口时,显示拒绝访问 解决方法: ...