为了便于后续理解,我们再来回顾和总结前面几个章节的内容

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 —— 元素渲染的更多相关文章

  1. react基础语法(一)元素渲染和基础语法规则

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  3. react 也就这么回事 01 —— React 元素的创建和渲染

    React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...

  4. react学习(二)--元素渲染

    元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...

  5. React文档(八)条件渲染

    在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...

  6. React-将元素渲染到 DOM 中

    首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>,在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称之为 “根” ...

  7. react如何通过shouldComponentUpdate来减少重复渲染

    转自:https://segmentfault.com/a/1190000016494335 在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件 ...

  8. dotnet 读 WPF 源代码笔记 布局时 Arrange 如何影响元素渲染坐标

    大家是否好奇,在 WPF 里面,对 UIElement 重写 OnRender 方法进行渲染的内容,是如何受到上层容器控件的布局而进行坐标偏移.如有两个放入到 StackPanel 的自定义 UIEl ...

  9. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

随机推荐

  1. day 12 default后面是否还可以跟case

    (1).有以下程序: #include<stdio.h> void main(){ int case,float printF; printf("输入2个数\n"): ...

  2. git文件管理与索引,深入理解工作原理

    前言 这一夜,注定是个不眠之夜,小白和cangls的对话已然进入了白热化.小白孜孜不倦的咨询关于git方面的知识,对索引越来越感兴趣.小白以前存的小电影文件可以进行版本的对比,探索哪个版本画质更好. ...

  3. C# app.config 保存和读取例子

    保存: Configuration config = ConfigurationManager.OpenExeConfiguration(Application.ExecutablePath); if ...

  4. golang中使用kafka客户端sarama消费时需要注意的一个点

    kafka消费者的Consume()方法会阻塞: 当Consume()方法返回err时,不确定继续消费有没有问题:保险起见,退出进程,然后重新初始化. 当Consume()方法返回nil是,是可以继续 ...

  5. C++类对象大小问题(一)

    先看如下代码: #include<iostream> using namespace std; class Base1 { public: }; class Base2 { public: ...

  6. golang中打印格式化的一些占位符

    package main import ( "fmt" ) func main() { var a byte = 255 // byte = uint8 rune = int32 ...

  7. DNS主从同步部署

    DNS 主从同步原理 主从同步:主每次修改配置文件需要修改一下序列号,主从同步主要 根据序列号的变化. 从DNS:从可以单独修改,主从不会报错.但从修改后,主端同步给从后 从端修改数据会丢失 主从原理 ...

  8. Redis 源码简洁剖析 03 - Dict Hash 基础

    Redis Hash 源码 Redis Hash 数据结构 Redis rehash 原理 为什么要 rehash? Redis dict 数据结构 Redis rehash 过程 什么时候触发 re ...

  9. maven 中的工程依赖和层级依赖?

    一.什么是工程依赖? 思考问题?1.1一旦开始分模块开发的时候,之前的所有包都会被拆分成一个一个的项目 model mapper service ... 其实mapper需要model的支持,怎么解决 ...

  10. 做开源界的MATLAB,PyMiner 需要更多热爱开源的你加入

    MATLAB 和 Mathematica.Maple 并称为三大数学软件.它在数学类科技应用软件中在数值计算方面首屈一指.MATLAB 可以进行矩阵运算.绘制函数和数据.实现算法.创建用户界面.连接其 ...