组件化开发-05-生命周期——componentDidUpdate-更新&componentDidMount-载入-须使用setState方法修改状态值&componentWillUnmount-卸载
react生命周期——componentDidUpdate-组件更新 & componentDidMount-组件载入–修改状态的值-不可以直接修改,必须使用setState方法 & componentWillUnmount-组件卸载组件的生命周期图解componentDidMount完成组件挂载后触发,类似于Vue中mounted一般用于调用后台接口获取数据并更新state中的数
·
react生命周期——componentDidUpdate-组件更新 & componentDidMount-组件载入–修改状态的值-不可以直接修改,必须使用setState方法 & componentWillUnmount-组件卸载
组件的生命周期
图解
- componentDidMount
- 完成组件挂载后触发,类似于Vue中mounted
- 一般用于调用后台接口获取数据并更新state中的数据
- 组件内部状态的修改必须使用setState方法
- componentWillUnmount
- 将要完成组件卸载时触发,类似vue中的beforeDestroy
- 一般用于销毁相关的资源(定时任务;取消事件绑定)
- componentDidUpdate
- 更新阶段触发
class TestClass extends React.Component {
constructor(props) {
super(props);
this.state = {
num: 0,
timer: null
}
}
componentDidMount () {
console.log('组件挂载后触发')
let t = setInterval(() => {
console.log(1)
}, 1000);
this.setState({
timer: t
})
}
componentWillUnmount () {
console.log('组件将要销毁时触发')
clearInterval(this.state.timer)
}
render () {
return (
<div>生命周期</div>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
flag: true
}
}
componentDidMount () {
setTimeout(() => {
this.setState({
flag: false
})
}, 2000)
}
render () {
return (
<div>
{this.state.flag && <Tab/>}
</div>
)
}
}
实例
第一步:src下新建文件夹components,下面新建05.js
/*
组件的生命周期
*/
import React from 'react'
class TestClass extends React.Component {
constructor (props) {
super(props);
this.state = {
n: 1,
timer: null
}
console.log('----------------' + 1)
}
render () {
// 组件依赖的数据(包括内部的state数据和父组件传递的props数据)如果发生变化,那么render方法就重新触发
console.log('----------------' + 2)
return (
<div>
<div>测试组件生命周期</div>
<div>{this.state.n}</div>
<div>{this.props.msg}</div>
</div>
)
}
componentDidUpdate () {
// 组件内容更新时触发
console.log('update')
}
componentDidMount () {
console.log('----------------' + 3)
// 该组件完成挂载后触发
// 一般用于获取后台的接口数据
// 或者完成一些初始化操作
// console.log('挂载成功')
setTimeout(() => {
// 修改状态的值:不可以直接修改,必须使用setState方法进行修改
// this.state.n = 2;
// console.log(this.state.n)
this.setState({
n: 2
})
}, 3000)
let timer = setInterval(() => {
console.log('click')
}, 1000)
this.setState({
timer: timer
})
}
componentWillUnmount () {
// 该组件将要卸载时触发:一般用于清除一些资源
console.log('该组件已经被卸载')
// 销毁定时任务
clearInterval(this.state.timer)
}
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
flag: true,
msg: 'nihao'
}
}
componentDidMount () {
setTimeout(() => {
this.setState({
flag: false,
msg: 'hello'
})
}, 5000);
}
render () {
return (
<div>
{this.state.flag? <TestClass msg={this.state.msg}/>: <div>不显示组件</div>}
</div>
)
}
}
export default Parent
第二步:App.js中进行引入
import React from 'react';
import './App.css';
import TestClass from './component/05-组件的生命周期'
function App () {
return (
<div>
<TestClass/>
</div>
)
}
export default App;
界面显示
5-01
5-02
5-03
打印界面
更多推荐
已为社区贡献72条内容
所有评论(0)