5分でわかる React "Suspense"

Roppongi.js #1

Transcript

1. ©2018 Wantedly, Inc.
   2018.3.20 -
   ෼ͰΘ͔Δ
   3FBDU4VTQFOTF
   3PQQPOHJKT
   ,FOUP.PSJXBLJ
   @kento_trans_lu
   

   View Slide

2. ©2018 Wantedly, Inc.
   ͜ͱͷ࢝·Γ͸ɺ͋ΔπΠʔτͩͬͨɻ
   Reactͷ։ൃऀ @dan_abaramov
   

   View Slide

3. ©2018 Wantedly, Inc.
   ଓ͚ͯɺ
   

   View Slide

4. ©2018 Wantedly, Inc.
   +4$POG*DFMBOEͰൃද͞Εͨͷ͕ɺ
   ͦͷπΠʔτ͔Βिؒޙɻ
   https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
   

   View Slide

5. ©2018 Wantedly, Inc.
   3FBDU4VTQFOTF
   
   5JNF4MJDJOH
   

   View Slide

6. ©2018 Wantedly, Inc.
   3FBDU4VTQFOTF
   
   5JNF4MJDJOH
   ࠓ೔͸ͪ͜ΒΛগ͚ͩ͠঺հ
   ͜Ε͔Β࿩͢͜ͱ͸ɺ·ͩϦϦʔε΋͞Ε͍ͯͳ͍͠ɺ
   ֬ఆͨ͠৘ใͰ΋ͳ͍͜ͱΛɺྃ͝ঝ͍ͩ͘͞
   

   View Slide

7. ©2018 Wantedly, Inc.
   w ඇಉظ௨৴ͳͲͷະܾఆͳঢ়ଶΛѻ͏ͨΊͷ֓೦
   w ༷ʑͳωοτ؀ڥͷϢʔβʔʹૉ੖Β͍͠69Λఏ
   ڙ͢ΔͨΊʹ࡞ΒΕͨ
   w 4VTQFOTFͱ͍͏໊લͷԿ͔͕ϦϦʔε͞ΕΔΘ
   ͚Ͱ͸ͳ͍
   React Suspenseͱ͸ɺ
   

   View Slide

8. ©2018 Wantedly, Inc.
   ·ͣ͸Α͋͘Δඇಉظ௨৴͔Β
   

   View Slide

9. ©2018 Wantedly, Inc.
   Suspense͕͋Δͱ͖
   

   View Slide

10. ©2018 Wantedly, Inc.
    simple-cache-provider?
    simple-cache-providerΛ࢖Θͳ͍ྫ
    

    View Slide

11. ©2018 Wantedly, Inc.
    w SFOEFSதʹ1SPNJTFΛ౤͛Δ͜ͱͰɺ·ͩදࣔ
    ͷ׬͕ྃͰ͖ͳ͍͜ͱΛڭ͑Δɻ
    w ͦͷ1SPNJTF͕SFTPMWF͞ΕͨλΠϛϯάͰɺ

    ΋͏Ұ౓SFOEFS͕૸Δ
    PromiseΛthrowͨ͠!?
    

    View Slide

12. ©2018 Wantedly, Inc.
    React.Timeout
    PromiseΛthrow͢ΔComponentΛϥοϓͯ͠࢖͏ɻ
    Ұఆ࣌ؒҎ্ͨͬͨΒSpinnerΛදࣔͯ͠ΈΔɻ
    

    View Slide

13. ©2018 Wantedly, Inc.
    w "1*ϦΫΤετΛαΫαΫ͔͚Δ
    w %ZOBNJDJNQPSU΋αΫαΫ͔͚Δ
    w ඇಉظ௨৴Λ͢Δίϯϙʔωϯτ΋ɺ4UBUFMFTT
    GVODUJPOBMDPNQPOFOUͰ͔͚Δ
    Α͘ͳΔ͜ͱ
    

    View Slide

14. ©2018 Wantedly, Inc.
    w ͍͔ͭΒ࢖͑Δͷʁ
    w ࣍ظWFSTJPOͷ͔Ͱ࢖͑Δͱ৴͍ͯ͡·͢
    w ৮ͬͯΈ͍ͨΜ͚ͩͲ
    w IUUQTDPEFTBOECPYJPT[LYWLͰ৮ͬͯΈΔ͜ͱ͕Ͱ͖·͢
    w 3FEVYͲ͏ͳΔͷʁ
    w ಛʹؔ܎͸ͳ͍͚ͲɺIUUQTHJUIVCDPNSFBDUKTSFBDUSFEVYJTTVFT
    Ͱٞ࿦͍ͯ͠·͢
    Question
    

    View Slide