React文档(四)渲染元素
元素是React应用的最小单位。
一个React元素描述了你在屏幕上所看到的东西:
const element = <h1>Hello, world</h1>;
和浏览器页面中的DOM元素不同,React元素是普通的对象,创建起来很方便。React DOM负责处理根据React元素来更新DOM。
笔记:
你也许会困惑元素和另外一个广为人知的概念“组件”有什么区别。我们会在下一章节介绍组件。组件由元素组成,我们建议你看完本章节再看下一章节。
渲染React元素到DOM
让我们假设有一个<div>元素在你的HTML页面里:
<div id="root"></div>
我们把这个div叫做根节点因为在这个div里的所有元素都由React DOM管理。
如果只使用React创建应用通常只有一个根节点。如果你将React整合进一个已经存在的应用,可能会存在很多彼此隔离的根节点。
将一个React元素渲染到根节点里,通过ReactDOM.render():
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
它会在页面上显示 “Hello World”。
更新已经渲染的元素
React元素是不可改变的。一旦你创建了一个元素,你就不能修改它的属性或者子元素。一个元素就好像一部电影中的一帧画面:它代表在一个确切时间点下的UI。
根据目前我们已知的知识,唯一可以更新UI的方法就是创建一个新的元素,然后将它传递给ReactDOM.render()。
看看这个时钟的例子:
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
} setInterval(tick, 1000);
它利用setInterval()定时器的回调每一秒都会调用一次ReactDOM.render()来更新DOM。
笔记:
在实际使用的时候,大多数React应用只调用一次ReactDOM.render()一次。下一章节我们会学习这些代码如何被包裹在有状态的组件之中。
建议不要跳章节学习因为知识点彼此关联。
React只更新必要的东西
React DOM会将元素和子元素与之前的状态比较,然后只更新必要的部分使DOM变为所希望的状态。
你可以通过检查浏览器开发者工具来验证刚才那个例子:
根据我们以往的经验,将界面视为一个个特定时刻的固定内容(就像一帧一帧的动画),而不是随时处于变化之中(而不是处于变化中的一整段动画),将会有利于我们理清开发思路,减少各种bugs。
React文档(四)渲染元素的更多相关文章
- React文档(十三)思考React
在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...
- 中文翻译:pjsip文档(四)之ICE Session的使用方法
1:pjsip教程(一)之PJNATH简介 2:pjsip教程(二)之ICE穿越打洞:Interactive Connectivity Establishment简介 3:pjsip教程(三)之ICE ...
- dom4j解析xml报"文档中根元素后面的标记格式必须正确"
今天,在写个批量启动报盘机的自动化应用,为了简化起见,将配置信息存储在xml中,格式如下: <?xml version="1.0" encoding="UTF-8& ...
- 在DHTML中把整个文档的各个元素作为对象处理的技术是:()
在DHTML中把整个文档的各个元素作为对象处理的技术是:() A.HTML B.CSS C.DOM D.Script(脚本语言) 解答:C DOM:文档对象模型
- idea导入项目报错:文档中根元素前面的标记必须格式正确
今天从git上面导入项目之后,由于是上周刚刚提交过的,本地也没有什么修改,于是就从gitlab上面直接下载下来了.可是项目启动时候,报错了... 文档中根元素前面的标记必须格式正确 想想 原来是上次提 ...
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 解决Spring的java项目打包后执行出现“无法读取方案文档...“、“原因为 1) 无法找到文档; 2) 无法读取文档; 3) 文档的根元素不是...”问题
问题 一个用Spring建的java项目,在Eclipse或idea中运行正常,为什么打包后运行出现如下错误呢? 2019/07/10/19:04:07 WARN [main] org.springf ...
- XML 文档包含 XML 元素。
XML 文档包含 XML 元素. 什么是 XML 元素? XML 元素指的是从(且包括)开始标签直到(且包括)结束标签的部分. 元素可包含其他元素.文本或者两者的混合物.元素也可以拥有属性. < ...
- React文档(二十四)高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- React文档(八)条件渲染
在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...
随机推荐
- Trimmomatic过滤Illumina低质量序列
1. 下载安装 直接去官网下载二进制软件,解压后的trimmomatic-0.36.jar即为我们需要的软件 官网: http://www.usadellab.org/cms/index.php?pa ...
- P3605 [USACO17JAN]Promotion Counting晋升者计数
思路 线段树合并的板子.. 和子节点合并之后在值域线段树上查询即可 代码 #include <cstdio> #include <algorithm> #include < ...
- Even Odds (java)
从1到n的奇数,从1到n之间的偶数,排列在一起,找到第k个数 Input 输入包含 n and k (1 ≤ k ≤ n ≤ 1012). Please, do not use the %lld sp ...
- [jsp & thymeleaf] - jsp和thymeleaf的共存解析
做项目时因为有些老jsp还需要测试用到,所以之前的thymeleaf也需要保持,配置如下: https://github.com/deadzq/jsp-thymeleaf 等空余时间在做详解吧!
- 2019年前端面试题 | CSS篇 (更新于4月15日)
虽说刷面试题有走捷径之嫌,但我发现,对于我这样没有工作经历的人来说,其实是拓展自己实战技能和加深知识理解的一个好机会. 分享出来,也希望大家不要背完了事,正经的去细细琢磨各种原由. 本篇是一个题目合集 ...
- 项目Alpha冲刺--2/10
项目Alpha冲刺--2/10 1.团队信息 团队名称:基于云的胜利冲锋队 成员信息 队员学号 队员姓名 个人博客地址 备注 221500201 孙文慈 https://www.cnblogs.com ...
- 【五】php 面向对象
面向对象 概念:按类进行分类,类是表示彼此之间可能互不相同,但是具有一些共同点的对象集合 多态性:不同的类对同一操作可以有不同的行为 继承:允许我们使用子类在类之间创建层次关系 类 关键字:class ...
- Springboot Thymeleaf 发邮件 将html内容展示在邮件内容中
- Python day2_int以及string的常见方法1_笔记
Python中,主要的基本类型有:数字(int型).字符串(string型).列表(list型).元祖(tuple型).字典(direct型).布尔值(boolean型) 1.int型 1.强转int ...
- Cordova 混合开发
详细的教程在以下博客 https://blog.csdn.net/csdn100861/article/details/78585333