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

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. kafka入门(采坑)笔记

    前言 之前在工作和学习过程中也会有记笔记的习惯,但是没有发布出来,也因最近各方面的瓶颈急需突破和提升,所以还是要很积极的融入大环境大生态中,好废话不多说,说下这次遇到的问题 第一步启动zk 根据教程安 ...

  2. Redis作缓存

    缓存策略三要素:缓存命中率   缓存更新策略  最大缓存容量.衡量一个缓存方案的好坏标准是:缓存命中率.缓存命中率越高,缓存方法设计的越好. 三者之间的关系为:当缓存到达最大的缓存容量时,会触发缓存更 ...

  3. C# 在PDF文档中应用多种不同字体

    在PDF文档中,可绘制不同字体样式.不同语言的文字,可通过使用Standard字体.TrueType字体.CJK字体或者自定义(私有)等字体类型.下面通过C#程序代码来展示如何实现使用以上类型的字体来 ...

  4. vue文档1-VSCode介绍

    开发工具VSCode: Vue的开发工具用的是VSCode(Visual Studio Code),这款开发工具是微软官方出品,开源,免费,并且功能相当强大,使用者很多,插件相当丰富,是Vue开发的不 ...

  5. zabbix表达式

    system.cpu.load[all,avg1].min(10)}>2 load连续10分钟>2 system.cpu.load[percpu,avg1].count(#3,0.6,&q ...

  6. linux虚拟机快照

    目录 一:虚拟机快照 一:虚拟机快照 1.什么是快照? 快照可保存虚拟机在特定时刻的状态和数据. 状态包括虚拟机的电源状态(列如,打开电源,关闭电源,挂起). 数据包括组成虚拟机的所有文件,这包括磁盘 ...

  7. kubernetes之Pod水平自动伸缩(HPA)

    https://k8smeetup.github.io/docs/tasks/run-application/horizontal-pod-autoscale-walkthrough/ Horizon ...

  8. redis与集群实用操作笔记

    redis哨兵 部署方式 redis配置 首先需要区分的是主从redis,主机也就是用来写的机器,从机是从来读的,为主机分担压力,与集群不同的是redis哨兵不可通过从机写入数据同步到主机,但是也可以 ...

  9. Swift循环的介绍

    循环的介绍 在开发中经常会需要循环 常见的循环有:for/while/do while. 这里我们只介绍for/while,因为for/while最常见 for循环的写法 最常规写法 // 传统写法 ...

  10. 推荐一款仿iPhone桌面的代码. ___王朋.

    Demo:https://files.cnblogs.com/files/sixindev/LxGridView-master.zip 这是作者原来的效果图,很多东西还需要慢慢学习.作者用的很多类,根 ...