import React,{Component} from 'react'
import ReactDOM from 'react-dom' class ChildCounter extends Component{
render(){
return(
<div style={{border:'1px solid red'}}>
{this.props.count}
</div>
)
}
}
/*
* 大家默认规定的一些步骤,方便大家看
* 1.默认值
* 2.初始化状态
* 3.钩子函数
* 4.方法函数
* */
class Counter extends Component{
//默认属性对象
static defaultProps={
number:5
}
constructor(props){
super(props);
//获取我的初始状态
this.state={
number:props.number
}
}
//钩子函数
componentWillMount(){
console.log('组件将要挂载')
} componentDidMount(){
console.log("组件挂载完成")
} handleClick=()=>{
//this.setState方法是异步的,一个函数里面只能调用一次this.setState方法
//调用多次会合并,只执行一次
this.setState((prev,next)=>({
//上一次的状态prev
number:prev.number+1
}),()=>{
console.log("回调函数执行")
}) // this.setState({index:this.state.index+1}) }
render(){
//调用子组件ChildCounter,把当前状态值传过去
return(
<div>
<p>{this.state.number}</p>
<button onClick={this.handleClick}>+</button>
<ChildCounter count={this.state.number}></ChildCounter>
</div>
)
}
}
//渲染到页面
ReactDOM.render(<Counter></Counter>,document.querySelector("#root"))
05-11 21:45
查看更多