[React Fundamentals] Component lifecycle-mounting Basics

React components has a lifecycle, and you is able to access specific phases of that lifecycle. This lesson would introduce mounting and unmounting of your React components.

Import React from 'react'; import Reactdom from 'React-dom'; exportdefault classApp extends React.component {constructor () {super ();  This. State ={val:0}} update () { This. SetState ({val: This. State.val +1})} componentwillmount () {Console.log ("Component would Mount"); } render () {Console.log ("Rendering"); return (            <div> <button onclick={ This. Update.bind ( This)}>{ This.state.val}</button> </div>)} componentdidmount () {Console.log ("Component did Mount"); }}

"Componentwillmount" happen before rendering, "state" and "props" were ready, but DOM was not rendered yet.

"Componentdidmount" happen after component rendered to the DOM, can access Dom Node.

[React Fundamentals] Component lifecycle-mounting Basics