【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>
相关推荐
IT_陈寒1 小时前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用1 小时前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥2 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼6 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手7 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one7 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲7 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell8 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830949 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮9 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端