5分でわかる React "Suspense"

Roppongi.js #1

Transcript

1. ©2018 Wantedly, Inc. 2018.3.20 - ෼ͰΘ͔Δ
   3FBDU
   4VTQFOTF 3PQQPOHJKT
    ,FOUP
   .PSJXBLJ @kento_trans_lu
2. ©2018 Wantedly, Inc. ͜ͱͷ࢝·Γ͸ɺ͋ΔπΠʔτͩͬͨɻ Reactͷ։ൃऀ @dan_abaramov
3. ©2018 Wantedly, Inc. ଓ͚ͯɺ
4. ©2018 Wantedly, Inc. +4$POG
   *DFMBOEͰൃද͞Εͨͷ͕ɺ ͦͷπΠʔτ͔Βिؒޙɻ https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
5. ©2018 Wantedly, Inc. 3FBDU
   4VTQFOTF
   
   5JNF
   4MJDJOH
6. ©2018 Wantedly, Inc. 3FBDU
   4VTQFOTF
   
   5JNF
   4MJDJOH ࠓ೔͸ͪ͜ΒΛগ͚ͩ͠঺հ ͜Ε͔Β࿩͢͜ͱ͸ɺ·ͩϦϦʔε΋͞Ε͍ͯͳ͍͠ɺ ֬ఆͨ͠৘ใͰ΋ͳ͍͜ͱΛɺྃ͝ঝ͍ͩ͘͞
7. ©2018 Wantedly, Inc. w ඇಉظ௨৴ͳͲͷະܾఆͳঢ়ଶΛѻ͏ͨΊͷ֓೦
   w ༷ʑͳωοτ؀ڥͷϢʔβʔʹૉ੖Β͍͠69Λఏ ڙ͢ΔͨΊʹ࡞ΒΕͨ
   w 4VTQFOTFͱ͍͏໊લͷԿ͔͕ϦϦʔε͞ΕΔΘ ͚Ͱ͸ͳ͍ React Suspenseͱ͸ɺ
8. ©2018 Wantedly, Inc. ·ͣ͸Α͋͘Δඇಉظ௨৴͔Β
9. ©2018 Wantedly, Inc. Suspense͕͋Δͱ͖
10. ©2018 Wantedly, Inc. simple-cache-provider? simple-cache-providerΛ࢖Θͳ͍ྫ
11. ©2018 Wantedly, Inc. w SFOEFSதʹ1SPNJTFΛ౤͛Δ͜ͱͰɺ·ͩදࣔ ͷ׬͕ྃͰ͖ͳ͍͜ͱΛڭ͑Δɻ
    w ͦͷ1SPNJTF͕SFTPMWF͞ΕͨλΠϛϯάͰɺ
 ΋͏Ұ౓SFOEFS͕૸Δ PromiseΛthrowͨ͠!?
12. ©2018 Wantedly, Inc. React.Timeout PromiseΛthrow͢ΔComponentΛϥοϓͯ͠࢖͏ɻ Ұఆ࣌ؒҎ্ͨͬͨΒSpinnerΛදࣔͯ͠ΈΔɻ
13. ©2018 Wantedly, Inc. w "1*ϦΫΤετΛαΫαΫ͔͚Δ
    w %ZOBNJD
    JNQPSU΋αΫαΫ͔͚Δ
    w ඇಉظ௨৴Λ͢Δίϯϙʔωϯτ΋ɺ4UBUFMFTT
    GVODUJPOBM
    DPNQPOFOUͰ͔͚Δ Α͘ͳΔ͜ͱ
14. ©2018 Wantedly, Inc. w ͍͔ͭΒ࢖͑Δͷʁ
    w ࣍ظWFSTJPOͷ͔Ͱ࢖͑Δͱ৴͍ͯ͡·͢
    w ৮ͬͯΈ͍ͨΜ͚ͩͲ
    w IUUQTDPEFTBOECPYJPT[LYWL
    Ͱ৮ͬͯΈΔ͜ͱ͕Ͱ͖·͢
    w 3FEVYͲ͏ͳΔͷʁ
    w ಛʹؔ܎͸ͳ͍͚Ͳɺ
    IUUQTHJUIVCDPNSFBDUKTSFBDUSFEVYJTTVFT
    Ͱٞ࿦͍ͯ͠·͢ Question