极智开发 | React 函数式组件和类式组件 - 码农知识堂

极智开发 | React 函数式组件和类式组件
欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享

大家好，我是极智视界，本文介绍一下 React 函数式组件和类式组件。

React 是 组件化的 的 JS 库，组件化 也是 React 的核心思想。使用 React 可以构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。那么什么是组件呢？ 组件是用来实现局部功能效果的代码和资源的集合，包括 html / css / js/ image 等，组件的作用是 简化代码、复用代码、提高运行效率。

React 里主要有两种类型的组件：
- 函数式组件 => 基于函数；
- 类式组件 => 基于类；
文章目录
- 1. 函数式组件
  2. 类式组件
1. 函数式组件

函数式组件是基于使用 function 定义的函数，函数式组件和普通函数最主要的区别在 调用的时候，函数式组件在渲染的时候没有 被人为显式调用，而是由 React 内部去调用。来看个例子：
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React函数式组件title>
head>
<body>
	<div id="demo">div>
	
	
	<script type="text/javascript" src="./react.development.js">script>
	
	<script type="text/javascript" src="./react-dom.development.js">script>
	
	<script type="text/javascript" src="./babel.min.js">script>

	<script type="text/babel">
		//1. 创建函数式组件
		function MyComponent(){
			return <h2>我是函数式组件</h2>
		}
		//2. 渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
```
我们先创建一个盒子，用 id 进行唯一标识：
```
<div id="demo">div>    
1
```
引入 react 依赖库，接着在 script 中先 创建一个函数式组件：
```
//1. 创建函数式组件
function MyComponent(){
	return <h2>我是函数式组件h2>
}
1
2
3
4
```
然后 渲染组件到页面：
```
//2. 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
1
2
```
来分析一下，在执行了 ReactDOM.render(,...) 之后，react 做了哪些事情呢：
- (1) react 先解析组件标签 id ==> demo，通过标签 找到了 MyComponent 组件；
- (2) react 发现组件是函数定义的，接着调用这个函数；
- (3) react 将函数返回的 虚拟 DOM 转换为 真实DOM;
- (4) 最后呈现在页面中；
2. 类式组件

类式组件是基于使用 class 定义的类，需要继承自 React.Component；另外，类式组件中必须实现 render函数。来看个例子：
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React类式组件title>
head>
<body>
	<div id="demo">div>
	
	
	<script type="text/javascript" src="./react.development.js">script>
	
	<script type="text/javascript" src="./react-dom.development.js">script>
	
	<script type="text/javascript" src="./babel.min.js">script>

	<script type="text/babel">
		//1. 创建类式组件
		class MyComponent extends React.Component {
			render(){
				return <h2>我是类式组件</h2>
			}
		}
		//2. 渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
```
同样，我们先创建一个盒子，用 id 进行唯一标识：
```
<div id="demo">div>    
1
```
引入 react 依赖库，接着在 script 中 创建一个类式组件：
```
//1. 创建类式组件
class MyComponent extends React.Component {
	render(){
		return <h2>我是类式组件h2>
	}
}
1
2
3
4
5
6
```
然后 渲染组件到页面：
```
//2. 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
1
2
```
不难发现，类式组件和函数式组件不同的地方就是在创建组件的地方，而在渲染的时候则是一样。同样来来分析一下，在执行了 ReactDOM.render(,...) 之后，react 做了哪些事情呢：
- (1) react 先解析组件标签 id ==> function，通过标签 找到了 MyComponent 组件；
- (2) react 发现组件是用类定义的，接着 new 一个该类的实例；
- (3) react 通过该实例调用到类原型上的 render 方法；
- (3) react 将 render 返回的 虚拟 DOM 转换为 真实DOM;
- (4) 最后呈现在页面中；
好了，以上分享了 React 函数式组件和类式组件。希望我的分享能对你的学习有一点帮助。

【公众号传送】

《极智开发 | React 函数式组件和类式组件》

扫描下方二维码即可关注我的微信公众号【极智视界】，获取我的更多经验分享，让我们用极致+极客的心态来迎接AI ！
相关阅读:
电子商务、搜索引擎
 ESP8266-Arduino网络编程实例-ESP-Now-Many-to-One多设备通信
 智慧厕所解决方案给生活带来了什么好处？
MySQL(3)
Linux下brk、sbrk实现一个简易版本的malloc
zabbix mysql监控项
 LTC4056/TP4056国产替代DP4056锂电池充电保护芯片
 基于Python开发的开心麻花影视作品分析系统(源码+可执行程序+程序配置说明书+程序使用说明书)
神经网络-最大池化的使用
 RK3568多千兆网口安卓视频控制器全国产方案
原文地址：https://blog.csdn.net/weixin_42405819/article/details/126106620

极智开发 | React 函数式组件 和 类式组件

文章目录

1. 函数式组件

2. 类式组件

极智开发 | React 函数式组件和类式组件