<!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>React生命周期(旧)</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/babel.min.js"></script>
<script type="text/babel">
class Count extends React.Component {
state={
count:0
}
//是否允许组件状态改变
//这个函数如果自己不调,react会自动调用,并且永远返回一个值true
shouldComponentUpdate(){
console.log('count-----shouldComponentUpdate')
return false
}
force = ()=>{
//强制更新,不走shouldComponentUpdate这一步,直接更新
this.forceUpdate()
}
//组件的状态改变之前
componentWillUpdate(){
console.log('count-----componentWillUpdate')
}
//组件状态改变之后
componentDidUpdate(){
console.log('count-----componentDidUpdate')
}
//构造函数
constructor(props){
console.log('count-----constructor')
super(props)
}
//组件挂载之前
componentWillMount(){
console.log('count-----componentWillMount')
}
//组件挂载之后
componentDidMount(){
console.log('count-----componentDidMount')
}
//组件卸载之前
componentWillUnmount(){
console.log('count-----componentWillUnmount')
}
//卸载组件的回调
death = ()=>{
console.log('count-----unmountComponentAtNode')
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//组件渲染
render(){
console.log('count-----render')
return (
<div>
<h2>当前求和为:{
this.state.count}</h2>
<button onClick={
this.add}>点我+1</button>
<button onClick={
this.death}>点我卸载组件</button>
<button onClick={
this.force}>点我强制更新</button>
</div>
)
}
add = ()=>{
let {
count} = this.state
this.setState ({
count:count+1})
}
}
ReactDOM.render(<Count />, document.getElementById('test'))
</script>
</body>
</html>
React的生命周期(旧)
猜你喜欢
转载自blog.csdn.net/qq_45634989/article/details/127410359
今日推荐
周排行