首先我们在一个 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. Ajax的实现及使用-zepto

    正文 之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于 ...

  2. Linux 学习笔记之超详细基础linux命令 Part 7

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 6----------------- ...

  3. HBuilder开发ios App离线打包启动画面无效的解决方法

    其中容易忽略的一点是manifest.json文件.plus下加入如下配置: "splashscreen": { "autoclose": false,/*如果 ...

  4. Button's four click events

    第一种:内部类的方式 1 package com.example.phonedialer; 2 3 import com.example.click2.R; 4 5 import android.ne ...

  5. SQL Server 临时表和表变量系列之选择篇

    原文地址:https://yq.aliyun.com/articles/69187 摘要: # 摘要 通过前面的三篇系列文章,我们对临时表和表变量的概念.对比和认知误区已经有了非常全面的认识.其实,我 ...

  6. [Mac] How do I move a window whose title bar is off-screen?

    有时窗口一不小心拖出视野外了,此时无法移动窗口.如何还原? 有人遇到相似问题,已有解决方法: 方法就是,菜单 Windows - Zoom  这时窗口会还原.

  7. weblogic CVE-2018-2628漏洞利用工具

    weblogic CVE-2018-2628漏洞利用 漏洞环境: Windows2018R2 weblogic10.3.6 漏洞利用过程: 搭建好存在CVE-2018-2628漏洞的weblogic平 ...

  8. 【Linux】磁盘的分区与命名规则

    1,Startx:切换到图形界面 2,Pwd:查看当前目录 3,Whoami:查看当前用户 4,Cd:   1. 命令格式: cd [目录名]       2. 命令功能: 切换当前目录至dirNam ...

  9. ccf--20140303--命令行选项

    本题是常规思路,这里要注意:1)带参命令没有参数和参数错误时终止2)命令不存在时终止3)命令都是错误的,不以—开头. 题目和代码如下: 问题描述 试题编号: 201403-3 试题名称: 命令行选项 ...

  10. 【17】有关python面向对象编程的提高【多继承、多态、类属性、动态添加与限制添加属性与方法、@property】

    一.多继承 案例1:小孩继承自爸爸,妈妈.在程序入口模块再创建实例调用执行 #father模块 class Father(object): def __init__(self,money): self ...