React是如何渲染元素和组件的

元素的概念

元素是构成 React 应用的最小单位。元素描述了你在屏幕上想看到的内容。React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

将一个元素渲染为 DOM

假设我们的 HTML 文件有一个根元素 <div>该节点内的所有内容都将由 React DOM 管理

<div id="root"></div>

注意: React 构建的应用通常只有单一的根 DOM 节点,如果你想要将 React 集成进一个已有搭建好的应用,那么你可以在应用中包含任意多的独立根 DOM 节点。

将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render():

// 已有的应用
<div> 
<h1>Existing App</h1> 
<div id="root1"></div> 
<div id="root2"></div>
</div>
import ReactDOM from 'react-dom';
// React 组件
const element1 = <h1>Hello, world</h1>;
const element2 = <h1>Hello, world</h1>;
ReactDOM.render(element1, document.getElementById('root1'));
ReactDOM.render(element2, document.getElementById('root2'));

更新已渲染的元素

React 元素是不可变对象。一旦创建,React 元素的子元素和属性就不能直接更改

时钟组件示例:

    class Clock extends React.Component {constructor(props) {super(props);this.state = {date: new Date()};}componentDidMount() {this.timerID = setInterval(//组件挂载到 DOM 后,每一秒调用一次tick()方法() => this.tick(),1000);}componentWillUnmount() {clearInterval(this.timerID);}tick() {this.setState({//使用 `setState` 方法更新组件的状态,将 `date` 属性更新为当前时间的 `Date` 对象 date: new Date()});}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.date.toLocaleTimeString()}.</h2></div>);}}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<Clock />);

代码分析:

  1. 首先,我们定义了一个名为 Clock 的类,它继承了 React.Component
  2. 在构造函数中,我们初始化了组件的状态(state),其中 date 属性被设置为当前时间的 Date 对象。
  3. 在组件挂载到 DOM 后,componentDidMount 生命周期方法会被调用。在这个方法中,我们创建了一个定时器,并将定时器的 ID 存储在组件的实例变量 timerID 中。定时器每秒触发一次 tick 方法。
  4. tick 方法被调用时,它会使用 setState 方法更新组件的状态,将 date 属性更新为当前时间的 Date 对象。通过调用 setState,React 会检测到状态的变化,并触发重新渲染。
  5. render 方法定义了组件的渲染逻辑。它返回一个包含两个 <h1><h2> 元素的 <div>。其中 <h1> 显示 “Hello, world!”,而 <h2> 则显示当前时间,通过访问组件的状态中的 date 属性来获取时间,并使用 toLocaleTimeString 方法将其格式化为本地时间字符串。
  6. 最后,我们使用 ReactDOM.createRoot 创建一个根节点,并将 <Clock /> 组件传递给 root.render 方法,以将组件渲染到指定的根节点上。

这里的生命周期 componentWillUnmount()和 componentDidMount()以及State后面会讲到

注意: 在实践中,大多数 React 应用只会调用一次 ReactDOM.render()。

函数组件与 class 组件

React定义组件的方式主要有两种,函数组件(目前主流)和class组件

函数式组件示例:

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元素。这类组件被称为“函数组件”

class组件示例

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

使用自定义组件方式:

const element = <Welcome name="zayyo" />;

当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”。在上面的示例中name的值“zayyo”就是组件中的的props.name获取到的值。

过程:

  • 我们调用 root.render() 函数,并传入 <Welcome name="zayyo" /> 作为参数。
  • React 调用 Welcome 组件,并将 {name: 'zayyo'} 作为 props 值传入。
  • Welcome 组件将 <h1>Hello, zayyo</h1> 元素作为返回值。
  • React DOM 将 DOM 高效地更新为 <h1>Hello, zayyo</h1>

注意: 组件名称必须以大写字母开头。因为React 会将以小写字母开头的组件视为原生 DOM 标签。例如,<div /> 代表 HTML 的 div 标签,而 <Welcome /> 则代表一个组件,并且需在作用域内使用 Welcome

组合组件

我们可以使用多个自定义组件来组成我们的页面。

在下面的代码示例中,将会渲染三个 Welcome 组件,分别显示 “Hello, z”、“Hello, A” 和 “Hello, Y”:

    function Welcome(props) {return <h1>Hello, {props.name}</h1>;}function App() {return (<div><Welcome name="z" />      <Welcome name="A" />     <Welcome name="Y" />    </div>);}ReactDOM.render(<App />, document.getElementById('root'));

在上面,我们使用 <Welcome name="z" /><Welcome name="A" /><Welcome name="Y" /> 分别创建了三个 Welcome 组件的实例,并将它们放置在 <div> 中。

每个 Welcome 组件都会接收不同的 name 属性值,通过 props.name 来访问该属性值,并在组件内部的 <h1> 元素中渲染相应的问候消息。

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

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

相关文章

鸿蒙 Web组件的生命周期(api10、11、12)

概述 开发者可以使用Web组件加载本地或者在线网页。 Web组件提供了丰富的组件生命周期回调接口&#xff0c;通过这些回调接口&#xff0c;开发者可以感知Web组件的生命周期状态变化&#xff0c;进行相关的业务处理。 Web组件的状态主要包括&#xff1a;Controller绑定到Web组…

力扣SQL50 平均售价 ifnull SUM 连表查询

Problem: 1251. 平均售价 &#x1f468;‍&#x1f3eb; 参考题解&#xff08;题目数据增强&#xff0c;代码只能过90%的点&#xff09; &#x1f37b; AC code SELECT p.product_id, ROUND(ifnull(SUM(units * price) / SUM(units), 0),2) AS average_price FROM prices a…

初学51单片机之数字秒表

不同数据类型间的相互转换 在C语言中&#xff0c;不同数据类型之间是可以混合运算的。当表达式中的数据类型不一致时&#xff0c;首先转换为同一类型&#xff0c;然后再进行计算。C语言有两种方式实现类型转换。一是自动类型转换&#xff0c;另外一种是强制类型转换。 转换的主…

2024GLEE生活暨教育(上海)博览会,8月20-22日,国家会展中心(上海)

2024GLEE生活暨教育(上海)博览会将于8月20-22日在中国国家会展中心&#xff08;上海&#xff09;举行&#xff0c;博览会总面积近万平方米&#xff0c;设有美好生活和教育产品两大主力展区&#xff0c;全面覆盖婴幼儿、学龄前、小学、初中、高中、大学、中年、老年各个年龄段的…

数据库复习重点

第一章通常涵盖数据库系统的基础概念&#xff0c;这里将概述数据库、数据库系统、数据库管理系统的基本概念&#xff0c;数据库系统的三级模式结构&#xff0c;以及数据模型的三要素。 基本概念 数据&#xff08;Data&#xff09;&#xff1a; 数据是描述事物的符号记录&#…

Nvidia Isaac Sim搭建仿真环境 入门教程 2024(4)

Nvidia Isaac Sim 入门教程 2024 版权信息 Copyright 2023-2024 Herman YeAuromix. All rights reserved.This course and all of its associated content, including but not limited to text, images, videos, and any other materials, are protected by copyright law. …

银行数仓项目实战(六)--基础层(完成存款的明细表---宽表)

文章目录 熟悉业务模型设计梳理映射关系加工宽表测试提交 FDM基础层&#xff1a;根据主题&#xff08;需求&#xff09;&#xff0c;将源数据加工集成&#xff0c;形成业务明细表–宽表 熟悉业务 当我们的工作来到基础层&#xff0c;我们首先要做的是跟甲方沟通&#xff0c;要…

未完工数据和系统数据对比分析

select * FROM ( select a.db_close_systime AS a_db_close_systime, -- 订单关闭时间 u.db_close_systime AS u_db_close_systime, -- 订单关闭时间 COALESCE( u.db_close_systime,a.db_close_systime) AS db_close_systime_coalesced ,-- 取非空值的订单关闭时间 a.i…

Harmony设计模式-单例模式

Harmony设计模式-单例模式 前言 软件设计模式&#xff08;[Design pattern](https://baike.baidu.com/item/Design pattern/10186718?fromModulelemma_inlink)&#xff09;&#xff0c;又称设计模式&#xff0c;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经…

动态网页制作技术

动态网页制作技术是一种利用脚本语言、数据库和服务器端程序来生成动态内容的网页技术。以下是常用的动态网页制作技术&#xff1a; 1.PHP&#xff1a;PHP是一种广泛使用的服务器端脚本语言&#xff0c;可以嵌入到HTML中&#xff0c;用于生成动态网页内容。它可以与各种数据库进…

使用Kafka框架发送和接收消息(Java示例)

Kafka是一个开源的分布式流处理平台&#xff0c;以其在大数据和实时处理领域的广泛应用而闻名。以下是Kafka的关键特性以及它在消息传输方面的优势&#xff1a; 高吞吐量与低延迟&#xff1a;Kafka能够每秒处理数百万条消息&#xff0c;具有极低的延迟&#xff0c;这使得它非常…

前端调试技巧

1、利用console打印日志 2、利用debugger关键字&#xff0c;浏览器f12调用到方法debugger处会断点住&#xff0c;可以利用浏览器调试工具查看变量 a.监视表达式可以添加想要观察的变量 b.调用堆栈可以观察方法调用链 3、xhr断点 请求地址包含v1.0/banner_theme/pagelist&a…

Spacedrive:一个开源的跨平台文件管理器

文章目录 Spacedrive简介1.1 什么是Spacedrive&#xff1f;1.2 Spacedrive的核心功能1.3 Spacedrive的开发状态 Spacedrive的功能与特点2.1 文件存储在哪里&#xff1f;2.2 与传统文件管理器的区别2.3 与云存储服务的区别2.4 跨设备文件管理2.5 文件分类与过滤 Spacedrive的技术…

中科大和字节AI视频生成CamTrol杀疯了!运动可控,效果惊艳!

大家好&#xff0c;我是阿潘&#xff0c;今年堪称视频生成的爆发的一年&#xff0c;sora 2024年2月15日发布&#xff0c;让全世界都震惊了。openai 有一次成为了行业标杆。从生成的效果来看&#xff0c;比起以往抽象的生成结果&#xff0c;有了巨大的提升。 今天和大家分享中科…

DevExpress WPF中文教程:Grid - 如何将更改发布到数据库(设计时)?

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

c++设计模式之一创建型模式

1、创建型模式&#xff08;常见的设计模式&#xff09; Factory 模式&#xff08;工厂模式&#xff0c;被实例化的子类&#xff09; 在面向对象系统设计中经常可以遇到以下的两类问题&#xff1a; 下面是第一类问题和代码示例&#xff1a;我们经常会抽象出一些类的公共接口以…

1547. 切棍子的最小成本

Problem: 1547. 切棍子的最小成本 文章目录 思路解题方法复杂度Code 思路 本题的目标是在给定长度为 n 的棍子上&#xff0c;根据预设的切割点 cuts 进行切割&#xff0c;使得总的切割成本最小。每次切割的成本等于切割后两段棍子的长度之和。由于切割点可以任意选择&#xff0…

Spring Boot框架的原理及应用详解(六)

本系列文章简介&#xff1a; 在当今的软件开发世界中&#xff0c;快速迭代、高效开发以及易于维护成为了开发者们不断追求的目标。Spring Boot作为Spring框架的一个子项目&#xff0c;自其诞生以来就凭借其“约定大于配置”的理念和自动配置的特性&#xff0c;迅速在Java开发社…

密码学及其应用——公钥加密与公钥基础设施(PKI)

1. 引言 在当今的数字世界中&#xff0c;安全通信变得尤为重要。我们每天发送和接收的大量电子邮件和其他类型的在线消息都可能包含敏感信息。为了保护这些信息&#xff0c;我们可以利用公钥加密和公钥基础设施&#xff08;PKI&#xff09;。本文将通过安全邮件交换的示例&…

解决数据丢失问题的MacOS 数据恢复方法

每个人都经历过 Mac 硬盘或 USB 驱动器、数码相机、SD/存储卡等数据丢失的情况。我们中的一些人可能认为已删除或格式化的数据将永远丢失&#xff0c;因此就此作罢。对于 macOS 用户来说&#xff0c;当文件被删除时&#xff0c;垃圾箱已被清空&#xff0c;他们可能不知道如何恢…