react 也就这么回事 04 —— 元素渲染
为了便于后续理解,我们再来回顾和总结前面几个章节的内容
1 元素及其创建
元素是构成 React 应用的最小砖块。
元素描述了你在屏幕上想看到的内容。
const element = <h1>Hello, world</h1>;
与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
我们用 React.createElement
来创建 React 元素(语法上还可以使用其语法糖 JSX)
2 将一个元素渲染为DOM
想要将一个 React 元素渲染到指定的 DOM 节点中,只需把它们一起传入 ReactDOM.render()
:
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
3 更新UI
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()
。
4 React 只更新它需要更新的部分
React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。
例如前面计时器的例子,尽管每一秒我们都会新建一个描述整个 UI 树的元素,React DOM 只会更新实际改变了的内容,也就是例子中的文本节点。
公众号【前端嘛】
react 也就这么回事 04 —— 元素渲染的更多相关文章
- react基础语法(一)元素渲染和基础语法规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- react 也就这么回事 01 —— React 元素的创建和渲染
React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...
- react学习(二)--元素渲染
元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...
- React文档(八)条件渲染
在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...
- React-将元素渲染到 DOM 中
首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>,在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称之为 “根” ...
- react如何通过shouldComponentUpdate来减少重复渲染
转自:https://segmentfault.com/a/1190000016494335 在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件 ...
- dotnet 读 WPF 源代码笔记 布局时 Arrange 如何影响元素渲染坐标
大家是否好奇,在 WPF 里面,对 UIElement 重写 OnRender 方法进行渲染的内容,是如何受到上层容器控件的布局而进行坐标偏移.如有两个放入到 StackPanel 的自定义 UIEl ...
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
随机推荐
- day 12 default后面是否还可以跟case
(1).有以下程序: #include<stdio.h> void main(){ int case,float printF; printf("输入2个数\n"): ...
- git文件管理与索引,深入理解工作原理
前言 这一夜,注定是个不眠之夜,小白和cangls的对话已然进入了白热化.小白孜孜不倦的咨询关于git方面的知识,对索引越来越感兴趣.小白以前存的小电影文件可以进行版本的对比,探索哪个版本画质更好. ...
- C# app.config 保存和读取例子
保存: Configuration config = ConfigurationManager.OpenExeConfiguration(Application.ExecutablePath); if ...
- golang中使用kafka客户端sarama消费时需要注意的一个点
kafka消费者的Consume()方法会阻塞: 当Consume()方法返回err时,不确定继续消费有没有问题:保险起见,退出进程,然后重新初始化. 当Consume()方法返回nil是,是可以继续 ...
- C++类对象大小问题(一)
先看如下代码: #include<iostream> using namespace std; class Base1 { public: }; class Base2 { public: ...
- golang中打印格式化的一些占位符
package main import ( "fmt" ) func main() { var a byte = 255 // byte = uint8 rune = int32 ...
- DNS主从同步部署
DNS 主从同步原理 主从同步:主每次修改配置文件需要修改一下序列号,主从同步主要 根据序列号的变化. 从DNS:从可以单独修改,主从不会报错.但从修改后,主端同步给从后 从端修改数据会丢失 主从原理 ...
- Redis 源码简洁剖析 03 - Dict Hash 基础
Redis Hash 源码 Redis Hash 数据结构 Redis rehash 原理 为什么要 rehash? Redis dict 数据结构 Redis rehash 过程 什么时候触发 re ...
- maven 中的工程依赖和层级依赖?
一.什么是工程依赖? 思考问题?1.1一旦开始分模块开发的时候,之前的所有包都会被拆分成一个一个的项目 model mapper service ... 其实mapper需要model的支持,怎么解决 ...
- 做开源界的MATLAB,PyMiner 需要更多热爱开源的你加入
MATLAB 和 Mathematica.Maple 并称为三大数学软件.它在数学类科技应用软件中在数值计算方面首屈一指.MATLAB 可以进行矩阵运算.绘制函数和数据.实现算法.创建用户界面.连接其 ...