Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

80b7d87c10fcdb6a0cba4f8b69e933bc?s=47 polidog
December 19, 2020

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

80b7d87c10fcdb6a0cba4f8b69e933bc?s=128

polidog

December 19, 2020
Tweet

Transcript

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

  2. ࣗݾ঺հ w !QPMJEPH w ύʔςΟʔϋʔυגࣜձࣾ w ϑϩϯτΤϯυΤϯδχΞ ݟश͍  w

    ϲ݄ͪΐͬͱલʹύύʹͳΓ·ͨ͠ 
  3. ݁࿦ 3FBDU)PPLTͷίʔυ·͡Α͘Θ͔Βͳ͍ʜ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  19. 3FBDU*OUFSOBM5ZQFTKT IUUQTHJUJP+-OUB

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

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

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

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

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

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

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

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

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

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

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

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

  34. EJTQBUDI"DUJPOΛݟͯΈΑ͏

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

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

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

  38. VQEBUF3FEVDFS·͡Θ͔ΒΜʜ

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

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

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

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

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

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

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

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

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

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

    ͍͔ͭϦϕϯδ͍ͨ͠ʜ
  49. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ