【React】《React 学习手册 (第2版) 》笔记-Chapter4-React 运行机制

四、React 运行机制
  1. 使用 React 构建应用几乎离不开 JSX。这是一种基于标签的 JavaScript 句法,看起来很像 HTML。

  2. 为了在浏览器中使用 React,我们要引入两个库:React 和 ReactDOM。前者用于创建视图,后者则具体负责在浏览器中渲染 UI。这两个库都可以通过 unpkg CDN 引用(链接见下述代码片段)。

    <!DOCTYPE html>
    <html><head><meta charset="utf-8" /><title>React Samples</title></head><body><!-- 目标容器 --><div id="root"></div><!-- React 和 ReactDOM 库(开发版本)--><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script>// 纯 React 和 JavaScript 代码</script></body>
    </html>
    
    • 这是在浏览器中使用 React 需要做的最少工作。
    • 你可以把 JavaScript 代码放在单独的文件中,不过在页面中加载时必须放到 React 后面。
    • 为了在浏览器控制台中看到所有错误消息和警告,我们使用的是 React 的开发版本。你也可以使用 react.production.min.js 和 react-dom.production.min.js,换成供生产环境使用的简化版本,只是看不到警告消息了。
  3. 简单来说,HTML 是一系列指令,让浏览器构建 DOM。浏览器加载 HTML 并渲染用户页面时,构成 HTML 文档的元素变成 DOM 元素。

    • 在 HTML 中,元素之间呈现一种层次结构。
    • 过去,网站由相互独立的 HTML 界面组成。用户访问这些页面时,浏览器请求并加载各 HTML 文档。AJAX 的发明引入了单页应用的概念。由于浏览器可以通过 AJAX 请求并加载少量数据之后,整个 Web 应该便可以精简成一个页面,依靠 JavaScript 更新用户界面。
    • 在单页应用中,浏览器只在开始时加载一个 HTML 文档。在用户浏览网站的过程中,始终待在同一个页面。用户不断与应用产生交互,JavaScript 则不断销毁和创建新的用户页面。这给人的感觉像是从一个页面跳转到另一个页面,但其实你仍然在相同的 HTML 页面上,背后繁重的工作都交给 JavaScript 了。
  4. DOM API 是一系列对象,供 JavaScript 与浏览器交互,修改 DOM。如果你曾用过 document.createElement 或 document.appendChild,那你就用过 DOM API。

    • React 是代我们更新浏览器 DOM 的一个库。
  5. 浏览器 DOM 由 DOM 元素组成,类似地,React DOM 由 React 元素组成。DOM 元素和 React 元素看着类似,其实区别很大。React 元素是对真正的 DOM 元素的描述。换句话说,React 元素是如何创建浏览器 DOM 的命令。

  6. 我们可以使用 React.createElement 创建一个表示 h1 的 React 元素:

    <!DOCTYPE html>
    <html>
    <head><meta charset="utf-8"><title>React Elements</title>
    </head>
    <body><!-- Target Container -->
    <div id="react-container"></div><!-- React Library & React DOM-->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script>const dish = React.createElement("h1",{id: "recipe-0", 'data-type': "title"},"Baked Salmon")ReactDOM.render(dish,document.getElementById('react-container'))console.log('dish', dish)</script></body>
    </html>
    
    • 第一个参数指定想创建的元素的类型。
    • 第二个参数设定元素的属性。
    • 第三个参数指定元素的子节点,即插入起始和结束标签之间的节点(这里只插入了一些文本)。
    • 渲染时,React 将把这个元素转换成真正的 DOM 元素。
    • React 组件其实就是 JavaScript 字面量,告知 React 如何构建 DOM 元素。
    • 在控制台中输出这个元素,你会看到如下内容:
      { $$typeof: Symbol(React.element), type: "h1", key: null, ref: null, props: {id: 'recipe-0', data-type: 'title', children: 'Baked Salmon'}, _owner: null, _store: {}, 
      }
      
      • 这是一个 React 元素的结构,其中一些字段是供 React 使用的,包括 _owner、_store 和 $$typeof。key 和 ref 字段对 React 元素很重要。
      • React 元素的 type 属性告诉 React 要创建的是什么类型的 HTML 或 SVG 元素。props 属性表示构建一个 DOM 元素所需的数据和子元素。children 属性则表示嵌套显示在元素内的文本。
      • 这里给出的是 React.createElement 返回的对象。我们其实不会自己动手创建 React 元素,而是使用 React.createElement 函数。
    • ReactDOM 提供了在浏览器中渲染 React 元素所需的工具。渲染所需的 reader 方法在 ReactDOM 中。
    • React 元素,包括它的子元素,使用 ReactDOM.reader 在 DOM 中渲染。我们想渲染的元素通过第一个参数传入,第二参数是目标节点,即指明在哪里渲染元素。
  7. 在 DOM 中与渲染元素有关的一切功能都在 ReactDOM 包中。

  8. 在 React 16 之前的版本中,只能在 DOM 中渲染一个元素。而现在,还可以渲染数组。

    const dish = React.createElement("h1", null, "Baked Salmon"};
    const dessert = React.createElement("h2", null, "Coconut Cream Pie"};
    ReactDOM.render([dish, dessert], document.getElementById('root'));
    
    • 上述代码在 root 容器中把两个元素渲染为同辈元素。
  9. React 使用 props.children 渲染子元素。可以把其他 React 元素渲染为子元素,创建一个元素树。

    const dish = React.createElement("section", {id: "baked-salmon"},React.createElement("h1", null, "Baked Salmon"),React.createElement("ul", {"className": "ingredients"},React.createElement("li", null, "1 lb Salmon"),React.createElement("li", null, "1 cup Pine Nuts"),React.createElement("li", null, "2 cups Butter Lettuce"),React.createElement("li", null, "1 Yellow Squash"),React.createElement("li", null, "1/2 cup Olive Oil"),React.createElement("li", null, "3 cloves of Garlic")),React.createElement("section", {"className": "instructions"},React.createElement("h2", null, "Cooking Instructions"),React.createElement("p", null, "Preheat the oven to 350 degrees."),React.createElement("p", null, "Spread the olive oil around a glass baking dish."),React.createElement("p", null, "Add the salmon, Garlic, and pine..."),React.createElement("p", null, "Bake for 15 minutes."),React.createElement("p", null, "Add the Butternut Squash and put..."),React.createElement("p", null, "Remove from oven and let cool for 15 ...."))
    )ReactDOM.render(dish, document.getElementById('react-container'))console.log('dish element', dish)
    
    • 传给 createElement 函数的各个额外参数就是一个子元素。React 将创建一个由子元素构成的数组,把 props.children 的值设为这个数组。
    • 审查得到的 React 元素,你会看到每个列表项目 li 都是一个 React 元素,出现在 props.children 名下的数组里。
    • 有 class 属性的 HTML 元素,在 React 中使用的是 className,而不是 class。这是因为 class 是 JavaScript 的保留字,所以不得不使用 class Name 定义 HTML 元素的 class 属性。
  10. React 应用是由一系列 React 元素构成的树状结构,一切都发端于一个根元素。

  11. React 的主要优势是能把数据与 UI 元素分开。由于 React 本身是 JavaScript,我们可以借助 JavaScript 逻辑构建 React 组件树。

    const items = ["1 lb Salmon","1 cup Pine Nuts","2 cups Butter Lettuce","1 Yellow Squash","1/2 cup Olive Oil","3 cloves of Garlic"
    ]const ingredients = React.createElement("ul",{ className: "ingredients" },// items.map((ingredient, i) => React.createElement("li", null, ingredient))items.map((ingredient, i) => React.createElement("li", { key: i }, ingredient))
    )ReactDOM.render(ingredients,document.getElementById('react-container')
    )console.log('ingredients', ingredients)
    
    • "React.createElement(“li”, null, ingredient))"时,控制台会发出一个警告。通过迭代数组构建一组子元素时,React 预期每个元素都有 key 属性。由了 key 属性,React 才能高效率地更新 DOM。为每个列表项目元素添加一个独一无二的 key 属性后,这个警告便会消失。
  12. 在 React 中,组件(component)方便重用相同的结构,只需在结构中填充不同的数据即可。

    • 使用 React 构建用户界面时,应该尽量考虑把元素分解成可重用的片段。
    • 例子:
      function IngredientsList({ items }) {return React.createElement("ul", {className: "ingredients"},items.map((ingredient, i) =>React.createElement("li", { key: i }, ingredient)));
      }
      
  13. 在出现函数组件之前,创建组件有几种其他方式。

    • createClass:2013年,React 刚开源时,创建组件使用 createClass。
      const IngredientsList = React.createClass({displayName: "IngredientsList",render() {return React.createElement("ul", {className: "ingredients"},this.props.items.map((ingredient, i) =>React.createElement("li", { key: i }, ingredient)));}
      });
      
      • 使用 createClass 创建的组件需要一个 render() 方法,指明返回及渲染什么 React 元素。组件背后的思想还是一样的,即描述一些可重用的 UI 供渲染。
      • 在 React 15.5(2017年4月)中,React 开始在使用 createClass 的地方发出警告。在 React 16(2017年9月)中,React.createClass 正式被弃用,移到了单独的包 create-react-class 中。
    • 类组件:ES2015 为 JavaScript 添加类句法后,React 引入了一种创建 React 组件的新方法。React.Component API 支持使用类句法创建组件实列:
      class IngredientsList extends React.Component {render() {return React.createElement("ul", {className: "ingredients"},this.props.items.map((ingredient, i) =>React.createElement("li", { key: i }, ingredient)))}
      }const items = ["1 lb Salmon","1 cup Pine Nuts","2 cups Butter Lettuce","1 Yellow Squash","1/2 cup Olive Oil","3 cloves of Garlic"
      ]ReactDOM.render(React.createElement(IngredientsList, {items}, null),document.getElementById('react-container')
      )
      
      • 现在依然可以使用类句法创建 React 组件,但是笔者要提前告诉你,React.Component 即将被弃用。

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

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

相关文章

Java版+ SaaS应用+接口技术RESTful API 技术开发的智慧医院HIS系统源码 专注医院管理系统研发 支持二开

Java版 SaaS应用接口技术RESTful API WebSocket WebService技术开发的智慧医院HIS系统源码 专注医院管理系统研发 支持二开 医院住院管理系统&#xff08;Hospital Information System简称HIS&#xff09;是一门医学、信息、管理、计算机等多种学科为一体的边缘科学&#xff…

servlet数量太多,搞个轻量级springmvc

这两天用jspservletMySQL开发了一个企业网站&#xff0c;后台和前台都有&#xff0c;功能已经实现了&#xff0c;现在总结发现&#xff0c;servlet是真的多&#xff0c;我这个系统有7个表&#xff0c;后台实现一遍增删改查&#xff0c;就得有28个servlet&#xff0c;而且还有前…

LabVIEW与Matlab联合编程的途径及比较

​ LabVIEW和Matlab联合编程可以通过多种途径实现&#xff0c;包括调用Matlab脚本节点、使用LabVIEW MathScript RT模块、利用ActiveX和COM接口&#xff0c;以及通过文件读写实现数据交换。每种方法都有其独特的优势和适用场景。本文将详细比较这些方法&#xff0c;帮助开发者…

给文件夹加密的最简单方法

安当TDE透明加密针对文件夹数据加密的保护方案主要包括以下几个方面&#xff1a; 1. 透明加密机制&#xff1a; 用户无需关心数据的加密和解密过程&#xff0c;操作文件夹时就像处理普通数据一样。加密和解密操作在后台自动进行&#xff0c;对用户和应用程序透明。 2. 高性能加…

python文件操作(Windows路径,内置os库)+ 正则表达式(语法与re库)

文章目录 前言1 Windows路径(1)绝对路径 (Absolute Path)(2)相对路径 (Relative Path)一、python文件的读写操作1 读写(1)打开文件file = open(test1.txt,r,encoding=utf-8) --- 打开文件(2)读取文件内容content = file.read() --- 读取全部内容,返回字符串lines = re…

【QT5】<知识点> QT常用知识(更新中)

目录 一、更改文本颜色和格式 二、QT容器类 三、字符串与整数、浮点数之间的转换 四、QString常用功能 五、SpinBox的属性介绍 六、滑动、滚动、进度条和表盘LCD 七、时间、日期、定时器 一、更改文本颜色和格式 动态设置字体粗体&#xff1a;QFont对象的setBold方法动态…

java第二十四课 —— super 关键字 | 方法重写

super 关键字 基本介绍 super 代表父类的引用&#xff0c;用于访问父类的属性、方法、构造器。 基本语法 访问父类的属性&#xff0c;但不能访问父类的 private 属性。 super.属性名; 访问父类的方法&#xff0c;不能访问父类的 private 方法。 super.方法名(参数列表); 访…

面试题——Redis

★1.简述一下缓存穿透,缓存击穿,缓存雪崩 ? 缓存穿透:大量恶意请求一个不存在的数据,使得压力绕过Redis缓存层打到数据库,造成数据库瘫痪 处理:①设置黑名单,维护一个可能存在也可能不存在的黑名单数据列表,对请求进行过滤(简单高效) ②布隆过滤器,会出现误删,且相对麻烦(不…

车载网络安全指南 生产、运行和服务阶段(九)

返回总目录->返回总目录<- 目录 一、现场检测 二、事件响应 三、事件跟踪管理 一、现场检测 具有联网功能的汽车电子产品宜具备网络安全监测能力。当汽车或相关基础设施被公众使用时,可实施现场监测,以便通过监测日常事件获得有关网络安全的威胁预警,根据预定程序…

【Qt 6.3基础教程 02】 Qt Creator入门与界面概览

文章目录 前言开始之前启动Qt Creator主要区域介绍 创建一个新项目界面概览菜单栏工具栏模式选择器编辑区项目管理区侧边栏底部面板 常用功能代码编写与自动补全UI设计构建与运行版本控制插件和扩展 总结 前言 Qt Creator是一个跨平台的集成开发环境&#xff08;IDE&#xff0…

数据仓库数据集成开源工具

数据集成是数据仓库建设的重要环节&#xff0c;开源工具在这一领域提供了许多强大的解决方案。以下是一些常见的开源数据集成工具&#xff0c;它们各自有独特的功能和特点&#xff1a; 1. Talend Open Studio for Data Integration 概述&#xff1a;Talend Open Studio 是一款…

C++设计模式---外观模式

1、介绍 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它为子系统中的一组接口提供一个统一的、高层次的接口&#xff0c;使得子系统更容易使用。这种模式隐藏了子系统的复杂性&#xff0c;并为客户端提供了一个简单的接口。 外观模式的结…

node环境常见问题

文章目录 node运行环境常见问题1. node环境不支持ES6的import解决2. node版本太高&#xff0c;导致gitbook报错 node运行环境常见问题 1. node环境不支持ES6的import解决 在我学习ES6的import语法的时候&#xff0c;在自己电脑的node环境下模拟运行import&#xff0c;发现nod…

「C系列」C 位域

文章目录 一、C 位域位域的定义位域的使用注意事项位域示例代码 二、C 位域应用场景1. 访问硬件寄存器2. 节省内存空间3. 网络通信协议 三、相关链接 一、C 位域 在C语言中&#xff0c;位域&#xff08;bit-field&#xff09;是结构体&#xff08;struct&#xff09;中的一个特…

个人网站制作 Part 27 添加网站导航搜索功能 | Web开发项目添加页面缓存

文章目录 &#x1f680; 添加网站导航搜索功能&#x1f528;使用搜索服务&#x1f527;步骤 1: 选择搜索服务&#x1f527;步骤 2: 注册Algolia账户&#x1f527;步骤 3: 获取Algolia搜索配置 使用Vue.js&#x1f527;步骤 4: 安装Algolia搜索库&#x1f527;步骤 5: 创建搜索组…

C++中的指针和引用的区别

在C中&#xff0c;指针和引用都是用于间接访问内存位置的工具&#xff0c;但它们之间存在一些重要的区别。以下是它们之间的一些主要区别&#xff1a; 定义和初始化&#xff1a; 指针是一个变量&#xff0c;其值为另一个变量的地址。在定义指针时&#xff0c;需要为其指定类型。…

DNS域名解析----分离解析、多域名解析、父域与子域

1 理论部分 1.1 分离解析 DNS的分离解析&#xff0c;是指根据不同的客户端提供不同的域名解析记录。来自不同地址的客户机请求解析同一域名时&#xff0c;为其提供不同的解析结果。也就是内外网客户请求访问相同的域名时&#xff0c;能解析出不同的IP地址&#xff0c;实现负载…

Vue3 打包:优化与部署

Vue3 打包:优化与部署 Vue.js 是目前最流行的前端框架之一,以其轻量级、高性能和易用性著称。Vue3 是 Vue.js 的最新版本,带来了许多新特性和性能改进。在开发 Vue3 应用程序时,打包是一个关键步骤,它涉及到将源代码转换成可在浏览器中运行的代码。本文将详细介绍 Vue3 打…

【机器学习】机器学习中的人工神经元模型有哪些?

线性神经元 线性神经元&#xff08;Linear Neuron&#xff09;是一种基本的人工神经元模型&#xff0c;特点是其输出是输入的线性组合。线性神经元是神经网络中最简单的一种形式&#xff0c;适用于处理线性关系的问题。数学模型如下&#xff0c; y w ⋅ x b ∑ i 1 n w i x…

springboot原理篇-配置优先级

springboot原理篇-配置优先级&#xff08;一&#xff09; springboot项目一个支持三种配置文件 application.propertiesapplication.ymlapplication.yaml 其中&#xff0c;优先级的顺序是&#xff1a; application.properties > application.yml > application.yaml 也…