$30 off During Our Annual Pro Sale. View Details »

Suspense and TimeSlicing

koba04
June 26, 2018

Suspense and TimeSlicing

koba04

June 26, 2018
Tweet

More Decks by koba04

Other Decks in Programming

Transcript

  1. 5JNF4MJDJOHBOE4VTQFOTF
    3FBDU+45PLZP+VOF

    !LPCB

    View Slide

  2. View Slide

  3. 3FDBQ3FBDU'JCFS

    View Slide

  4. w 3FBDU'JCFSJTBOVOJUPGXPSL 㲈3FBDU&MFNFOU

    w *UJTQPTTJCMFUPTUPQBOESFTVNFVQEBUFT
    3FDBQ3FBDU'JCFS
    FiberA FiberB FiberD FiberE Commit all SideEffects
    Idle Time Idle Time Idle Time
    SideEffect
    SideEffect
    Host

    (DOM)
    FiberC
    Render Phase Commit Phase

    View Slide

  5. w 3FOEFS1IBTFʜ"TZOD
    w $PNNJU1IBTFʜ4ZOD
    3FDBQ3FBDU'JCFS
    FiberA FiberB FiberD FiberE Commit all SideEffects
    Idle Time Idle Time Idle Time
    SideEffect
    SideEffect
    Host

    (DOM)
    FiberC
    Async Sync

    View Slide

  6. FiberC
    4VTQFOEBOE3FTVNF
    FiberA FiberB
    FiberA FiberC
    Commit
    Low Priority
    High Priority
    Commit
    FiberA FiberB FiberC
    Low Priority
    Reuse
    Interrupt
    Suspend Resume

    View Slide

  7. 5JNF4MJDJOH

    View Slide

  8. w #MPDLJOH6*UISFBEJTBOBXGVMFYQFSJFODF
    w 5IFSFBSFNBOZQFPQMFXIPVTFMPXQPXFSEFWJDFT
    w %FCPVODJOHBOEUISPUUMJOHBSFGPSMPXQPXFSEFWJDFT
    5JNF4MJDJOH

    onChange={value => {
    this.setState({value});
    requestAnimationFrame(() =>
    this.setState({data: this.filterData(value)})
    );
    }}

    View Slide

  9. https://github.com/facebook/react/blob/master/packages/react-dom/src/events/SimpleEventPlugin.js

    View Slide

  10. https://react-timeslicing-demo.netlify.com/
    Low Priority
    High Priority

    View Slide

  11. Schedule by
    React Scheduler

    View Slide

  12. https://github.com/facebook/react/commit/1e3cd332a015e312149efa36eb81c7523411cc2d#diff-
    bbebc3357e1fb99ab13ad796e04b69a6

    View Slide

  13. %FNP
    IUUQTSFBDUUJNFTMJDJOHEFNPOFUMJGZDPN
    IUUQTHJUIVCDPNLPCBSFBDUUJNFTMJDJOHEFNP

    View Slide

  14. 4VTQFOTF

    View Slide

  15. 8IBUJT4VTQFOTF

    View Slide

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

    View Slide

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

    View Slide

  18. 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

  19. )PXEPFT4VTQFOTFXPSL

    View Slide

  20. w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT UIPVHIXIJDI
    UISPXT1SPNJTFJOTUFBEPG&SSPS
    )PXEPFT4VTQFOTFXPSL
    User
    Fallback
    Timeout
    throw Promise!
    (suspend)
    timeout
    render with
    fetched Data
    (resume)

    View Slide

  21. 4JNQMF$BDIF1SPWJEFS

    View Slide

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

    View Slide

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

    View Slide

  24. )PXUPVTF4VTQFOTF

    View Slide

  25. 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

  26. 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

  27. %FNP
    IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN
    IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP

    View Slide

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

    View Slide

  29. 5IBOLZPV
    TQFBLFSEFDLDPNLPCB

    View Slide