react生命周期(新)
<script type="text/babel">
/*
1. 初始化阶段:由ReactDOM.render()触发----初次渲染
1.contructor()
2.getDerivedStateFromProps()
3.render()
4.componentDidMount() =====》常用,
一般在这个钩子中做一些初始化的事,例如:开启定时器,发生网络请求,订阅消息
2. 更新阶段:由组件内部this.setState()或父组件render触发
1.getDerivedStateFromProps()
2. shouldComponentUpdate()
3.render() =====》常用,必须使用的一个
4.getSnapshotBeforeUpdate()
4.componentDidUpdate()
3.卸载组件:由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====》常用,
一般在这个钩子中做一些收尾的事,例如:关闭定时器,取消订阅消息
*/
class Count extends React.Component{
//构造器
constructor(props){
console.log("Count-constructor");
super(props)
this.state = {count:0}
}
//初始化状态
// state = {
// count:0
// }
add = ()=>{
const {count} = this.state
this.setState({
count:count+1
})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById("test"))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//此方法适用于罕见的用例,state的值在任何时候都取决于props,但会导致代码冗余,所以一般不会用
static getDerivedStateFromProps(props,state){
console.log("Count-getDerivedStateFromProps",props,state);
return null
//return {count:100}//状态对象,影响了状态的更新,状态不更新了
// return props
}
// 组件挂载完毕的钩子
componentDidMount(){
console.log("Count-componentDidMount");
}
//组件将要卸载
componentWillUnmount(){
console.log("Count-componentWillUnmount");
}
//组件应不应该更新,控制组件更新的阀门
shouldComponentUpdate(){
console.log("Count-shouldComponentUpdate");
return true //必须写,true才能通行
}
render(){
console.log("Count-render");
const {count} = this.state
return (
<div>
<h2>当前求和为{count}</h2>
<button onClick={this.add}>点我加1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button>
</div>
)
}
//在更新之前获取快照
getSnapshotBeforeUpdate(){
console.log("Count-getSnapshotBeforeUpdate");
return "哈哈哈"
}
//组件更新完毕的钩子
componentDidUpdate(prevProps,prevState,snapshotVal){
console.log("Count-componentDidUpdate",prevProps,prevState,snapshotVal);
}
}
ReactDOM.render(<Count count={200}/>,document.getElementById("test"))
</script>