【03】基础知识：React组件

一、模块与组件、模块化与组件化的理解

模块

理解：向外提供特定功能的 js 程序，一般就是一个 js 文件

为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂

作用：复用 js，简化 js 的编写，提高 js 运行效率

组件

理解：用来实现局部功能效果的代码和资源的集合( html/css/js/image 等等)

为什么要用组件：一个界面的功能更复杂

作用：复用编码，简化项目编码，提高运行效率

模块化

当应用的 js 都以模块来编写的，这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

二、React 面向组件编程

函数式组件

执行了 ReactDOM.render() 之后，发生了什么？

1、React 解析组件标签，找到了 MyComponent 组件。

2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_函数式组件title>
head>
<body>
	
	<div id="test">div>
	
	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		// 1、创建函数式组件（组件名必须首字母大写）
		function MyComponent() {
			// babel 编译后开启了严格模式 use strict，严格模式下禁止自定义函数的 this 指向 window，为 undefined
			console.log(this) // undefined 
			return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
		}

		// 2、渲染组件到页面（组件必须书写为标签形式，且闭合）
		ReactDOM.render(<MyComponent/>, document.getElementById('test'))
	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

类式组件

执行了 ReactDOM.render() 之后，发生了什么？

1、React 解析组件标签，找到了 MyComponent 组件。

2、发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法。

3、将 render 返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件title>
head>
<body>
	
	<div id="test">div>
	
	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		// 1、创建类式组件（ * 继承 React 内置类 React.Component）
		class MyComponent extends React.Component {
			// * 类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。

			// * render方法必须有，且要有返回值
			// render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
			// render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
			render() {
				console.log('render的this', this)
				return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
			}
		}

		// 2、渲染组件到页面
		ReactDOM.render(<MyComponent/>, document.getElementById('test'))
	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
31
32
33
34
35
36

相关阅读:
Android为TV端助力完全解析模拟遥控器按键
Qt实现侧边栏显示隐藏以及自定义提示框
相同二叉树和镜面二叉树问题
【原创】MybatisPlus调用原生SQL的三种方法
spark基础
Ubuntu 22.04 安装水星无线 USB 网卡
获取wifi密码信息（仅供学习使用，勿作他用）
畅购商城_第10章_购物车
Spring mvc处理异常
django rest framework 学习笔记-实战商城

原文地址：https://blog.csdn.net/weixin_45559449/article/details/133804963