React初心者がHooksを理解するためにコードを読んでみた

Transcript

1. !QPMJEPH
   3FBDUॳ৺ऀ͕)PPLTΛཧղ͢
   ΔͨΊʹίʔυΛಡΜͰΈͨ
   4IJ[VPLBKT
   

   View Slide

2. ࣗݾ঺հ
   w !QPMJEPH
   w ύʔςΟʔϋʔυגࣜձࣾ
   w ϑϩϯτΤϯυΤϯδχΞ ݟश͍
   
   w ϲ݄ͪΐͬͱલʹύύʹͳΓ·ͨ͠
   
   

   View Slide

3. ݁࿦
   3FBDU)PPLTͷίʔυ·͡Α͘Θ͔Βͳ͍ʜ
   

   View Slide

4. ΞδΣϯμ
   ͦ΋ͦ΋)PPLTͱ͸ʁ
   3FBDU)PPLTͷίʔυΛಡ΋͏ͱࢥ͖͔͚ͬͨͬ
   ࣮ࡍʹίʔυΛಡΜͰΈͨ
   

   View Slide

5. ͦ΋ͦ΋3FBDU)PPLTͱ͸ʁ
   

   View Slide

6. 3FBDU)PPLTͱ͸ͳʹ͔ʁ
   w ؔ਺ίϯϙʔωϯτʹεςʔτΛ΋ͨͤΔͨΊͷ࢓૊Έ
   w ؔ৺ࣄΛ୯Ұͷؔ਺ )PPLT
   ʹ·ͱΊΔ͜ͱ͕ग़དྷΔ
   w Ϋϥείϯϙʔωϯτͩͱॲཧ͕ࢄΒ͹Γ΍͍͢ʁΘ͔Γʹ͍͘ʁ
   ਖ਼௚Ϋϥείϯϙʔωϯτॻ͍ͨ͜ͱͳ͍͔ΒΘ͔Βͳ͍ɻɻɻ
   
   w ػցʹ΋ਓؒʹ΋೉͍͠Β͍͠ UIJT CJOE͋ͨΓͱ͔ʜ
   
   IUUQTKBSFBDUKTPSHEPDTIPPLTJOUSPIUNMDMBTTFTDPOGVTFCPUIQFPQMFBOENBDIJOFT
   

   View Slide

7. )PPLTͷछྨ
   w VTF4UBUFεςʔτͷ؅ཧ
   w VTF&⒎FDU෭࡞༻ΛҾ͖ى͜͢ɺYYYͷ஋͕มߋ͞Εͨ৔߹ʹͳʹ͔ॲཧΛ
   ͤ͞ΔΈ͍ͨͳͷ͕Ͱ͖Δ
   w VTF$BMMCBDLίʔϧόοΫͷϝϞԽ
   ৄ͘͠͸ެࣜυΩϡϝϯτಡΜͰ͍ͩ͘͞
   IUUQTKBSFBDUKTPSHEPDTIPPLTSFGFSFODFIUNM
   

   View Slide

8. View Slide

9. ίϯϙʔωϯτ͔ΒϩδοΫΛ෼཭ͨ͠ྫ
   

   View Slide

10. 3FBDU)PPLTͷίʔυΛಡ΋͏
    ͱࢥ͖͔͚ͬͨͬ
    

    View Slide

11. w Χ΢ϯτΞοϓϘλϯ͕ԡ͞ΕΔͨ
    ͼʹදࣔ͞ΕΔ
    DPOTPMFMPH bSFOEFS`
    ͕࣮ߦ͞ΕΔ
    w ͔͠͠DPVOUͷ஋͸ͲΜͲΜ
    Ճࢉ͞Ε͍ͯ͘
    

    View Slide

12. ͲΜͳ࢓૊Έʹͳ͍ͬͯΔͷ͔
    ؾʹͳΔ
    

    View Slide

13. ࣮ࡍʹίʔυΛಡΜͰΈͨ
    

    View Slide

14. Ͳ͔͜ΒಡΉ͔ʁ
    w ӈͷΑ͏ͳΧ΢ϯτΞοϓ͢Δ
    αϯϓϧίʔυΛ૝ఆ
    w VTF4UBUFͷ࣮૷͕Ͳ͏ͳ͍ͬͯ
    Δͷ͔Λ֬ೝͯ͠ΈΔ
    

    View Slide

15. ࠓΘ͔͍ͬͯΔ͜ͱ
    VTF4UBUFͷܕ৘ใ͔ΒΘ͔Δ͜ͱ
    

    View Slide

16. VTF4UBUFͷؔ਺ͷ࣮૷͸Ͳ͜ʹ͋Δͷ͔ʁ
    QBDLBHFTSFBDUTSD3FBDU)PPLTKT
    IUUQTHJUJP+-Q%
    

    View Slide

17. 3FBDU)PPLTKTSFTPMWF%JTQBUDIFS
    IUUQTHJUJP+-I:
    

    View Slide

18. 3FBDU$VSSFOU%JTQBUDIFS
    SFBDUQBDLBHFTSFBDUTSD3FBDU$VSSFOU%JTQBUDIFSKT
    IUUQTHJUJP+-OW+
    

    View Slide

19. 3FBDU*OUFSOBM5ZQFTKT
    IUUQTHJUJP+-OUB
    

    View Slide

20. ͜͜·ͰͰཧղͰ͖ͨ͜ͱ
    w VTF4UBUFؔ਺͸EJTQBUDIFSʹॲཧΛҕৡ͍ͯ͠Δ͚ͩ
    w EJTQBUDIFS͸3FBDU$VSSFOU%JTQBUDIFSDVSSFOUͷ΋ͷ͕࢖ΘΕ͍ͯΔ
    

    View Slide

21. 3FBDU$VSSFOU%JTQBUDIFSDVSSFOU͸
    Ͳ͜Ͱ஋͕ઃఆ͞Ε͍ͯΔͷ͔ʁ
    

    View Slide

22. 3FBDU$VSSFOU%JTQBUDIFSDVSSFOUͰݕࡧͯ͠Έͨ
    

    View Slide

23. ͦͯͨ͠ͲΓண͍ͨ3FBDU'JCFS)PPLTOFXKT
    

    View Slide

24. ͓ͦΒ͘͜͜Ͱ%JTQBUDIFS͕ઃఆ͞Ε͍ͯΔ
    SFOEFS8JUI)PPLT
    ؔ਺
    IUUQTHJUJP+-MD
    

    View Slide

25. )PPLT%JTQBUDIFS0O.PVOUΛݟͯΈΔ
    

    View Slide

26. )PPLT%JTQBUDIFS0O6QEBUFΛݟͯΈΔ
    IUUQTHJUJP+-#WP
    

    View Slide

27. ͜͜·ͰͰཧղͰ͖ͨ͜ͱ
    w EJTQBUDIFS͸͓ͦΒ͘)PPLT%JTQBUDIFS0O.PVOUPS
    )PPLT%JTQBUDIFS0O6QEBUFΛ࢖༻͢Δ
    w VTF4UBUFͷ࣮ଶ͸NPVOU4UBUFPSVQEBUF4UBUF
    

    View Slide

28. ਖ਼͍͔֬͠ೝ͢ΔͨΊʹ
    εςοϓ࣮ߦͯ͠ΈΑ͏
    

    View Slide

29. View Slide

30. View Slide

31. ͜͜·ͰͰ֬ೝͰ͖ͨ͜ͱ
    w ॳճͷඳը࣌ͷVTF4UBUF͸NPVOU4UBUF
    w ࠶ඳըͷ৔߹͸VTF4UBUF͸VQEBUF4UBUF
    

    View Slide

32. NPVOU4UBUF͸ͳʹΛ͍ͯ͠Δͷ͔ʁ
    IUUQTHJUJP+-MD
    

    View Slide

33. NPVOU4UBUFͱ͸ͳʹ͔ʁ
    w )PPLͰঢ়ଶ؅ཧ͍ͯ͠ΔΆ͍
    w EJTQBUDI"DUJPOͷͳ͔ͰԿ͔͠Β஋Λߋ৽͢Δ࢓૊ΈΛ΋͍ͬͯΔ
    w ࣮ࡍͷ஋Λม͑Δͷ͸RVFVFͷ෦෼ʁ
    

    View Slide

34. EJTQBUDI"DUJPOΛݟͯΈΑ͏
    

    View Slide

35. Α͘Θ͔Βͳ͍͗͢͞Δɾɾɾ
    

    View Slide

36. ͱΓ͋͑ͣVQEBUF4UBUFΈͯΈΕ
    ͹ͳΜ͔Θ͔Δ͔΋ʁ
    

    View Slide

37. VQEBUF4UBUF͸࣮ଶ͸VQEBUF3FEVDFSΛίʔϧͯ͠Δ͚ͩ
    

    View Slide

38. VQEBUF3FEVDFS·͡Θ͔ΒΜʜ
    

    View Slide

39. ίʔυಡΜ͚ͩͩ͡Ό
    Θ͔Βͳ͍ɾɾɾ
    

    View Slide

40. VQEBUF4UBUFͱEJTQBUDI"DUJPO
    ͷؔ܎ੑΛߟ͑ͯΈΔ
    

    View Slide

41. Χ΢ϯτΞοϓϘλϯ
    ͕ԡ͞ΕΔ
    %JTQBUDIFS͕࣮ߦ͞Ε
    Δ
    VQEBUF4UBUF͕࣮ߦ͞
    ΕΔ
    

    View Slide

42. %JTQBUDI"DUJPOͷίʔυൈਮ
    

    View Slide

43. VQEBUF3FEVDFSͰ஋Λߋ৽͍ͯ͠ΔΆ͍Օॴ
    VQEBUFม਺ͷ࣮ଶ͸͓ͦΒ͘%JTQBUDI"DUJPOͰઃఆͨ͠RVFVF
    

    View Slide

44. ͳΜͱͳ͘ཧղͨ͜͠ͱ
    w %JTQBUDI"DUJPOͰRVFVFʹ৽ͨͳ஋Ληοτ͢Δ
    w VQEBUF3FEVDFSଆͰͦͷRVFVFΛड͚औΓ஋ΛมԽͤ͞Δ
    

    View Slide

45. ·ͩཧղͷղ૾౓͕௿͍ʜ
    

    View Slide

46. ݶքΛײͨ͡ͷͰNJ[DIJେઌੜͷ
    ຋༁هࣄΛಡΜͰݟΔ
    IUUQTHJTUHJUIVCDPNNJ[DIJGBEGDEGCDBCDCEEE
    

    View Slide

47. ࠷ॳ͔Β͜ͷهࣄಡΜͰ͓͚͹Α
    ͔ͨͬͨʜ
    

    View Slide

48. ·ͱΊ
    w VTF4UBUF͸NPVOU4UBUF΍VQEBUF4UBUFͳͲঢ়گʹԠ࣮ͯ͡ࡍʹ࣮ߦ͢Δؔ
    ਺͕ҧ͏
    w %JTQBUDI"DUJPO͔Βઌ͸3FBDUΛશମతʹ͋Δఔ౓ཧղͯ͠ͳ͍ͱίʔυΛ
    ಡΈղ͘ͷ͸ݫͦ͠͏
    w ͔ͯಡΉඞཁ͋Δͷ͔ʁ
    w ͍͔ͭϦϕϯδ͍ͨ͠ʜ
    

    View Slide

49. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide