实例详解react.js父子组件数据绑定实时通讯

import React,{Component} from 'react'

import ReactDOM from 'react-dom'

class ChildCounter extends Component{

  render(){

    return(

      <p style={{border:'1px solid red'}}>

        {this.props.count}

      </p>

    )

  }

}

/*

* 大家默认规定的一些步骤，方便大家看

* 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(

      <p>

        <p>{this.state.number}</p>

        <button onClick={this.handleClick}>+</button>

        <ChildCounter count={this.state.number}></ChildCounter>

      </p>

    )

  }

}

//渲染到页面

ReactDOM.render(<Counter></Counter>,document.querySelector("#root"))