$30 off During Our Annual Pro Sale. View Details »

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

polidog
December 19, 2020

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

polidog

December 19, 2020
Tweet

More Decks by polidog

Other Decks in Technology

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