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

Ready for React in 2019

koba04
December 08, 2018

Ready for React in 2019

koba04

December 08, 2018
Tweet

More Decks by koba04

Other Decks in Programming

Transcript

  1. 3FBEZGPS
    3FBDUJO
    'SPOUFOE$POGFSFODF'VLVPLB

    !LPCB

    View Slide

  2. View Slide

  3. "HFOEB
    w 'VODUJPO$PNQPOFOU
    w 69GPSBMMVTFST
    w 'VUVSF1MBOT
    w -JWF$PEJOH

    View Slide

  4. 'VODUJPO$PNQPOFOU

    View Slide

  5. 3FBDUNFNP
    w 0QUJNJ[F'VODUJPO$PNQPOFOU
    w 1VSF$PNQPOFOUGPS'VODUJPO$PNQPOFOU

    View Slide

  6. )PPLT
    Custom Hook

    View Slide

  7. w )PPLTNVTUCFDBMMFEJOUIFTBNFPSEFS
    )PPLT
    Hook
    Hook
    next
    Fiber
    memoizedState

    View Slide

  8. "WPJEl8SBQQFSIFMMz
    https://www.youtube.com/watch?v=dpw9EHDh2bM

    View Slide

  9. +BWB4DSJQU`T$MBTTJTIBSE
    w 'PS
    w )BSEUPPQUJNJ[F
    w 'PS
    w AUIJTAPG+BWB4DSJQUIBTNBOZQJUGBMMT

    View Slide

  10. .PSF%FUBJMTʜ
    https://blog.cybozu.io/entry/2018/11/02/113000

    View Slide

  11. 69GPSBMM6TFST

    View Slide












  12. 4VTQFOTF
    1. Throw a Promise
    2. Wait to resolve the Promise
    3. Resume the rendering

    View Slide

  13. 4VTQFOTF
    Throw a Promise
    if the resource doesn’t
    have a cache data

    View Slide

  14. 3FBDUMB[ZXJUI 4VTQFOTF

    w $PEF4QMJUUJOHXJUI%ZOBNJD*NQPSU 4UBHF

    View Slide

  15. 5JNFTMJDJOH
    User Blocking
    Normal Priority

    View Slide

  16. 5JNFTMJDJOH
    w 8PSLJOHPOTUBOEBSEJ[JOHUIFTDIFEVMJOH
    NFDIBOJTNXJUIB$ISPNF5FBN
    w IUUQTHJUIVCDPNTQBOJDLFSNBJOUISFBE
    TDIFEVMJOH
    w 8IBUBCPVU8FC8PSLFSTʁ

    View Slide

  17. /FX1SPpMFS

    View Slide

  18. 69GPSBMMVTFST
    w 4VTQFOTFMB[Z
    w 'PSVTFSTJOIJHITQFFEOFUXPSLBOETMPX
    OFUXPSL
    w 5JNFTMJDJOHMB[Z
    w 'PSVTFSTVTJOHIJHIQPXFSEFWJDFTBOEMPX
    QPXFSEFWJDFT
    w 1SFMPBE1SFSFOEFS

    View Slide

  19. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

    View Slide

  20. 'VUVSF

    View Slide

  21. 3FMFBTF1MBOTGPS4UBCMF
    w 3FBDUMB[ZXJUI4VTQFOTF
    w 3FBDU)PPLT 2

    w $PODVSSFOU.PEF 2

    w %BUBGFUDIJOHXJUI4VTQFOTF NJE

    w 4FSWFS3FOEFSFSGPS4VTQFOTF

    w .PEFSOJ[JOH3FBDU%0.

    w

    Now

    View Slide

  22. 1SFQBSFGPSUIFGVUVSF
    w :PVDBOVTFOFXGFBUVSFTJODSFNFOUBMMZXJUIPVU
    CSFBLJOHDIBOHFT
    w 6TF3FBDU4USJDU.PEF$PNQPOFOU
    w 'JYXBSOJOHTJO4USJDU.PEFʜ4USJDU.PEF

    View Slide

  23. -JWF$PEJOH
    https://github.com/koba04/react-hacker-news-stories

    View Slide

  24. 5IBOLZPV

    speakerdeck.com/koba04

    View Slide