how to learn react lify cycle components

1class LifeCycle extends React.Component {
2      constructor(props)
3      {
4        super(props);
5         this.state = {
6           date : new Date(),
7           clickedStatus: false,
8           list:[]
9         };
10      }
11      componentWillMount() {
12          console.log('Component will mount!')
13       }
14      componentDidMount() {
15          console.log('Component did mount!')
16          this.getList();
17       }
18      getList=()=>{
19       /*** method to make api call***
20       fetch('https://api.mydomain.com')
21          .then(response => response.json())
22          .then(data => this.setState({ list:data }));
23      }
24       shouldComponentUpdate(nextProps, nextState){
25         return this.state.list!==nextState.list
26        }
27       componentWillUpdate(nextProps, nextState) {
28          console.log('Component will update!');
29       }
30       componentDidUpdate(prevProps, prevState) {
31          console.log('Component did update!')
32       }
33      render() {
34          return (
35             <div>
36                <h3>Hello Mounting Lifecycle Methods!</h3>
37             </div>
38          );
39       }
40}

1class Initialize extends React.Component {
2    constructor(props)
3    {
4    // Calling the constructor of
5    // Parent Class React.Component
6    super(props);
7    // initialization process
8    this.state = {
9       date : new Date(),
10       clickedStatus: false
11     };
12}

1class LifeCycle extends React.Component {
2  componentWillMount() {
3      console.log('Component will mount!')
4   }
5  componentDidMount() {
6      console.log('Component did mount!')
7      this.getList();
8   }
9  getList=()=>{
10   /*** method to make api call***
11  }
12  render() {
13      return (
14         <div>
15            <h3>Hello mounting methods!</h3>
16         </div>
17      );
18   }
19}