Skip to main content

7. LifeCycle method

 3 Categories : Mount, Update, Unmount.

Mount

1. constructor -> getDerivedStateFromProps -> render -> componentDidMount


Update

1. getDerivedStateFromProps -> shouldcomponentUpdate-> render-> getSnapshotBeforeUpdate-> componentDidUpdate


 

Labels:

Comments

Post a Comment

Popular posts from this blog

The Complete React Guide by Max - Section 12: Adding Routing to our Burger Project

 220. Module Introduction - just intro 221. Building the checkout container  just create Checkout/checkoutSummary JS files  222. Setting up Routing & Routes < Switch > < Route path = "/checkout" component = { Checkout } /> < Route path = "/" exact component = { BurgerBuilder } /> </ Switch > order is matter and use <Switch> shows only route 223. Navigating to the checkout page  this . props . history . push ( "/checkout" ); yarn add react-router-app and cover {BrowserRouter} in index.js and then work on purchaseContinueHandler(that push('/checkout')) 224. Navigating back & to next page checkoutCancelled = () => { this . props . history . goBack (); }; checkoutContinued = () => { this . props . history . replace ( "/checkout/contact-data" ); }; pass props on each buttons with those 2 functions  225. Passing Ingredients...
Post a Comment
Read more

The Complete React Guide by Max - Section 11: Multi-Page-Feeling in a Single-Page-App: Routing

 203. Extracting Route Parameters componentDidMount () {      axios . get ( "/posts/" + this . props . match . params . id ) . then ( ( response ) => { Changed from componentDidMount to componentDidMount as we are not updating this. this.props.match.params.id successfully passing route parameters and extracting them  205. Using switch to load a single route < Route path = "/" exact component = { Posts } /> < Switch > < Route path = "/new-post" component = { NewPost } /> < Route path = "/:id" exact component = { FullPost } /> </ Switch > <Switch> to ensure that only one route gets loaded at a time. 206. Navigating programmatically  postSelectedHandler = ( id ) => { //this.props.history.push({ pathname: "/" + id }); this . props . history . push ( "/" + id ); }; navigation is about a stack of pages. pu...
Post a Comment
Read more

FE WebDev Routine Training Feb 09, 2021

 FE WebDev Routine Training Feb 09, 2021  A lot of things to do. DO FUCKING FOCUS!!!  Coding test - codewar 1 Kakao 2021 No.1 CSS - grid/ SCSS and Cloning(besthorrorscenes.com) JS - for of loop/  Sec9/ DOM array methods toy project React -   A bit of Yelp Portfolio -  List the 100JS projects Job hunting -  NAVER Finance(on 10th) Karrot for  internship  Apply SW maestro
Post a Comment
Read more