1 of 27

ReactJS

Lifecycle

​

Hao Le - August, 2021.

2 of 27

Target

  • Understand lifecycle of a component.
  • Implement lifecycle in both cases:

Class component vs. Function component.

3 of 27

Outline

  1. Overview.
  2. Lifecycle methods in Class component.
  3. Hooks in Function component.

4 of 27

Prerequisites

  • DOM - Document Object Model.
  • Component declaration:
    • Class component
    • Function component

5 of 27

Prerequisites

  • DOM - Document Object Model.

6 of 27

Prerequisites

  • DOM - Document Object Model.

7 of 27

Prerequisites

  • Component declaration:

8 of 27

1.

Component lifecycle

Overview

9 of 27

  1. Overview

10 of 27

  • Overview

11 of 27

  • Overview

12 of 27

  • Overview

13 of 27

  • Overview

14 of 27

2.

Lifecycle methods in

Class component

15 of 27

2. Lifecycle methods in CC

16 of 27

2. Lifecycle methods in CC

Codesandbox

17 of 27

2. Lifecycle methods in CC

Codesandbox

18 of 27

3.

Hooks in

Function component

19 of 27

3. Hooks in FC

  • useState() API

20 of 27

3. Hooks in FC

  • useState() API

Codesandbox

21 of 27

3. Hooks in FC

  • useState() API

22 of 27

3. Hooks in FC

  • useEffect() API

23 of 27

3. Hooks in FC

  • useEffect() API

24 of 27

Sumup

25 of 27

Minigame

  • Code: ******

26 of 27

References

27 of 27

Thanks

for listening!

Any questions?

Contact me via haolt.work@gmail.com

See more posts at https://haodev.wordpress.com