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

5分でわかる React "Suspense"

5分でわかる React "Suspense"

Roppongi.js #1

20451aa93aace2f5279f5ea2e7a9c89d?s=128

Kento Moriwaki

March 20, 2018
Tweet

Transcript

  1. ©2018 Wantedly, Inc. 2018.3.20 - ෼ͰΘ͔Δ 3FBDU4VTQFOTF 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. 3FBDU4VTQFOTF  5JNF4MJDJOH

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

  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 %ZOBNJDJNQPSU΋αΫαΫ͔͚Δ w ඇಉظ௨৴Λ͢Δίϯϙʔωϯτ΋ɺ4UBUFMFTT GVODUJPOBMDPNQPOFOUͰ͔͚Δ

    Α͘ͳΔ͜ͱ
  14. ©2018 Wantedly, Inc. w ͍͔ͭΒ࢖͑Δͷʁ w ࣍ظWFSTJPOͷ͔Ͱ࢖͑Δͱ৴͍ͯ͡·͢ w ৮ͬͯΈ͍ͨΜ͚ͩͲ w

    IUUQTDPEFTBOECPYJPT[LYWLͰ৮ͬͯΈΔ͜ͱ͕Ͱ͖·͢ w 3FEVYͲ͏ͳΔͷʁ w ಛʹؔ܎͸ͳ͍͚ͲɺIUUQTHJUIVCDPNSFBDUKTSFBDUSFEVYJTTVFT Ͱٞ࿦͍ͯ͠·͢ Question