react小Demo

七秒~

于 2022-06-24 18:45:00 发布

阅读量296

点赞数 1

分类专栏：笔记 react初级文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/yingchengzzz/article/details/125441421

版权

笔记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

react初级

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>01.react 声明周期 Demo</title>
		<!-- 消失的 : desappear -->
		<!--  -->
		<!--  -->
		<!-- react页面 需要 自定义 1个容器 -->
		<!-- 准备好一个“容器” -->
		<div id="btn_desappear"></div>
	</head>
	<body>
		<!-- 按序引入, 顺序不能错, react会按照这个渲染 -->
		<!-- 引入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>

		<!-- type中的javascript需替换成babel, 用于提示此处编译为 JSX 格式 -->
		<script type="text/babel">
			// 用class创建组件, 组件是个对象, 因此是 {} ;
			// 注意: 组件名命名首字母大写; React和Component首字母大写;
			// 理解: 新建一个class类名为Life, 并继承React组件的方法;
			class Life extends React.Component {
				// state 两个作用:1存储一定的值 能被react使用; 2在它改变时 能被React监听到并且重新渲染
				// state? 为什么用{}包裹呢?.............
				state = { opacity: 0.1 };

				//在render函数中, 加入需求的静态标签代码
				//用在: 1初始化渲染时、2状态更新之后
				render() {
					//注意-书写规范:return到页面的标签, 最外侧"用括号包裹"
					//注意-语法规范:return到页面的标签, 最外侧 "有且只有一个 根标签" ; html标签不加引号包裹(react规定的);
					return (
						<div>
							{/** 注意-书写规范 : 行内样式用双花括号包裹  **/}
							{/** 注意-书写规范 : 行内样式用逗号隔开 行内样式的值需要加引号  **/}
							<h5 style={{ opacity: this.state.opacity, color: "#000" }}>每临大事有静气。</h5>
							<h5 style={{ opacity: this.state.opacity, color: "#000" }}>静而后能安，安而后能虑，虑而后能得。</h5>
							{/** 注意-语法规范 : onClick的C要大写  **/}
							{/** 注意-语法规范 : 点击方法用大括号包裹 {}  **/}
							{/** 注意-语法规范 : 方法如果加(), 可能会被自调用, 所以不能加()  **/}
							<button onClick={this.close}>关闭</button>
						</div>
					);
				}

				//组件挂载完毕
				componentDidMount() {
					console.log("组件挂载完毕, 渲染一次");
					this.timer = setInterval(() => {
						console.log("定时器");
						// 获取此刻的state的opacity值, 减减 , 如果opacity值为0时 重新赋值
						let { opacity } = this.state;
						opacity -= 0.1;
						if (opacity <= 0) opacity = 1;
						this.setState({ opacity });
					}, 500);
					// 组件被销毁后 定时器依旧会在执行? 需要在"生命周期componentWillUnmount"中清除定时器任务
				}

				// 销毁组件前,清除定时器
				componentWillUnmount() {
					//清除定时器
					clearInterval(this.timer);
				}

				//关闭按钮的方法
				close = () => {
					// 使用react的移除节点方法, 移除节点
					ReactDOM.unmountComponentAtNode(document.getElementById("btn_desappear"));
				};
			}

			//拿到Dom, 渲染组件到页面
			ReactDOM.render(<Life />, document.getElementById("btn_desappear"));
		</script>
	</body>
</html>