React NativeアプリにRecoilを導入した話

Transcript

1. 3FBDU
   /BUJWF
   4UBUF
   .BOBHFNFOU
   -JCSBSZ d
   3FBDU
   /BUJWFΞϓϦʹ3FDPJMΛಋೖͨ͠࿩
   d 4IJOKJ
   ,VSPTBXB
   3FBDU
   /BUJWF
   .BUTVSJ
   
   
   
2. ൃද಺༰ʹ͍ͭͯ w ಺༰
   w 3FDPJM
   ʹ͍ͭͯͬ͘͟Γઆ໌
   w 4UBUF
   .BOBHFNFOU
   ʹ͍ͭͯͷৄࡉͳઆ໌΍ൺֱݕ౼͸ߦ͍·ͤΜ
   w 3FBDU
   /BUJWF
   ։ൃΛ࢝Ίͯ൒೥͘Β͍ͳͷͰɺؒҧ͍౳͋Ε͹͝ࢦఠ͓ئ͍͠·͢
   w ର৅ऀ
   w 4UBUF
   .BOBHFNFOU
   -JCSBSZ
   Λ࢖ͬͨ͜ͱ͕ͳ͍ํ
   w 3FDPJM
   ʹ͍ͭͯؾʹͳ͍ͬͯΔํ
   w 3FBDU
   /BUJWFͰ໰୊ͳ͘࢖͑Δ͔ؾʹͳ͍ͬͯΔํ
3. ͓఻͍͑ͨ͜͠ͱ ಋೖͷഎܠ 3FDPJM
   ʹ͍ͭͯ 3FBDU
   /BUJWF؀ڥԼͰى͜Δ
   *TTVFT
   ʹ͍ͭͯ
4. 3FDPJMಋೖͷഎܠ w ৽نػೳ͓Αͼ৽نը໘ͷ։ൃத
   w ༷ʑͳσʔλͷ
   औಘฤूૹ৴
   ͳͲ͕ߦΘΕΔػೳ
   w ෳ਺ը໘Ͱڞ௨ͱͯ͠࢖༻͢Δ஋΋ଘࡏ
   w ը໘಺Ͱѻ͏ػೳσʔλ͕ଟ͍ͨΊɺѻ͏4UBUF΋ଟ͍
5. 4UBUF
   .BOBHFNFOU
   -JCSBSZ 4UBS਺LҎ্ͷ
   4UBUF
   .BOBHFNFOU
   -JCSBSZ w 4UBS਺ɿ
   L
   w ࠷΋ଟ͘࢖ΘΕ͍ͯΔ 3FEVY .PC9 w 4UBS਺ɿ
   L
   w 4JNQMF 94UBUF w 4UBS਺ɿ
   L
   w ঢ়ଶભҠɺՄࢹԽπʔϧ΋ଘࡏ w 4UBS਺ɿ
   L
   w (SBQI2-Ͱ࢖༻ BQPMMPDMJFOU 3FDPJM w 4UBS਺ɿ
   L
   w 4JNQMFɺ'$Ͱ࢖༻ ;VTUBOE w 4UBS਺ɿ
   L
   w 'MVYϕʔε IUUQTHJUIVCDPNPMFHSKVNJOBXFTPNFSFBDUTUBUFNBOBHFNFOU
6. ͓఻͍͑ͨ͜͠ͱ ಋೖͷഎܠ 3FDPJM
   ʹ͍ͭͯ 3FBDU
   /BUJWF؀ڥԼͰى͜Δ
   *TTVFT
   ʹ͍ͭͯ
7. 3FDPJM w 4UBUF
   .BOBHFNFOU
   -JCSBSZ
   w 'BDFCPPL͕։ൃ
   w &YQFSJNFOUBM
   ͱ͍͏Ґஔ͚ͮ
   w 3FBDUͷ)PPLʹ΋ͱ͍ͮͨ*OUFSGBDF
   w IUUQTSFDPJMKTPSHEPDTJOUSPEVDUJPONPUJWBUJPO
   w +PUBJ
   ͳͲͷɺ3FDPJMʹӨڹΛड͚ͨ-JCSBSZ΋ଘࡏ
8. 3FDPJM const TextState = atom({key: 'Text', default: ‘'}); const Content: React.FC = () => { const [text, setText] = useRecoilState<string>(TextState); return ( <TextInput value={text} onChange={(event) => { setText(event.nativeEvent.text) }} /> ) } w "UPNΛఆٛ
   w $PNQPOFOU಺෦Ͱ3FDPJM4UBUFΛఆٛ
   ˠ
   VTF4UBUFͱಉ͡Α͏ͳ࢖͍ํͰ࢖༻Մೳ
   w ͦͷଞʹ΋4FMFDUPS΍"UPN4FMFDUPSΛα ϙʔτ͢ΔͨΊͷ"1*͕͋Δ
9. 3FDPJM
   ֓ཁ·ͱΊ w '$ʹ΋ͱ͍ͮͨ*OUFSGBDFͰ࢖༻Ͱ͖Δ4UBUF
   .BOBHFNFOU
   -JCSBSZ
   w +PUBJ
   ͳͲͷӨڹΛड͚ͨ-JCSBSZ΋ଘࡏ
   w "UPN4FMFDUPSΛఆٛͯ͠ɺ)PPLͷΑ͏ʹݺͼग़͢͜ͱͰ࢖༻Ͱ͖Δ
   w γϯϓϧ
   w ߋ৽͞Εͨ$PNQPOFOUͷΈ࠶ඳը͞ΕΔ
   w ۩ମతͳ࢖༻ํ๏͸%PDVNFOUΛ͝ࢀরԼ͍͞
10. ͓఻͍͑ͨ͜͠ͱ ಋೖͷഎܠ 3FDPJM
    ʹ͍ͭͯ 3FBDU
    /BUJWF؀ڥԼͰى͜Δ
    *TTVFT
    ʹ͍ͭͯ
11. $POUSPMMFE
    $PNQPOFOUT w ࣗ਎Ͱঢ়ଶΛอ࣋͢Δ$PNQPOFOUT
    w 3FBDU
    JOQVU
    UFYUBSFB
    TFMFDU
    ͳͲ
    w 3FBDU
    /BUJWF
    5FYU*OQVU
    4XJUDI
    ͳͲ
    w 3FBDU
    /BUJWFͷ$POUSPMMFE
    $PNQPOFOUͷ4UBUFͱͯ͠3FDPJMͷ4UBUFΛ࢖༻ ͢Δͱɺෆ੔߹͕ൃੜ͢Δ IUUQTSFBDUKTPSHEPDTGPSNTIUNMDPOUSPMMFEDPNQPOFOUT
12. ྫ
    5FYU*OQVU VTF4UBUFΛ࢖༻͢Δ const Content: React.FC = () => { const [text, setText] = useState<string>(''); return ( <TextInput value={text} onChange={(event) => { setText(event.nativeEvent.text) }} /> ) }
13. ྫ
    5FYU*OQVU 3FDPJM4UBUFΛ࢖༻͢Δ const TextState = atom({key: 'Text', default: ‘'}); const Content: React.FC = () => { const [text, setText] = useRecoilState<string>(TextState); return ( <TextInput value={text} onChange={(event) => { setText(event.nativeEvent.text) }} /> ) }
14. VTF4UBUF VTF3FDPJM4UBUF
15. ݪҼ w ͓ͦΒ͘ TFU3FDPJM4UBUF಺෦Ͱඇಉظॲ ཧ͕૸͍ͬͯΔ
    w ͓ͦΒ͘ 5FYU*OQVU͸ಉظతʹ஋͕ߋ৽ ͞ΕΔ͜ͱΛલఏʹ$PNQPOFOU͕࡞ΒΕ ͍ͯΔ
    w Ұॠ͚ͩWBMVF͕ݩͷ஋ʹ໭ΔͨΊɺ͜ ͷΑ͏ͳࣄ৅͕ى͖Δ
    w 3FDPJMΛ࢖༻͠ͳͯ͘΋ɺӈͷΑ͏ͳίʔ υͩͱTFU3FDPJM4UBUFͱಉ݁͡ՌʹͳΔ const Content: React.FC = () => { const [text, setText] = useState<string>(''); return ( <TextInput value={text} onChange={(event) => { const text = event.nativeEvent.text; setTimeout(() => { setText(text) }, 0) }} style={styles.sectionContainer} /> ) }
16. ରࡦ w جຊతʹ͸ɺը໘಺ͷΈͰߋ৽͞Ε ͨ஋Λ࢖༻͢Δ৔߹ʹ͸ɺ3FDPJMͷ 4UBUFΛ࢖༻ͤͣɺTFU4UBUFΛ༻͍ Δ
    w Ͳ͏ͯ͠΋3FDPJMΛ࢖͍͍ͨ৔߹ ͸ɺVTF4UBUFͰҰ࣌తʹ஋Λߋ৽͢ Δ͜ͱͰճආͰ͖Δ const TextState = atom({key: 'Text', default: ''}); const Content: React.FC = () => { const [text, setText] = useState<string>(''); const setGlobalText = useSetRecoilState(TextState); useEffect(() => { setGlobalText(text); }, [text]) return ( <TextInput value={text} onChange={(event) => { const text = event.nativeEvent.text; setText(text) }} style={styles.sectionContainer} /> ) }
17. ͦͷଞ(JUIVCʹڍ͕͍ͬͯΔ*TTVFT
18. 3FMFBTF
    #VJMEͰ4UBUFߋ৽͕Ͱ͖ͳ͍ w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT
    w 3FBDU
    /BUJWFͷΈͰى͜ΔΑ͏
    w ࠶ݱ͢ΔͷͰ͋Ε͹க໋తͳෆ۩߹ͱͳΓಘΔ
    w ݱঢ়ɺಛʹى͖ͨ͜ͱ͸ͳ͍
19. .FNPSZ
    -FBL w ͍͔ͭ͘*TTVFT͕͕͍͋ͬͯΔ
    w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT
    w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT
    w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT
    w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT
    w BUPN'BNJMZ΍TFMFDUPS'BNJMZͳͲͷ"1*Λ࢖༻͢Δͱى͖Δʁ
    w ͜ͷෆ۩߹Λཧ༝ʹ
    +PUBJ
    Λ࢖༻͍ͯ͠Δͱ͍͏ίϝϯτ΋ݟ͔ͭͬͨ
20. ·ͱΊ
21. ·ͱΊ w 3FDPJM͸ͱͯ΋࢖͍΍͍͢
    w "UPN4FMFDUPSΛ࢖༻͢Δ͜ͱͰɺ(MPCBMͳ4UBUFΛVTF4UBUFͱಉ͡ײ֮Ͱ࢖༻Ͱ͖Δ
    w ॊೈ͗͢ΔͷͰɺνʔϜ։ൃͰ࣮ࡍʹར༻͢Δࡍʹ͸࢖༻ํ๏Λݕ౼ͨ͠΄͏͕ྑͦ͞͏
    w 3FBDU
    /BUJWF؀ڥԼͰ໰୊ͳ͘࢖༻Ͱ͖͍ͯΔ
    w -JCSBSZͱͯ͠͸&YQFSJNFOUBM
    ͳҐஔ෇͚
    w ͍͔ͭ͘ͷ՝୊
    w 3FBDU
    /BUJWFͷ$PNQPOFOUͱซ༻͢Δ͜ͱͰى͖Δ*TTVF
    w ಛఆ؀ڥ΍࢖༻ํ๏Ͱى͖Δ*TTVF
22. ॴײ w 3FBDUͷΤίγεςϜ͸ૉ੖Β͍͠
    w 4UBUF
    .BOBHFNFOU
    -JCSBSZͷબ୒ࢶ͕ଟ͍
    w બ୒ࢶ͕ଟ͗ͯ͢ɺ໎͏͜ͱ΋ଟ͍
    w 3FDPJMҎ֎ͷ4UBUF
    .BOBHFNFOU
    -JCSBSZʹ͍ͭͯ΋ֶͼ͍ͨ
    w ঢ়گʹԠͯ͡બఆͰ͖ΔΑ͏ɺ༷ʑͳ-JCSBSZͷ࣮༻ྫΛֶͼ͍ͨ