React 回忆录(三)使用 React 渲染界面

Hi 各位,欢迎来到 React 回忆录!? 在上一章中,我介绍了 React 框架的“五大特点”:虚拟DOM,组件化,声明式代码,单向数据流和纯粹的 JavaScript 语法。在本章中,我们将谈到 React 是如何渲染 UI 的,以及在这个过程中所表现出的 组件化 思想。

01. React 渲染界面的方式

在 React 等大型前端框架出现之前,我们渲染 UI 元素的方式是使用字符串模板。而在 React 中,我们通过使用JavaScript 对象来渲染 UI 元素。

在上一章我们提到过,React 为了节省频繁操作 DOM 所耗费的前端性能,提出了虚拟DOM的概念,在这里我们所创建的 JavaScript 对象即是用来描述“页面看起来是什么样子”的虚拟DOM节点。“虚拟DOM”是如何最终转化为“真实DOM“并展现在浏览器中的呢?这里面的复杂工作(操作 DOM 树,添加节点)由 React 完成。

让我们先看看如何通过一个 JavaScript 对象创建一个虚拟的DOM节点(即 React 元素):

// 为了创建一个 React 元素,我们需要使用 React.createElement API
const element = React.createElement('h1',{className: 'greeting'},'Hello, world!'
);

该 API 最终会返回一个大致如下格式的 JavaScript 对象:

const element = {type: 'h1',props: {className: 'greeting',children: 'Hello, world'}
};

React 会为这个 JavaScript 对象在生成的虚拟DOM树上找到一席之地,并最终和浏览器中的真实 DOM 树合并,渲染视图。

然而在实际开发中,你几乎不会使用到 React.createElement API,而是像下方这样创建 React 元素:

const element = (<h1 className="greeting">Hello, world!</h1>
);

这种创建方式是通过一种叫做 JSX 的 JavaScript 语法扩展实现的,而对于 JSX 的概念在这里我就不再进一步阐述了,你大可以将它理解为一种简洁,高效创建 React 元素的语法糖,用来更加优雅的构建整个应用的虚拟 DOM。

值得一提的是,JSX 并不是 React 框架的一部分(这源于 React 代码组织上尽量分而治之的哲学),因此 React 并不像负责合并虚拟DOM与真实DOM那样,负责将由 JSX 语法写成的代码转化为使用了 React.createElement API 的 JavaScript 对象。

那谁来做这件事呢?答案是 Babel。而通常,我们使用 webpack 来打包我们的 JavaScript代码并输送至 Babel 进行转译。现在你明白了,为什么 ReactwebpackBabel总是像连体婴儿一样出现在一起。

到目前为止,我们已经知道如何创建 React 元素了,但实际上我们只是“创建“而已,离元素被真正展现在浏览器上,还查了关键的一步”渲染“。

在这里我们加快脚步,想要将之前创建好的 React 元素渲染出来,我们需要使用如下代码:

<div id="root"></div>const element = <h1>Hello, world</h1>;// 使用 ReactDOM.render API
ReactDOM.render(element,document.getElementById('root')
);

没错,id 为 root 的 DOM元素将会成为整个虚拟DOM树的根节点。至此,我们已经掌握了把 React 元素转换为虚拟DOM节点,再在浏览器上渲染出该元素的整个流程。然而,只是能够使用 React 渲染视觉元素还远远谈不上发挥了 React 的价值。别忘了 React 是作为大型前端框架存在的(虽然相较于其他大型前端框架,它的组件并不完备),React 的真正价值在于:使用 React 元素简洁,高效的实现各种复杂的业务逻辑

如何做到这一点呢?答案是使用React 组件

02. React 组件

React 组件不仅可以使我们有能力打包一堆视觉元素而且还可以使我们有能力打包一系列相对应的交互行为。可以说:React 组件是构成 React 应用的基石

那什么是 React 组件呢?你可以想象 React 组件就像是一个工厂,它接收一些列被称为属性的物料,最终生产(返回)React 元素/组件。

让我们换个角度说,React 组件本质上就是一个 JavaScript 函数,它接收一系列参数,返回 React 元素/组件。让我们看看它是被如何书写的:

import React form 'react'
import ReactDOM form 'react-dom'function Button(props) {return <button>{props.buttonName}</button>
}

看到了吗,React 组件完全符合之前我们提到过的组件化思想,接收参数,返回UI元素。

以组件化的角度思考构建 React 应用是一个非常棒的想法,因为组件化就意味着模块化与可重用性。组件类就像是一个工厂生产组件的实例,这些组件类完全符合”单一响应原则“与”DOT“原则。

在 React 的官方文档中,大量的 React API 是关于组件的。因此组件是 React 非常重要的一个概念,从本质上说,组件是 React 给予我们的主要的封装单元。通过一个个组件,我们能像搭积木一样快速搭起一个拥有复杂交互逻辑和视觉界面的大型应用,并且应用中的每个视觉单元又拥有着非常清晰的责任。

希望到这里你能体会到 React 在构建大型应用时的价值了,它使我们能够关注于应用中的一小部分,而不会无意中影响到应用的其余部分(即每个组件都符合了”高内聚,低耦合“的原则)。使用 React,我们更容易写出清晰,优雅的代码。

03. 小结

最后,让我们再次总结在 React 中使用组件渲染界面的两点优势:

  1. 易于重用:我们可以在任何时间地点调用一个组件;
  2. 方便定制:通过给予组件不同属性,我们可以获得不同的 UI 元素;

通过这一章的介绍,希望各位有所收获,如果有任何问题或建议,也欢迎各位在评论区内留言,下一章见 ?


PS:?如果你对该专题感兴趣,别忘了订阅本专栏,确保及时收到更新通知。记得点击下方?的各个按钮,让我知道你认可我的付出,这是激励我持续产出的动力和源泉 ?。

下个章节见 ? ? ?!

转载于:https://www.cnblogs.com/libinfs/p/9394497.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux java javac版本_linux下java 和 javac version 不一致问题

centos下我新安装了个jdk1.7的版本 &#xff0c;vi profile 之后 java -version 是新版本&#xff0c;想在看看javac -version 发现还是1.6的之前安装了1.6的 那好咱就卸载他查找Java 版本信息rpm -qa|grep java返回如下信息 xorg-x11-drv-savage-2.1.1-5.fc6avahi-glib-0.6.16…

electron 打包_Vue3+Electron整合方式

教程源码&#xff1a;nofacer/vue3-electron​github.com之前写过一篇文章Vue结合Electron构建跨平台应用&#xff08;TDD&#xff09;。当时的方法后来发现了一个问题&#xff0c;就是打包后的应用拿到其他机子上没法用&#xff0c;原因在于index.html的地址是个绝对路径&…

全国计算机等级考试题库二级C操作题100套(第37套)

第37套&#xff1a; 给定程序中&#xff0c;函数fun的功能是:在形参ss所指字符串数组中&#xff0c;查找含有形参substr所指子串的所有字符串并输出&#xff0c;若没找到则输出相应信息。ss所指字符串数组中共有N个字符串&#xff0c;且串长小于M。程序中库函数strstr(s1, s2)…

ABAP编程中对内表的定义,后面接一个OCCURS (n)是代表什么意思。

对内表的定义&#xff0c;我只说下有没occurs的区别。**DATA: BEGIN OF itab OCCURS 0,* matnr LIKE mara-matnr,* maktx LIKE makt-maktx,* END OF itab.**SELECT * FROM makt INTO CORRESPONDING FIELDS OF TABLE itab .**LOOP AT itab.* WRITE:/* itab-matnr,* itab-m…

Linux按照时间顺序列出文件

按照递增时间顺序列出所有文件 ls -ltr -l表示列出长串数据&#xff0c;-t表示按照时间顺序&#xff0c;-r表示将排序的结果反向输出 按照时间递减的顺序列出所有文件 ls -lt 转载于:https://www.cnblogs.com/yongjieShi/p/9395932.html

java释放list_Java中List集合中subList的坑

参考博主http://blog.csdn.net/xuweilinjijis/article/details/9037635先看List接口subList方法的javadocThe returned list is backed by this list, so non-structural* changes in the returned list are reflected in this list, and vice-versa.* The returned list suppo…

全国计算机等级考试题库二级C操作题100套(第38套)

第38套&#xff1a; 函数fun的功能是&#xff1a;把形参a所指数组中的奇数按原顺序依次存放到a[0]、 a[1]、a[2]、……中&#xff0c;把偶数从数组中删除&#xff0c;奇数个数通过函数值返回。例如&#xff1a;若a所指数组中的数据最初排列为&#xff1a;9、1、4、2、3、6、5、…

RestKit

2019独角兽企业重金招聘Python工程师标准>>> Restkit 是一个开源的 objective-c 框架&#xff0c;允许在 iOS 和 Mac OS X 的 Objective-C 中与 RESTful Web 服务进行交互&#xff0c;包含简单的 HTTP request/response API &#xff0c;带有强大的对象映射系统用于…

全国计算机等级考试题库二级C操作题100套(第39套)

第39套&#xff1a; 给定程序中&#xff0c;函数fun的功能是:在形参ss所指字符串数组中&#xff0c;删除所有串长超过k的字符串&#xff0c;函数返回所剩字符串的个数。ss所指字符串数组中共有N个字符串&#xff0c;且串长小于M。 请在程序的下划线处填入正确的内容并把下划线…

java判断是否包含张三_c# 数组 字符串 C#中判断字符串中包含某个字符

Nodejs windows的安装0.下载地址: http://nodejs-org.qiniudn.com/ https://nodejs.org/download/ https://nodejs.org/en/ 1.基本就是一路N ...跨平台网络抓包工具-Microsoft Message AnalyzerMicrosoft Message Analyzer (MMA 2013)是微软最受欢迎的Netmon的最新版本. 在Netm…

python能开发游戏吗_python可以开发游戏吗,python能开发游戏吗

Q2&#xff1a;用python能制作游戏吗 能&#xff0c;但不适合。 用锤子能造汽车吗&#xff1f; 谁也没法说不能吧&#xff1f;地球上也有很多汽车&#xff0c;是用锤子造出来的。。。。但一般来说&#xff0c;还是用工业机器人更合适对吗&#xff1f; 比较大型的&#xff0c;使…

golang log日志

写入日志文件 func main() {file, err : os.Create("test.log")if err ! nil {log.Fatalln("fail to create test.log file!")}logger : log.New(file, "", log.Llongfile)// 写入文件log格式&#xff1a;/Users/zhou/go/src/zhouTest/test.go:2…

[Andriod官方训练教程]保存数据之保存键-值对的集合

原文地址&#xff1a;https://developer.android.com/training/basics/data-storage/shared-preferences.html ------------------------------------------------------------------------------------------------------------------------------- If you have a relatively …

全国计算机等级考试题库二级C操作题100套(第40套)

第40套&#xff1a; 给定程序中已建立一个带有头结点的单向链表&#xff0c;链表中的各结点按结点数据域中的数据递增有序链接。函数fun的功能是&#xff1a;把形参x的值放入一个新结点并插入到链表中&#xff0c;插入后各结点数据域的值仍保持递增有序。 请在程序的下划线处填…

java里面有控制器吗_mvc中 控制器部分可以使用Javabean完成吗?为什么?

模型-视图-控制器(MVC)是80年代Smalltalk-80出现的一种软件设计模式&#xff0c;现在已经被广泛的使用。1、模型(Model)模型是应用程序的主体部分。模型表示业务数据&#xff0c;或者业务逻辑.2、视图(View)视图是应用程序中用户界面相关的部分&#xff0c;是用户看到并与之交互…

python时间计算_python计算两日期之间工作日时长

1. 原因&#xff1a;使用dateutil的rrule时&#xff0c;计算速度比较慢 def axx(): from dateutil import rrule received_time datetime.datetime.strptime(2019-04-21 23:00:00, %Y-%m-%d %H:%M:%S) complete_time datetime.datetime.strptime(2019-04-22 01:00:00, %Y-%m-…

QSlider QLCDNumber 最常用的函数和 信号槽 (以后用到在加)

QLCDNumber : 函数: 槽&#xff1a; display(int); QSlider: 函数: setMinimum(int); setMaximum(int); 信号&#xff1a; valueChanged(int); 转载于:https://www.cnblogs.com/lc-cnblong/archive/2013/02/06/2907680.html

【进阶技术】一篇文章搞掂:Spring高级编程

本文篇幅较长&#xff0c;建议合理利用右上角目录进行查看&#xff08;如果没有目录请刷新&#xff09;。 本文基于《Spring5高级编程》一书进行总结和扩展&#xff0c;大家也可以自行研读此书。 十一、任务调度 任务调度主要由三部分组成 &#xff1a; 任务&#xff1a;即需要…

全国计算机等级考试题库二级C操作题100套(第41套)

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…