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

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"))