首先我们在一个 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. tfs 禁止多人签出

    好久没用tfs了,忘了怎么设置了,记录下 编辑----->高级

  2. recovery 升级过程LED灯闪烁

    Android设备在进入recovery升级的过程,我们在屏幕上面可以看到升级的机器人动画,以及升级的进度显示.这仅限于有屏幕的设备,比如平板PAD,电视TV等,对与没有屏幕的盒子BOX,那么在不接入 ...

  3. JavaScript高级特性-实现继承的七种方式

    声明和约定: 在C++和Java中,我们可以通过关键字class来声明一个类,在JavaScript中没有这个关键字,但我们知道可以通过new一个function创建对象,这个function类似C+ ...

  4. k-vim安装及The ycmd server SHUT DOWN (restart with ':YcmRestartServer')这种错误的解决方法

    vim配置 下载地址:https://github.com/wklken/k-vim 安装步骤: 1. clone 到本地 git clone https://github.com/wklken/k- ...

  5. Nginx:413 Request Entity Too Large

    现象:在 Post 文件的时候遇到413 错误 :Request Entity Too Large: 原因:Nginx 限制了上传文件的大小,需在Nginx中修改/增加允许的最大文件大小: 操作:编辑 ...

  6. 反射的作用—>实现框架的功能

    框架与框架要解决的核心问题 我们做房子卖给用户住,用于用户自己安装门窗和空调,我做的房子就是框架,用户需要使用我的框架,把门窗插入进我提供的框架中.框架与工具类有区别,工具类被用户的类调用,而框架则是 ...

  7. mobx 入门

    observable(可观察的数据) 数组 import { observable, isArrayLike } from 'mobx' const arr = observable(['a', 'b ...

  8. Department and Student

    软工结对作业之二 本人ID:杨光海天 031502634 队友(大佬)ID:陈涵 031502106 GitHub链接 BIN文件地址 代码文件 整体概况 模型建立 学生类,属性包括: * 1)编号 ...

  9. php5.4之分布式缓存memcache(windows7下安装配置)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qq1355541448/article/details/36663203 使用理由:就是为了频繁查询 ...

  10. mvn 的 provided 以及 test等等 还有git团队开发技巧

    mvn 的 provided 以及 test等等 还有git团队开发技巧