<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lifeCycle</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="app"></div>
<script src="../node_modules/babel-standalone/babel.js"></script>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
class App extends React.Component{
constructor(props) {
super(props);
// 构造只执行一次 重点提醒
// this.props.title 读取父组件的传递的数据
// this.state = {} 初始化一个状态
this.state = {
a: props.title,
b: this.props.title
}
console.log( '01-构造函数1 ' )
}
componentWillMount() {
console.log('02-组件即将被挂载2')
// console.log(this.refs) 这时不能做dom操作
// 请求后端接口 真实测试的会出现白屏（页面一直没有图片 文字 html结构 ）
// this.setState() this.state this.props 都是异步的！
this.setState({
c: '请求的数据'
})
//console.log(this.state.c)
setTimeout(()=>{
//console.log( this.state.c )
},2000)
}
componentDidMount() {
console.log('04-组件挂载完成啦4') // 用户在网页上能够看到数据（图片 文字。。。）
// 这是第一阶段 相当于 用户打开了网页
// 真实的场景 会在此请求后端数据接口
// 请求回来的数据 会挂载到state里面
// 放在state里面的好处
// 1. 当前组件是根据state的数据进行渲染
// 2. state的数据是响应式数据 ，一但数据变化了，就会自动触发render函数
// 例子 点击 当前组件的元素 执行当前的事件函数 更新当前的组件数据b ，数据变化
// 就是自动触发render数据
// 当前组件 维护当前组件的 数据（状态）
console.log( this._btn.style.background = 'skyblue' )
}
handleClick = ()=>{
this.setState({
b: '点击事件改变数据'
})
}
render() {
console.log( '03-开始渲染组件3' )
// 可以在这一步对 state数据进行处理
//console.log( this.state.c )
return (
<div>
<h1 ref={'h1'}>App</h1>
{this.state.a}
<hr />
有10万行代码要渲染
{this.state.b}
<button
ref={adsadadasd=>this._btn=adsadadasd}
onClick={this.handleClick}
>点击 </button>
</div>
);
}
}
ReactDOM.render(
<App title={'abc123'}></App>,
document.querySelector('#app')
)
</script>
</body>
</html>
以上内容仅供本人做笔记使用
网友评论