React Suspense

Transcript

1. 4VTQFOTF
   IUNMK
   
   !LPCB
   

   View Slide

2. View Slide

3. 8IBUJT4VTQFOTF
   

   View Slide

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

   View Slide

5. w 4VTQFOTFJTBGFBUVSFUPIBOEMFBTZODVQEBUFT
   w )5513FRVFTU
   w %ZOBNJDJNQPSU
   w 1SPNJTFBTBQSJNJUJWF
   w )BOEMJOHBTZODISPOPVTVQEBUFTBSFTPIBSEʜ
   w 4UBSU-PBEJOH "1*4VDDFTT 'BJMVSFʜ
   w .BOZMPBEJOHTQJOOFST KBOL6*CZGBTUSFTQPOTFT
   4VTQFOTF
   

   View Slide

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 ? : }
   

   View Slide

7. )PXEPFT4VTQFOTFXPSL
   

   View Slide

8. w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT XIJDIUISPXTB
   1SPNJTFJOTUFBEPGBO&SSPSUIPVHI
   )PXEPFT4VTQFOTFXPSL
   User
   Fallback
   Timeout
   throw Promise!
   (suspend)
   timeout
   render with
   fetched Data
   (resume)
   

   View Slide

9. 4JNQMF$BDIF1SPWJEFS
   

   View Slide

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

    View Slide

11. Empty
    Pending
    Resolved Rejected
    read or preload
    throw promise
    return value
    from cache
    Cache
    load
    

    View Slide

12. )PXUPVTF4VTQFOTF
    

    View Slide

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 {user.name};
    };
    const Placeholder = props => (
    
    {didExpire => didExpire ? props.fallback : props.children}
    
    );
    
    
    
    

    View Slide

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 ;
    };
    const Placeholder = props => (
    
    {didExpire => didExpire ? props.fallback : props.children}
    
    );
    
    
    
    

    View Slide

15. %FNP
    IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN
    IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP
    

    View Slide

16. w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU
    w 5IFpOBM"1*NJHIUCFDIBOHFE
    w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO
    4VTQFOTF
    $ npm install react@canary react-dom@canary simple-cache-provider
    

    View Slide

17. 4VTQFOTFPO443
    https://www.youtube.com/watch?v=z-6JC0_cOns
    

    View Slide

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

    View Slide

19. w 5IF"1*JTOPUpOBM"1* NJHIUCFDIBOHFE
    w *IFBSESFOEFSGVODUJPONVTUOPUIBWFBOZTJEFF⒎FDUT
    w 1SFMPBEJOHBOEQSFSFOEFSXJUIIJEEFOQSPQT
    w *OUFHSBUJOHXJUIFDPTZTUFN
    w "XFTPNF8IFODBO*VTF4VTQFOTF
    w .BZCFJOʜ
    4VTQFOTF
    

    View Slide

20. "SFZPVSFBEZGPS4VTQFOTF
    5IBOLZPV
    TQFBLFSEFDLDPNLPCB
    

    View Slide