在更新时有render,componentDidUpdate两个钩子函数,有三种导致更新的情况
1.new props
2.setState()
3.forceUpdate()
import React from 'react'
import ReactDom from 'react-dom'
class App extends React.Component{
constructor(props){
super(props)
this.state={
count:0
}
}
//打豆豆
handleClick=()=>{
//更改状态页面状态重新渲染
this.setState({
count:this.state.count+1
})
//forceUpdate更新时也会触发渲染
this.forceUpdate()
}
render(){
console.warn('生命周期钩子函数: render')
return (
<div>
<Counter this.state.count/>
<button onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}
class Counter extends React.Component{
render(){
//更新props,组件会重新渲染
return <h1 >统计打豆豆的次数:{this.props.count}</h1>
}
}
ReactDom.render(<App/>,document.getElementById('root'))