【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>
相关推荐
有梦想的刺儿9 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具30 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json