<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h1>React life cycle(Class Component)</h1>
    <p>React life cycle exists only in class components,I will expand from the following aspects.</p>
    <h2>Intialization</h2>
    <h3>constructor hook</h3>
    <p>at the stage react will init props and state</p>
    <h2>Mounting</h2>
    <h3>getDerivedStateFromProps(props,state)</h3>
    <p>state is related on props</p>
    <h3>componentWillMount(18 abandoned)</h3>
    <p>executed when the component is about to be mounted</p>
    <h3>Render</h3>
    <p>executed when state and props change</p>
    <h3>componentDidMount</h3>
    <p>executed when virtual dom converted to real dom</p>
    <blockquote>
      <p>it is recommended to send request here</p>
    </blockquote>
    <blockquote>
      <p>add some subscriptions and operate dom in here</p>
    </blockquote>
    <p><strong>note</strong>:</p>
    <p>componentWillMount and componentDidMount executed only in page refresh</p>
    <h2>Updating</h2>
    <h3>static getDerivedStateFromProps</h3>
    <h3>shouldComponentUpdate(nextProps,nextState)</h3>
    <p>executed when props and state change</p>
    <p>it must return a boolean value when the value is <code>true</code> components will execute next hook otherwise it will prevent component update</p>
    <h3>componentWillUpdate(18 abandoned)</h3>
    <p>executed after shouldComponentUpdate was called</p>
    <h2>render</h2>
    <h3>getSnapshotBeforeUpdate(prevProps, prevState)</h3>
    <p>the content returented by this method will be passed as a parameter to componentDidUpdate</p>
    <h3>componentDidUpdate(preProps,preState,snapShot)</h3>
    <p>executed when component updated</p>
  </body>
</html>
