React初心者がHooksを理解するためにコードを読んでみた

by polidog

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ͦ΋ͦ΋3FBDU)PPLTͱ͸ʁ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ͲΜͳ࢓૊Έʹͳ͍ͬͯΔͷ͔ ؾʹͳΔ

Slide 13

Slide 13 text

࣮ࡍʹίʔυΛಡΜͰΈͨ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

3FBDU)PPLTKTSFTPMWF%JTQBUDIFS IUUQTHJUJP+-I:

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

3FBDU*OUFSOBM5ZQFTKT IUUQTHJUJP+-OUB

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

)PPLT%JTQBUDIFS0O.PVOUΛݟͯΈΔ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ਖ਼͍͔֬͠ೝ͢ΔͨΊʹ εςοϓ࣮ߦͯ͠ΈΑ͏

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

NPVOU4UBUF͸ͳʹΛ͍ͯ͠Δͷ͔ʁ IUUQTHJUJP+-MD

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

EJTQBUDI"DUJPOΛݟͯΈΑ͏

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

VQEBUF3FEVDFS·͡Θ͔ΒΜʜ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

%JTQBUDI"DUJPOͷίʔυൈਮ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

·ͩཧղͷղ૾౓͕௿͍ʜ

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ