react学习(二)--元素渲染
- 元素用来描述你在屏幕上看到的内容:
const element = <h1>Hello, world</h1>;
与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
将元素渲染到 DOM 中
- 首先我们在一个 HTML 页面中添加一个
id="root"
的<div>
:<div id="root"></div>
在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称之为 “根” DOM 节点。
我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点。
要将React元素渲染到根DOM节点中,我们通过把它们都传递给
ReactDOM.render()
的方法来将其渲染到页面上:const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));更新元素渲染
- React 元素都是immutable 不可变的。当元素被创建之后,你是无法改变其内容或属性的。一个元素就好像是动画里的一帧,它代表应用界面在某一时间点的样子。
- 根据我们现阶段了解的有关 React 知识,更新界面的唯一办法是创建一个新的元素,然后将它传入
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()
. React 只会更新必要的部分
- React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。
- 即便我们每秒都创建了一个描述整个UI树的新元素,React DOM 也只会更新渲染文本节点中发生变化的内容。
- 根据我们以往的经验,将界面视为一个个特定时刻的固定内容(就像一帧一帧的动画),而不是随时处于变化之中(而不是处于变化中的一整段动画),将会有利于我们理清开发思路,减少各种bug。
修改于2019.7.25
react学习(二)--元素渲染的更多相关文章
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- react学习二 生命周期
转自:https://www.cnblogs.com/gdsblog/p/7348375.html react 中compent getDefaultProps object getDefaultPr ...
- robot framework学习二-----元素定位
文章摘自:https://www.cnblogs.com/fnng/p/3901391.html 不要误认为Robot framework 只是个web UI测试工具,更正确的理解Robot fram ...
- React 学习二 组件
React的一个最大的特点就是组件化的开发模式.今天就来试一下: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- react学习(二)之通信篇
react性能提升原理:虚拟DOM react把真是的DOM tree,转化成virtual DOM,每次数据更新后,重新计算virtual DOM并与上一次的作对比,然后对发生改变的部分进行批量更新 ...
- React 学习(二) ---- props验证与默认属性
在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...
- 【react学习二】create-react-app 接入antd 并按需加载组件
1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
随机推荐
- 并发编程-concurrent指南-ReadWriteLock-ReentrantReadWriteLock(可重入读写锁)
几个线程都申请读锁,都能获取: import java.util.concurrent.TimeUnit; import java.util.concurrent.locks.ReentrantRea ...
- Linux命令学习-wget命令
Linux系统中的wget是一个下载文件的工具,它用在命令行下,通过它可以方便的下载文件. 我们以百度的logo图片链接地址为例:https://www.baidu.com/img/bd_logo.p ...
- 跟我学SpringCloud | 终篇:文章汇总(持续更新)
SpringCloud系列教程 | 终篇:文章汇总(持续更新) 我为什么这些文章?一是巩固自己的知识,二是希望有更加开放和与人分享的心态,三是接受各位大神的批评指教,有任何问题可以联系我: inwsy ...
- windows中实现python,redis服务自动重启(任务计划程序+bat脚本)
需求:银行电脑无法自动开机,只能 通过 应用相关服务每天自动重启的方式实现 服务更新并且防止服务假死,内存过大 等情况 相关工具:win10系统中,使用windows自带的任务计划程序 和 bat脚本 ...
- Q&A-20180128
Orleans与Akka对比,为什么选用Orleans? 答: Akka对参与开发的人员要求更高一些,普遍是专家级别,Orleans框架进一步抽象了一层,结合C#语言特性,能普遍降低开发难度. 下面是 ...
- 【题解】Unit Fraction Partition-C++
Description给出数字P,Q,A,N,代表将分数P/Q分解成至多N个分数之和,这些分数的分子全为1,且分母的乘积不超过A.例如当输入数据为2 3 120 3时,我们可以得到以下几种分法: In ...
- Java+eclipse技巧小总结
首先是打开Content Assistant,自动代码补全 Window -> Preferences -> Java -> Editor -> Content Assist, ...
- 数组指针&&指针数组
数组指针: 定义 int (*p)[n]; 占用内存中一个指针的存储空间 ()优先级高,首先说明p是一个指针,指向一个int型的一维数组,故名数组(的)指针.指向的一维数组的长度是n,也可以 ...
- JavaScript函数及闭包
前面一片文章讲到过一点函数,了解到每声明一个函数就会产生一个作用域.而外面的作用域访问不了里面的作用域(把里面的变量和函数隐藏起来),而里面的可以访问到外面的.对于隐藏变量和函数是一个非常有用的技术. ...
- France beat Croatia 4-2 in World Cup final
France won the World Cup for the second time by beating Croatia 4-2 in a tremendous ...