react学习笔记_02-元素渲染
const element = <h1>Hello, world</h1>;
上面的内容代表react中的一个元素，元素是构成 React 应用的最小砖块。
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
1.如何将一个元素渲染为 DOM？
假设你的 HTML 文件某处有一个 <div>如下：
<div id="root"></div>
我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。仅使用 React 构建的应用通常只有单一的根 DOM 节点。
如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。
想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()；(上一章节我们已经这么进行了)
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
2.更新已渲染的元素
React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。
根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。
案例：计时器的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<script type="text/babel"> function tick(){
const element = (
<div>
<h1>下午好</h1>
<h2>现在是,{new Date().toLocaleTimeString()}</h2>
</div>
)
ReactDOM.render(
element,
document.getElementById('tick')
);
}
setInterval(tick,1000);
</script>
<div id="tick"> </div>
</body>
</html>
注意：
在实践中，大多数 React 应用只会调用一次 ReactDOM.render()；
3.React 只更新它需要更新的部分：
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。可以用开发者工具查看计时器案例的更新状态。尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，
react学习笔记_02-元素渲染的更多相关文章
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记（一）- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
随机推荐
- zabbix入门之添加主机
添加主机的方法有两种:手动添加.自动发现 前提是:在被监控主机中安装zabbix-agent.zabbix-sender组件,并配置好启动服务. 手动添加: 自动发现: 这里等待1分钟左右即可发现主机 ...
- 灰常牛逼的命令行备忘录 navi
灰常牛逼的命令行备忘录 navi 1. navi命令简介 1.1 navi命令简介 命令行是非常高效的工具,但一个很常见的现象是,很多命令行过一段时间就容易忘.举个栗子,如果我们常用 git 命令行管 ...
- NIO摘录
NIO,一种基于通道和缓冲区的I/O方式,可以使用native函数库直接分配堆外内存,然后通过一个存储在java 堆的DirectBteBuffer对象作为这块内存的引用进行操作,避免了再java堆和 ...
- github托管代码
安装git客户端 github是服务端,要想在自己电脑上使用git我们还需要一个git客户端, windows用户请下载 http://msysgit.github.com/ mac用户请下载 htt ...
- [BZOJ5428][九省联考2018]双木棋
去年觉得高不可攀的题啊... 貌似就很沙茶了QAQ 直接状压每一行是多少然后合法状态是LIS状态数极少所以随便dp一下就好了啊... 注意初值啥的得赋对才行QAQ 我菜死了 //Love and Fr ...
- CF240E Road Repairs
最小树形图+输出方案 输出方案的话记录一下哪些边 然后记得最后拆环要倒着拆就行了
- 一次Linux服务器空间满的随笔解决记录
昨天突然无法上传文件到服务器上的,FTP工具总是到99%就卡住了.查了一下说可能是服务器满了. 赶紧用 df -h 命令查看空间使用情况.果然100%了. 想想上次查询才不到50%,怎么突然就满了了呢 ...
- Sublime Text3添加C++编译与运行
安装MinGW 1.安装MinGW ,其安装方法一直下一步,安装完后点Continue会出现一个窗口,在Basic Setup下标记所有包,然后在菜单里点"Apply Changes&quo ...
- 【Http2.0】Http2.0
序言 目前HTTP/2.0(简称h2)已经在广泛使用(截止2018年8月根据Alexa流行度排名的头部1千万网站中,h2占比约29%,https://w3techs.com/technologies/ ...
- DELPHI FMX IOS模拟器调试时出现No SDKs could be found
解决办法: 在OSX里打开XCODE,点击XCODE菜单->Perferences->Locations在Commond Line Tools选择XCODE