Slide 1
Slide 1 text
4VTQFOTF
IUNMK
!LPCB
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
8IBUJT4VTQFOTF
Slide 4
Slide 4 text
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
Slide 5
Slide 5 text
w 4VTQFOTFJTBGFBUVSFUPIBOEMFBTZODVQEBUFT
w )5513FRVFTU
w %ZOBNJDJNQPSU
w 1SPNJTFBTBQSJNJUJWF
w )BOEMJOHBTZODISPOPVTVQEBUFTBSFTPIBSEʜ
w 4UBSU-PBEJOH
"1*4VDDFTT
'BJMVSFʜ
w .BOZMPBEJOHTQJOOFST
KBOL6*CZGBTUSFTQPOTFT
4VTQFOTF
Slide 6
Slide 6 text
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 ? : }
Slide 7
Slide 7 text
)PXEPFT4VTQFOTFXPSL
Slide 8
Slide 8 text
w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT
XIJDIUISPXTB
1SPNJTFJOTUFBEPGBO&SSPSUIPVHI
)PXEPFT4VTQFOTFXPSL
User
Fallback
Timeout
throw Promise!
(suspend)
timeout
render with
fetched Data
(resume)
Slide 9
Slide 9 text
4JNQMF$BDIF1SPWJEFS
Slide 10
Slide 10 text
https://github.com/facebook/react/tree/master/packages/simple-cache-provider
Slide 11
Slide 11 text
Empty
Pending
Resolved Rejected
read or preload
throw promise
return value
from cache
Cache
load
Slide 12
Slide 12 text
)PXUPVTF4VTQFOTF
Slide 13
Slide 13 text
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
{user.name}
;
};
const Placeholder = props => (
{didExpire => didExpire ? props.fallback : props.children}
);
Slide 14
Slide 14 text
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 ;
};
const Placeholder = props => (
{didExpire => didExpire ? props.fallback : props.children}
);
Slide 15
Slide 15 text
%FNP
IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN
IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP
Slide 16
Slide 16 text
w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU
w 5IFpOBM"1*NJHIUCFDIBOHFE
w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO
4VTQFOTF
$ npm install react@canary react-dom@canary simple-cache-provider
Slide 17
Slide 17 text
4VTQFOTFPO443
https://www.youtube.com/watch?v=z-6JC0_cOns
Slide 18
Slide 18 text
4VTQFOTFPO"QPMMP
https://www.youtube.com/watch?v=fCXYA3lZTbo
Slide 19
Slide 19 text
w 5IF"1*JTOPUpOBM"1*
NJHIUCFDIBOHFE
w *IFBSESFOEFSGVODUJPONVTUOPUIBWFBOZTJEFF⒎FDUT
w 1SFMPBEJOHBOEQSFSFOEFSXJUIIJEEFOQSPQT
w *OUFHSBUJOHXJUIFDPTZTUFN
w "XFTPNF8IFODBO*VTF4VTQFOTF
w .BZCFJOʜ
4VTQFOTF
Slide 20
Slide 20 text
"SFZPVSFBEZGPS4VTQFOTF
5IBOLZPV
TQFBLFSEFDLDPNLPCB