首先我们在一个 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. 每篇半小时1天入门MongoDB——1. MongoDB介绍和安装

    目录:ASP.NET MVC企业级实战目录 MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据 ...

  2. ArcGIS Portal与Adapter安装问题

    1. WIN2008R2 80端口被system占用解决办法 修改注册表HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\HTTP右侧的star ...

  3. python 定时修改数据库

    当需要定时修改数据库时,一般我们都选择起一个定时进程去改库.如果将这种定时任务写入业务中,写成一个接口呢,定时进程显得有些不太合适?如果需要定时修改100次数据库,常规做法会启动100个进程,虽然这种 ...

  4. python 遇到的小坑

    由于前端资源紧缺,我的后端系统迟迟等不来它的前端,没办法只好自己来写了.从html,js入门学起,然后照着vue.js的官方教程写了几个实例,从github上clone了一个不错的vue.js模版,填 ...

  5. JHipster技术简介

    本文简单介绍Jhipster是什么,为什么用Jhipster,怎么用Jhipster. WHAT - 技术栈 JHipster是什么 JHipster是一个开发平台,用于生成,开发,部署Spring ...

  6. 【PAT】B1081 检查密码(15 分)

    水题 #include<cstdio> #include<string.h> #include<ctype.h> #include<algorithm> ...

  7. 4.2Python数据处理篇之Matplotlib系列(二)---plt.scatter()散点图

    目录 目录 前言 (一)散点图的基础知识 (二)相关性的举例 ==1.正相关== ==1.负相关== ==1.不相关== (三)实战项目以一股票的分析 目录 前言 散点图是用于观测数据的相关性的,有正 ...

  8. IDEA设置注释的颜色

    IDEA默认的灰色注释确实让人看不清,但如果把灰色调成黑色又和代码的颜色相同了,所以,不如给注释添加上绿色的背景,又护眼又容易分辨 新版本的IDEA打开Settings——Editot——Color ...

  9. Deepin系统手动安装oracle jdk8详细教程

    Deepin系统手动安装oracle jdk8详细教程 oracle官网下载jdk压缩包,使用 sudo tar -zxf jdk***解压文件,我放在在了home/diy/java/jdk路径下. ...

  10. [ADS]An installation support file could not be installed

    ADS:ARM Developer Suits 错误:An installation support file could not be installed 描述: 之前安装了一个不能用的ADS的版本 ...