组件的生命周期:
eg:<h2 style={{opacity:opacity}}>{this.props.msg}</h2>中,外层{}指的是这里放js代码,内层{}指的是放入js对象
1.理解:
- 组件对象从创建到死亡它会经历特定的生命周期阶段
- React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
- 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
2.生命周期流程图
3.生命周期详述
- 组件的三个生命周期状态:
* Mount:插入真实 DOM
* Update:被重新渲染
* Unmount:被移出真实 DOM
- React 为每个状态都提供了勾子(hook)函数
* componentWillMount()
* componentDidMount()
* componentWillUpdate()
* componentDidUpdate()
* componentWillUnmount()
- 生命周期流程:
- 第一次初始化渲染显示: ReactDOM.render()
* constructor(): 创建对象初始化state
* componentWillMount() : 将要插入回调
* render() : 用于插入虚拟DOM回调
* componentDidMount() : 已经插入回调
-
- 每次更新state: this.setSate()
* componentWillUpdate() : 将要更新回调
* render() : 更新(重新渲染)
* componentDidUpdate() : 已经更新回调
-
- 移除组件: ReactDOM.unmountComponentAtNode(containerDom)
* componentWillUnmount() : 组件将要被移除回调
4.重要的勾子
- render(): 初始化渲染或更新渲染调用
- componentDidMount(): 开启监听, 发送ajax请求
- componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
- componentWillReceiveProps(): 后面需要时讲
Hbuilder编写:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件的生命周期</title>
</head>
<body><div id="test"></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/prop-types.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel">
/*
*需求: 自定义组件
1. 让指定的文本做显示/隐藏的渐变动画
2. 切换持续时间为2S
3. 点击按钮从界面中移除组件界面
* */
class Life extends React.Component{
constructor (props){
super(props)
//初始化值
this.state={
opacity:1
}
this.distroyComponent=this.distroyComponent.bind(this)
}
distroyComponent(){
//清理定时
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
componentDidMount(){
//启动循环定时器
this.intervalId=setInterval(function(){
let {opacity}=this.state
opacity -= 0.1
if(opacity<=0){
opacity=1
}
this.setState({opacity})
}.bind(this),200)
}
componentWillUnmount(){
//清理定时器
clearInterval(this.intervalId)
}
render(){
const{opacity}=this.state
return(
<div>
<h1 style={{opacity:opacity}}>{this.props.msg}</h1>
<button onClick={this.distroyComponent}>继续加油</button>
</div>
)
}
}
ReactDOM.render(<Life msg="react学习进行中" />,document.getElementById('test'))
</script>
</body>
</html>
用vscode书写:
虚拟DOM与DOM Diff算法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>虚拟DOM,和DOM的diff算法</title>
</head>
<body>
<div id="example"></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/prop-types.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel">
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
componentDidMount () {
setInterval(() => {
this.setState({
date: new Date()
})
}, 1000)
}
render () {
console.log('render()')
return (
<p>
Hello, <input type="text" placeholder="Your name here"/>!
It is {this.state.date.toTimeString()}
</p>
)
}
}
ReactDOM.render(
<HelloWorld/>,
document.getElementById('example')
)
</script>
</body>
</html>