{"id":1517,"date":"2016-03-09T18:08:50","date_gmt":"2016-03-09T10:08:50","guid":{"rendered":"http:\/\/wp.jiinjoo.com\/?p=1517"},"modified":"2016-03-09T18:09:54","modified_gmt":"2016-03-09T10:09:54","slug":"react-page-lifecycle-summary","status":"publish","type":"post","link":"https:\/\/wp.jiinjoo.com\/?p=1517","title":{"rendered":"React Page Lifecycle Summary"},"content":{"rendered":"<p>Here, the no bullshit summary of React Page Lifecycle<\/p>\n<p><code><\/p>\n<p><u>Start (Once)<\/u><br \/>\nobject <b>getDefaultProps<\/b>&nbsp; &nbsp; &nbsp; complex objects are shared not copied<br \/>\nobject <b>getInitialState<\/b><br \/>\nvoid <b>componentWillMount<\/b><br \/>\n&nbsp; &nbsp; &nbsp; both client and server<br \/>\n&nbsp; &nbsp; &nbsp; can setState still, and render will happen only once.<br \/>\nReactElement <b>render<\/b><br \/>\n&nbsp; &nbsp; &nbsp; examines this.props and this.state<br \/>\n&nbsp; &nbsp; &nbsp; returns a single child (virtual DOM or react class)<br \/>\n&nbsp; &nbsp; &nbsp; must be PURE (does not modify state or setTimeout)<br \/>\nvoid <b>componentDidMount<\/b><br \/>\n&nbsp; &nbsp; &nbsp; only on the client<br \/>\n&nbsp; &nbsp; &nbsp; can access any refs, setTimeout, send AJAX requests<\/p>\n<p><u>Repeat<\/u><br \/>\n&nbsp; &nbsp; &nbsp; void <b>componentWillReceiveProps<\/b>( object nextProps )<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; can setState to trigger render later<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; don\u2019t assume props has changed<br \/>\n&nbsp; &nbsp; &nbsp; boolean <b>shouldComponentUpdate<\/b><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false if possible<br \/>\n&nbsp; &nbsp; &nbsp; void <b>componentWillUpdate<\/b>( object nextProps, object nextState )<br \/>\n&nbsp; &nbsp; &nbsp; <b>render<\/b>! => see above<br \/>\n&nbsp; &nbsp; &nbsp; void <b>componentDidUpdate<\/b>( object prevProps, object prevState )<\/p>\n<p><u>Finish (Once)<\/u><br \/>\nvoid <b>componentWillUnmount<\/b><br \/>\n&nbsp; &nbsp; &nbsp; cleanup: invalidating timers, clean up DOM elements<br \/>\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here, the no bullshit summary of React Page Lifecycle Start (Once) object getDefaultProps&nbsp; &nbsp; &nbsp; complex objects are&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1517","post","type-post","status-publish","format-standard","hentry","category-technology","content-wrap"],"_links":{"self":[{"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=\/wp\/v2\/posts\/1517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1517"}],"version-history":[{"count":8,"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=\/wp\/v2\/posts\/1517\/revisions"}],"predecessor-version":[{"id":1525,"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=\/wp\/v2\/posts\/1517\/revisions\/1525"}],"wp:attachment":[{"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.jiinjoo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}