React Suspense

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 koba04
June 19, 2018

React Suspense

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

June 19, 2018
Tweet

Transcript

  1. 4VTQFOTF IUNMK   !LPCB

  2. None
  3. 8IBUJT4VTQFOTF

  4. https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

  5. w 4VTQFOTFJTBGFBUVSFUPIBOEMFBTZODVQEBUFT w )5513FRVFTU w %ZOBNJDJNQPSU w 1SPNJTFBTBQSJNJUJWF w )BOEMJOHBTZODISPOPVTVQEBUFTBSFTPIBSEʜ

    w 4UBSU-PBEJOH "1*4VDDFTT 'BJMVSFʜ w .BOZMPBEJOHTQJOOFST KBOL6*CZGBTUSFTQPOTFT 4VTQFOTF
  6. w /P w 4VQQPSUJOH1SPNJTF$PNQPOFOUEPFTO`UTPMWFQSPCMFNT w )PXEPZPVMJGUVQEFQFOEFODJFTPG1SPNJTF$PNQPOFOUT JOBODFTUPST *T4VTQFOTFTVQQPSUJOH1SPNJTF$PNQPOFOU // How

    do you show loading message // until the user list has been fetched? {isLoading ? <Loading /> : <UserListPage />}
  7. )PXEPFT4VTQFOTFXPSL

  8. w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT XIJDIUISPXTB 1SPNJTFJOTUFBEPGBO&SSPSUIPVHI )PXEPFT4VTQFOTFXPSL User Fallback Timeout throw Promise!

    (suspend) timeout render with fetched Data (resume)
  9. 4JNQMF$BDIF1SPWJEFS

  10. https://github.com/facebook/react/tree/master/packages/simple-cache-provider

  11. Empty Pending Resolved Rejected read or preload throw promise return

    value from cache Cache load
  12. )PXUPVTF4VTQFOTF

  13. 4VTQFOTF "1*XJMMCFDIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache();

    const userFetcher = id => SimpleCacheProvider.createResource(id => fetch(`/api/users/${id}`).then(res => res.json()); )(cache, id); const User = props => { const user = userFetcher.read(props.id); return <div>{user.name}</div>; }; const Placeholder = props => ( <React.Timeout ms={props.timeout}> {didExpire => didExpire ? props.fallback : props.children} </React.Timeout> ); <Placeholder fallback=“Loading…” timeout={200}> <User id={100} /> </Placeholder>
  14. 4VTQFOTF "1*XJMMCFDIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache();

    const routeFetcher = Component => SimpleCacheProvider.createResource(Component => import(Component).then(module => module.default); )(cache, Component); const UserPage = () => { const Component = routeFetcher.read(‘./pages/User’); return <Component />; }; const Placeholder = props => ( <React.Timeout ms={props.timeout}> {didExpire => didExpire ? props.fallback : props.children} </React.Timeout> ); <Placeholder fallback=“Loading…” timeout={1000}> <UserPage /> </Placeholder>
  15. %FNP IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP

  16. w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU w 5IFpOBM"1*NJHIUCFDIBOHFE w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO 4VTQFOTF $ npm install

    react@canary react-dom@canary simple-cache-provider
  17. 4VTQFOTFPO443 https://www.youtube.com/watch?v=z-6JC0_cOns

  18. 4VTQFOTFPO"QPMMP https://www.youtube.com/watch?v=fCXYA3lZTbo

  19. w 5IF"1*JTOPUpOBM"1* NJHIUCFDIBOHFE w *IFBSESFOEFSGVODUJPONVTUOPUIBWFBOZTJEFF⒎FDUT  w 1SFMPBEJOHBOEQSFSFOEFSXJUIIJEEFOQSPQT w *OUFHSBUJOHXJUIFDPTZTUFN

    w "XFTPNF8IFODBO*VTF4VTQFOTF  w .BZCFJOʜ 4VTQFOTF
  20. "SFZPVSFBEZGPS4VTQFOTF  5IBOLZPV TQFBLFSEFDLDPNLPCB