React Conf 2018で公式に発表された React Hooks による影響について、今わかっている範囲で個人的にいろいろ考えたものです。
文中で紹介している本『りあクト! TypeScriptで始めるつらくないReact開発』は https://oukayuka.booth.pm/ で好評販売中。
recomposeͱԿͩͬͨͷ͔ɺYuka O’oka @oukayukaHooks·ͨͷശʹ͍ͭͯͷߟ͕։͚ͨύϯυϥ
View Slide
Who is me?ϑϦʔϥϯεͰݱࡏReactΛઐʹ͢ΔϑϩϯτΤϯυΤϯδχΞɻ։ൃΛத৺ʹڭҭ࠾༻ͷ͓ख͍ɺΞδϟΠϧಋೖͳͲ͚ෛ͍·͢ɻReactྺ΄ͲͰɺͦͷલओʹRailsͰ͓ࣄΛͯ͠·ͨ͠ɻForkwellͷॳࣄۀऀˍϓϩμΫτϚωʔδϟʔͱ͍͏ܦྺ͋Γ·͢ɻେԬ༝Ղ Yuka O'oka
WorksʰΓ͋Ϋτʂʱͱ͍͏ React ×TypeScriptͷຊ֨తͳೖॻΛ൦͠·ͨ͠ɻ։࠵෦ɺޙ௨ൢͰ෦ͷ௨ࢉ෦ΛചΓ্͛·ͨ͠ɻٕज़ॻయ ʹͯɺ201810݄8ʹ։࠵͞Εͨۙ͘ɺۀࢽ൛ग़൛༧ఆɻoukayuka.booth.pmBOOTH ʹͯݱࡏධൢചதʂ
ReactΛ͏ࡍʹඞཁͱͳΔݴޠɺؔܕϓϩάϥϛϯάɺίϯϙʔωϯτͷجຊݪଇͱ͍ͬͨجૅ͔Β࢝·Γɺۀ༻ͷେن։ൃΛߟྀͨ͠ɺ3FDPNQPTFΛͬͨؔίϯϙʔωϯτʴHOCͷϓϥΫςΟεʹਐΉͱ͍͏ߏͰͨ͠ɻ
React Conf 2018ͰͷެࣜʹΑΔ͜ͷεϐʔνɺಉ࣌ʹެ։͞Εͨ16.7.0-alpha.0ʹͯReact HooksͳΔػೳ͕Ճ͞Εͨ͜ͱ͕ൃද͞Ε·ͨ͠ɻͦΕ͔ΒΘ͔ͣ17ޙ…
ͦͯ͠ྲྀΕ͖ͯͨ͜ͷπΠʔτʮ3FDPNQPTFɺϝϯςΊΔͬͯΑʯ
ʀТʀA
͍ܰύχοΫʹ
ͦΜͳͱ͖ɺϙʔϯ̇ʮ͑ɺ୭ʁʯ
·͔͞ͷ%BOઌੜͰͨ͠ʢসࠓճͷมߋͷ͍ͤͰɺ͋ͳͨͷࣥචϓϥϯΛແ͠ʹͯ͠ΰϝϯͶɻ͍ͩ͡ΐ͏Ϳʁͦ͏ɺΑ͔ͬͨͰ͢ ??
͘͢͝ؾݣ͍ͷਓͰͨ͠ʜDan Abramov ઌੜɺGitHub Issue ͚ͩͰͳ͘ɺReddit ͷٞ Twitter ͰͷԠࡉ͔͘ϑΥϩʔ͍ͯͯ͠ɺຊޠͷπΠʔτʹ·ͰϦϓΛฦͯ͘͠ΕΔՋਓؾݣ͍ͷਓͰͨ͠ɻ
ؓٳ3FUVSOUPPVSTVCKFDU
Recomposeͱؔίϯϙʔωϯτ HOCʢίϯϙʔωϯτΛҾʹͱΓɺػೳΛ߹ͨ͠৽͍͠ίϯϙʔωϯτΛฦؔ͢ʣͷͨΊͷReactϢʔςΟϦςΟɻؔίϯϙʔωϯτʹ-PDBM4UBUFϥΠϑαΠΫϧϝιουΛՃͨ͠Γɺෳͷ)0$Λ߹ͯ͠ͻͱͭʹͨ͠Γͱ͍ͬͨ༻్ʹΘΕ͍ͯͨɻIUUQTHJUIVCDPNBDEMJUFSFDPNQPTF
ReduxReact RouterɺFormikɺreact-i18nextͱ͍ͬͨଟ͘ͷαʔυύʔςΟϥΠϒϥϦ͕HOCͰػೳΛఏڙ͓ͯ͠Γɺؔίϯϙʔωϯτ + HOC+ RecomposeͷΈ߹Θͤɺҙࣝͷߴ͍։ൃऀͨͪʹͱͬͯమ൘ͱݴͬͯաݴͰͳ͔ͬͨɻ
ͳͥRecompose։ൃΛࢭΊΔͷ͔
Recompose ͷ࡞ऀͰ͋Δ Andrew Clark ͕Facebook ʹδϣΠϯͯ͠ Hooks Λ࡞͔ͬͨΒɻͲ͏ΓͰ Recompose ͷ withState ͱɺHooks ͷuseState ͕ࣅͯΔΘ͚Ͱ͢Ͷɻ
ͦΕͰɺ͜Ε͔ΒͲ͏ͳΔͷʁ•ύϯυϥͷശ։͔ΕͨͷͰɺ͏ޙΓͳ͍ɻReact ք۾ࠓޙɺHooks Λத৺ʹ࠶ฤ͞ΕΔ•HOCɺRender Props ϑΣʔυΞτ͍ͯ͘͠•Ϋϥείϯϙʔωϯτͦͷ͏ͪඇਪʹͳΓͦ͏ɻͭ·Γɺ͕ͯ͢ FʢFunction ComponentʣʹͳΔݸਓత؍ଌൣғͰͷ༧ଌͰ͕͢ʜ
•useEffect ʹΑΓɺϥΠϑαΠΫϧϝιουΘΕͳ͘ͳΔ•Redux ͕ͳ͘ͳΔ͜ͱͳ͍ͷͰɻͨͩ͠connect() ͷΘΓʹ useRedux() ͷΑ͏ͳΠϯλʔϑΣʔεʹͳΔ Provide React Hooks · Issue #1063 · reduxjs/react-redux•Hooks ରԠ͕ΕͨϥΠϒϥϦɺͦͷϙδγϣϯΛΘΕΔ֪มಈ͕ى͖ͦ͏
ʮ͜Μͳࠞཚͯͯ͠ React ͍ͩ͡ΐ͏Ϳͳͷʁʯ͜ͷ૽ಈɺ3BJMTΛܥ͔Β͍ͬͯͨࢲʹطࢹײ͕͋Γ·͢ʜɻ
ͪΐ͏Ͳલͷ݄ɺ3BJMTͷ࡞ऀ%BWJE)BOTTPOʢ%))ʣࣗͷϒϩάͰɺ࣍ظόʔδϣϯͷ3BJMTɺ࣌ʮΩϨΠͳ3BJMTʯͱͯ͠ྗΛ৳͍ͯͨ͠.FSCͱ౷߹͞Εɺ·ͨ.FSCͷ։ൃऀͨͪ3BJMTͷίΞνʔϜʹࢀՃ͢Δ͜ͱʹͳͬͨͱൃද͠·ͨ͠ɻ3BJMTίϛϡχςΟ૽વͱͳΓɺ͕͔ΓͰ݄ʹ͕ϦϦʔε͞ΕΔ·Ͱࠞཚ͕ଓ͖·ͨ͠ɻ
ϦϦʔε͞Εͨ3BJMT෦࣮తʹΉ͠Ζ.FSCͱݺͿ͖ͷͰޙํޓੑͳ͍ʹ͔ͬͨ͠ͷͰ͕͢ɺͦͷ݁Ռɺ3BJMTࠓօ͞Μ͕͍ͬͯΔΑ͏ͳϞδϡϥϦςΟ͕ߴ͘ɺΫϦʔϯͰɺ3&45GVMͳϑϨʔϜϫʔΫʹੜ·ΕมΘͬͨͷͰͨ͠ɻɻ3FBDUɺ3FEVYͷ%BO"CSBNPW3FDPNQPTFͷ"OESFX$MBSLΛίΞνʔϜʹऔΓࠐΈɺ͜ΕҎ্ޙͰ͏ݱ࣮తʹແཧɺͱ͍͏λΠϛϯάͰେ෯վมΛͿͬ͜ΜͰ͖·ͨ͠ɻ
ͭ·Γɺࠓճͷ૽ಈΤϙοΫϝΠΩϯάͳϑϨʔϜϫʔΫ͕ɺ͞ΒͳΔීٴͷͨΊʹӡ໋తʹܦͳ͚ΕͳΒͳ͍ɺͳͷͰɺͱࢲࢥ͏ͷͰ͢ɻʹҰͷେมֵ
ΫϥείϯϙʔωϯτΛഉͯؔ͠ίϯϙʔωϯτͷΈΛ༻͍ɺίϯϙʔωϯτͷϥΠϑαΠΫϧͰͳ͘ɺΑΓ֩৺తͳ)PPLTʹ෭࡞༻Λهड़͢Δͷɺ3FBDUͷୈҰݪଇͰ͋Δʮ%FDMBSFUJWFʢએݴతʣʯʹཱͪฦͬͯɺΑΓ 3FBDUΛγϯϓϧʹ͢Δͷͩͱߟ͑·͢ɻ
ʮVTF&⒎FDUͷςετͲ͏ͬͯॻ͘ͷʁʯͱ͔ʮDPNQPOFOU8JMM6ONPVOU͑ͳ͍ͱϝϞϦϦʔΫى͜͢Μ͡Όͳ͍ͷʁʯͱ͍͏ʹ͍ͭͯɺ%BOઌੜᐌ͘ʮ͜Ε͔Βߟ͑Δʯʢসʣͩͦ͏Ͱ͕͢ɺ3BJMTͷؒͷࠞཚͷ͜ͱΛߟ͑Εɺ3FBDUͷίΞνʔϜͬͱਝʹࣄଶΛऩଋͯ͘͠ΕΔͷͱ৴͡·͢ɻ
ʰΓ͋Ϋτʂʱۀࢽ൛ɺ3FBDU)PPLTΛલఏͱͨ͠େ෯৽ʹͳΔ༧ఆɺͱ͍͏͔ͦ͏ͤ͟ΔΛಘͳ͍ͷͰɺओཁͳαʔυύʔςΟϥΠϒϥϦΛؚΊͯҰ௨ΓରԠ͞ΕɺϕετϓϥΫςΟεཱ͕֬͞Εͯɺ͜ͷࠞཚ͕ૣ͘ऩ·ͬͯ͘ΕͨΒ͍͍ͳ͋ɺͱ͍͏ظؚΈͰ͕͢ʜʜɻ
͋ͱͰಡΉʗௌ͘Making Sense of React Hooks – Dan Abramov – Medium27: React Today and Tomorrow with the React Core Team | React Podcast
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠