React-将元素渲染到 DOM 中
首先我们在一个 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 中的更多相关文章
- React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber,fiber不解读这个过程也不知道)
一.ReactDOM.render 都干啥了 我们在写react的时候,最后一步肯定是 ReactDOM.render( <div> <Home name="home&qu ...
- js中迭代元素特性与DOM中的DocumentFragment类型 笔记
JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- react学习(二)--元素渲染
元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...
- react 也就这么回事 04 —— 元素渲染
为了便于后续理解,我们再来回顾和总结前面几个章节的内容 1 元素及其创建 元素是构成 React 应用的最小砖块. 元素描述了你在屏幕上想看到的内容. const element = <h1&g ...
- React入门-JSX和虚拟dom
1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...
- dotnet 读 WPF 源代码笔记 布局时 Arrange 如何影响元素渲染坐标
大家是否好奇,在 WPF 里面,对 UIElement 重写 OnRender 方法进行渲染的内容,是如何受到上层容器控件的布局而进行坐标偏移.如有两个放入到 StackPanel 的自定义 UIEl ...
- 从后台获取的数据渲染到页面中的dom操作
很多情况下页面dom都是从后台拼接字符串添加生成的新的dom元素,在编辑器中不能看到,只能通过检查看到页面的dom结构,但是这时候会发生一个问题,就是如果使用jQuery无法进行dom操作,事件和方法 ...
- react基础语法(一)元素渲染和基础语法规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- spark (java API) 在Intellij IDEA中开发并运行
概述:Spark 程序开发,调试和运行,intellij idea开发Spark java程序. 分两部分,第一部分基于intellij idea开发Spark实例程序并在intellij IDEA中 ...
- Oracle 关闭数据库(未使用Oracle Restart)
Oracle关闭数据库(未使用Oracle Restart) by:授客 QQ:1033553122 SHUTDOWN [选项] 选项说明: NORMAL-语句执行后,不允许创建新的连接:等待所有当前 ...
- sql server系统表和视图相关的语句
一.系统表 数据字典的详细信息请查SQL SERVER BOL,这里仅列出一部分. 1.1.sysservers 1.查看所有本地服务器及链接服务器 select * from master..sys ...
- node.js 基础学习
node.js 是一个 javaScript 运行环境,可以让 js 运行在服务端. 在 nodejs 环境下,可以运行 javascript 基本语法,可以在nodejs 中执行一些无法在浏览器端执 ...
- 【PAT】B1060 爱丁顿数(25 分)
逻辑问题,对我来说还是挺有难度的,一开始想不通 我输入数据并以数据为下标,数据出现次数为内容存储 然后从后遍历计算所有大于当前下标的元素出现的次数 最后遍历一遍确定是否为爱丁顿数,如果大于当前已经找到 ...
- Ubuntu 16.04 LTS 降级安装GCC 4.8
转载自https://www.linuxidc.com/Linux/2017-03/142299.htm Ubuntu 16.04 LTS 降级安装GCC 4.8 [日期:2017-03-28] 来源 ...
- Python解析器
当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件. 由于整个Python语言从规范到解释器都是开源的 ...
- Java对XML文件解析方式之一_SAX
SAX(org.xml.sax) Simple API for XML,以事件的形式通知程序,对Xml进行解析. SAX技术的介绍:SAX是一种以事件驱动的XML api,由它定义的事件流可以指定 ...
- python第五十三课——time模块
1.time.datatime.calendar模块的引入讲解(重视) Unix时间戳(timestamp):返回的是数值类型数据(float值), 概念:记录了从1970年00点00分00秒至今的秒 ...
- luogu P3809 【模板】后缀排序
嘟嘟嘟 今天学了一个后缀数组,还是挺好理解的. 因为我不会基数排序,所以只会\(O(n \log ^ 2 n)\)的sort版. 首先,后缀数组就是把该字符串的所有后缀按字典序排序得到的一个数组.注意 ...