React-函数式组件和类组件

m0_65912225

已于 2022-04-03 13:13:33 修改

阅读量1.1k

点赞数

分类专栏： React 文章标签：前端 react.js

于 2022-03-20 12:42:18 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/123610816

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1.函数式组件

2. 类组件

1.函数式组件

<!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(){
			console.log(this); 
    //此处的this是undefined，因为babel编译后开启了严格模式，严格模式最大的特点就是禁止自定义的函数中this指向window
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面，如果第一个参数直接传入函数名会报函数类型不能作为React的节点错误，必须以标签的形式传入而且如果名字是小写的话会报当前这个标准在浏览器中不被允许，因为如果是小写的标签会被转成html标签，但是html中并没有此标签，还要注意标签必须要闭合
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/
	</script>
</body>
</html>

2. 类组件

创建类组件：必须要继承React.Component；必须要有render函数；render函数中必须要return

<!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.创建类式组件，1、必须要继承React.Component，2、必须要有render函数，3、render函数中必须要返回值 
		class MyComponent extends React.Component {
			render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。但是有个问题就是我们并没有手动去new MyComponent这个实例，但是下面的ReactDOM.render函数中写了组件标签后React会自动的帮我们创建实例
				
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/
	</script>
</body>
</html>

注意：组件名必须首字母大写；虚拟DOM元素只能由一个根节点；虚拟DOM元素必须有结束标签

渲染类组件标签的基本流程：

1.React内部会创建组件实例对象；

2.调用render()得到虚拟DOM，定解析为真实DOM

3.插入到指定的页面元素内部

m0_65912225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-函数式组件和类组件

1.函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_函数式组件</title></head><body>  <div id="test"></div>  <
复制链接

扫一扫