<!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>
03-05
05-30