import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
msg:'第一次的消息'
}
}
componentWillMount(){
console.log(this.state.msg);
}
componentDidMount(){
console.log('我在render之后');
// 一般会在这里调用ajax请求 组件已经挂载了 可以放心的获取渲染出来的dom 所以在这个阶段是最合适的
}
componentWillUpdate(){
console.log('我即将更新');
}
componentDidUpdate(){
console.log('我更新完毕');
}
// 在初始化的时候不会立马执行 会在component接收到新的状态props的时候被触发
// 一般用于父组件更新的时候 子组件的重新渲染
// 在react中 不是根据数据内容来判断的 而是根据数据的引用来判断的 父组件[...info]拷贝解决
componentWillReceiveProps(nextProps){
console.log(nextProps.todos);
console.log(this.props.todos);
}
shouldComponentUpdate(nextProps,nextState){
console.log(nextState);
console.log(this.state.msg);
return false
}
handelClick = ()=>{
this.setState({
msg:'我是更新后的数据'
})
}
componentWillUnmount(){
// 会做一些收尾的工作
// 清除定时器
console.log('我即将被卸载');
}
handelUnMount = ()=>{
React.unmountComponentAtNode(document.getElementById('root'))
}
render(){
const {msg} = this.state;
return(
<div>
<h1>{msg}</h1>
<button onClick={this.handelClick}>更新</button>
<button onClick={this.handelUnMount}>卸载</button>
</div>
)
}
}
export default App;
(精华2020年5月24日更新) react基础篇 组件的生命周期
最新推荐文章于 2021-01-08 11:09:32 发布