【03】基础知识：React组件

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

模块

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

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

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

组件

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

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

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

模块化

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

组件化

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

二、React 面向组件编程

函数式组件

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

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

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_函数式组件</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<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>

类式组件

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

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

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

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<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>