React Suspense

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 koba04
June 19, 2018
Programming
4
12k

React Suspense

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

June 19, 2018
Tweet

More Decks by koba04

See All by koba04
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
0
300
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.3k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
8
7k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
0
81
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
6
990
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.6k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
380
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
11
7.8k

Other Decks in Programming

See All in Programming
3499a1d71fa70b8ee44816ca9e7329fe?s=48 bells17
1
420
4d78b749c315e21a956053dcbf0508a9?s=48 po3rin
1
130
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
240
A3fabd96e2ca4bee5b0333ff2a640f01?s=48 translucens
2
110
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
0
160
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
310
0a98ad166f9cdf8d27d92c37438c6e9d?s=48 matsumana
0
320
4d78b749c315e21a956053dcbf0508a9?s=48 po3rin
2
460
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
2
210
9cbac3a8b2ea3f8f9c79d01aeb050ad3?s=48 shikugawa
1
670
D882856fd493248c73331872a516d1b5?s=48 exsoul
1
120
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
110

Featured

See All Featured
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
293
38k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
91
2.8k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
11k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
620
40k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
3
410
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
99
5.7k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
28
3.1k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
163
18k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
110
24k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.8k

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