react--学习笔记3（面向组件编程）

最新推荐文章于 2020-08-26 15:36:52 发布

ABU_MOlI_ITUI

最新推荐文章于 2020-08-26 15:36:52 发布

阅读量5.1k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107641530

版权

react 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、React面向组件编程

注意：

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
面向对象----》面向模块-----》面向组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件编程</title>
	</head>
	<body>
		<div id="test1"></div>
		<div id="test2"></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">
			//创建虚拟dom
			//方式1: 工厂函数组件(简单组件)因为它不包含状态组件
			function MyCompent(){
				return <h2>工厂函数组件(简单组件)</h2>
			}
			//方式2:  ES6类组件(复杂组件)
			class MyCompent2 extends React.Component{
				render(){
					return <h2>ES6类组件(复杂组件)</h2>
				}
			}
			//渲染虚拟dom
			ReactDOM.render(<MyCompent />, document.getElementById('test1'));
			ReactDOM.render(<MyCompent2 />, document.getElementById('test2'))
		</script>
	</body>
</html>

ABU_MOlI_ITUI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react--学习笔记3（面向组件编程）

一、React面向组件编程注意：组件名必须首字母大写虚拟DOM元素只能有一个根元素虚拟DOM元素必须有结束标签<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件编程</title> </head> <body> <div id="test1"></div> &l...
复制链接

扫一扫