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> ) }}/** Everyone defaults to some of the steps, easy to see * 1. Default value * 2. Initialization status * 3. hook function * 4. Method function **/class Counter extends component{//Default Property ObjectStatic defaultprops={number:5} constructor (props) {super (props); //get my initial status This. state={Number:props.number}}//hook functionComponentwillmount () {Console.log (' Component will be mounted ')} componentdidmount () {Console.log ("Component Mount Complete")} Handleclick= () + ={ //The This.setstate method is asynchronous, and only one this.setstate method can be called in a function //calls are merged multiple times, only once This. SetState ((prev,next) =({ //last State prevNumber:prev.number+1 }),()={Console.log ("Callback function Execution") }) //this.setstate ({index:this.state.index+1})} render () {//call the subassembly Childcounter and pass the current state value over return( <div> <p>{ This.state.number}</p> <button onclick={ This.handleclick}>+</button> <childcounter count={ This.state.number}></childcounter> </div> ) }}//Render to PageReactdom.render (<counter></counter>,document.queryselector ("#root"))
React.js Parent-child component data binding real-time communication