Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
React Suspense
koba04
June 19, 2018
Programming
4
13k
React Suspense
koba04
June 19, 2018
Tweet
Share
More Decks by koba04
See All by koba04
koba04
0
510
koba04
2
1.4k
koba04
9
7.8k
koba04
0
87
koba04
1
1.1k
koba04
6
1k
koba04
2
1.7k
koba04
2
420
koba04
11
7.9k
Other Decks in Programming
See All in Programming
yoshinoriiiii
0
110
yotuba088
2
600
takapy
0
160
madai0517
1
200
mihyaeru21
0
360
koheisakata
0
150
raulh82vlc
1
260
voyage_tech
0
120
tarugoconf
1
1.6k
hanasuke
1
630
watilde
5
1.4k
deepflow
9
3.5k
Featured
See All Featured
geeforr
332
29k
garrettdimon
288
110k
caitiem20
308
17k
wjessup
339
16k
colly
66
3k
skipperchong
8
720
sachag
446
36k
gr2m
83
11k
schacon
145
6.6k
eileencodes
113
25k
frogandcode
128
20k
tanoku
258
24k
Transcript
4VTQFOTF IUNMK !LPCB
None
8IBUJT4VTQFOTF
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
w 4VTQFOTFJTBGFBUVSFUPIBOEMFBTZODVQEBUFT w )5513FRVFTU w %ZOBNJDJNQPSU w 1SPNJTFBTBQSJNJUJWF w )BOEMJOHBTZODISPOPVTVQEBUFTBSFTPIBSEʜ
w 4UBSU-PBEJOH "1*4VDDFTT 'BJMVSFʜ w .BOZMPBEJOHTQJOOFST KBOL6*CZGBTUSFTQPOTFT 4VTQFOTF
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 />}
)PXEPFT4VTQFOTFXPSL
w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT XIJDIUISPXTB 1SPNJTFJOTUFBEPGBO&SSPSUIPVHI )PXEPFT4VTQFOTFXPSL User Fallback Timeout throw Promise!
(suspend) timeout render with fetched Data (resume)
4JNQMF$BDIF1SPWJEFS
https://github.com/facebook/react/tree/master/packages/simple-cache-provider
Empty Pending Resolved Rejected read or preload throw promise return
value from cache Cache load
)PXUPVTF4VTQFOTF
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>
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>
%FNP IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP
w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU w 5IFpOBM"1*NJHIUCFDIBOHFE w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO 4VTQFOTF $ npm install
react@canary react-dom@canary simple-cache-provider
4VTQFOTFPO443 https://www.youtube.com/watch?v=z-6JC0_cOns
4VTQFOTFPO"QPMMP https://www.youtube.com/watch?v=fCXYA3lZTbo
w 5IF"1*JTOPUpOBM"1* NJHIUCFDIBOHFE w *IFBSESFOEFSGVODUJPONVTUOPUIBWFBOZTJEFF⒎FDUT w 1SFMPBEJOHBOEQSFSFOEFSXJUIIJEEFOQSPQT w *OUFHSBUJOHXJUIFDPTZTUFN
w "XFTPNF8IFODBO*VTF4VTQFOTF w .BZCFJOʜ 4VTQFOTF
"SFZPVSFBEZGPS4VTQFOTF 5IBOLZPV TQFBLFSEFDLDPNLPCB