Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React v16 and beyond React Fiber

koba04
September 24, 2017

React v16 and beyond React Fiber

koba04

September 24, 2017
Tweet

More Decks by koba04

Other Decks in Programming

Transcript

  1. 3FBDUWBOECFZPOE3FBDU'JCFS
    )5.-$POGFSFODF

    !LPCB

    View full-size slide

  2. w 3FBDUWͰͷมߋ఺
    w 3FBDU'JCFS
    w 8IBU
    w 8IZ
    w )PX
    "HFOEB

    View full-size slide

  3. w ໿೥ͿΓͷϝδϟʔόʔδϣϯΞοϓ
    w WͷϦϦʔε͸ɺ
    w ޓ׵ੑΛอͪͳ͕Βͷ಺෦࣮૷ͷॻ͖׵͑ˠ3FBDU'JCFS
    w WΛ࢖͍ͬͯΕ͹εϜʔζʹΞοϓσʔτͰ͖Δʢ͸ͣʣ
    w XBSOJOHCSFBLJOHDIBOHFͷྲྀΕ
    w ͨͩ͠ɺ%0.ͷѻ͍΍ϥΠϑαΠΫϧΠϕϯτͷॱ൪ͳͲͰϋ
    ϚΔ৔߹͸͋Δ͔΋
    w ϥΠηϯε͕#4%1BUFOT͔Β.*5ʹ/FX
    3FBDUW

    View full-size slide

  4. w #4%1BUFOT͔Β.*5ʹ
    -JDFOTF
    IUUQTDPEFGBDFCPPLDPNQPTUTSFMJDFOTJOHSFBDUKFTUqPXBOEJNNVUBCMFKT

    View full-size slide

  5. /FX'FBUVSFTJOW

    View full-size slide

  6. 3FOEFSTUSJOHBOEBSSBZ

    View full-size slide

  7. w SFOEFSؔ਺͔Β௚઀จࣈྻ΍഑ྻΛฦ͢͜ͱ͕Ͱ͖ΔΑ͏ʹ
    3FOEFSTUSJOHBOEBSSBZ
    // จࣈྻ
    const DisplayName = ({user}) => `${user.name} (@${user.id})`;

    // Toru Kobayashi (@koba04)
    // ഑ྻ
    const Row = ({children}) => {children};
    const Columns = ({items}) => (
    items((item, i) => {item}
    );



    View full-size slide

  8. w +49ͰγϯλοΫεͱͯ͠αϙʔτ͢Δͱ͍͏ٞ࿦΋
    w 4VQQPSUTUBOEBMPOFGSBHNFOUTZOUBY
    w IUUQTHJUIVCDPNGBDFCPPLKTYJTTVFT
    3FOEFSTUSJOHBOEBSSBZ
    [
    ,
    ,

    ]
    !!!
    <>



    >

    View full-size slide

  9. &SSPS#PVOEBSJFT

    View full-size slide

  10. w USZDBUDIͷ༷ʹɺࢠ$PNQPOFOUͷSFOEFS΍ϥΠϑαΠΫϧϝ
    ιουͰى͖ͨΤϥʔΛΩϟον͢ΔͨΊͷϥΠϑαΠΫϧϝ
    ιου͕௥Ճ
    w ˠDPNQPOFOU%JE$BUDI
    w W͔ΒࢠSFOEFS΍ϥΠϑαΠΫϧϝιουͰى͖ͨΤϥʔͷ
    ѻ͍͕มΘΔ
    &SSPS#PVOEBSJFT

    View full-size slide

  11. w W·Ͱ͸ɺSFOEFS΍ϥΠϑαΠΫϧϝιουͰΤϥʔ͕ى͖
    ͯ΋$PNQPOFOU͸ͦͷ··
    w ˠෆ੔߹ͳ7JFXΛϢʔβʔʹදࣔͯ͠͠·͏Մೳੑ
    w WͰ͸ɺΤϥʔ͕ൃੜͨ͠Β3FBDU%0.SFOEFSͰࢦఆͨ͠
    SPPUDPOUBJOFS͔ΒΞϯϚ΢ϯτ͢Δ
    w ˠΞϯϚ΢ϯτ͞Εͨ͘ͳ͍৔߹͸ΤϥʔΛϋϯυϦϯά͢
    Δඞཁ͕͋Δ
    &SSPS#PVOEBSJFT

    View full-size slide

  12. &SSPS#PVOEBSJFT
    class Child extends React.Component {
    componentDidMount() {
    throw new Error(‘Something went wrong!!’);
    }
    }
    class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    error: null
    };
    }
    componentDidCatch(error, info) {
    // info.componentStack͸ComponentͷStackTraceจࣈྻ
    this.setState(() => ({error}));
    }
    render() {
    return this.state.error ? Τϥʔ͕ൃੜ͠·ͨ͠ : ;
    }
    }

    View full-size slide

  13. w 3FBDU%0.DSFBUF1PSUBM
    w ೚ҙͷ%0.ʹର͢ΔSFOEFSΛ$PNQPOFOUπϦʔͷҰ෦ͱ͠
    ͯѻ͏͜ͱ͕Ͱ͖Δ
    w ϥΠϑαΠΫϧϝιουͳͲ΋௨ৗͷࢠ$PNQPOFOUͱಉ༷ʹ
    ѻΘΕΔ
    1PSUBM

    View full-size slide

  14. w 1PSUBMΛ࢖Θͳ͍ྫ
    1PSUBM
    class App extends React.Component {
    componentDidUpdate() {
    const container = document.querySelector(‘.modal-container’);
    if (this.state.modal) {
    ReactDOM.render(
    type={this.state.modal}
    onClose={() => {
    this.setState(
    () => ({modal: null}),
    () => ReactDOM.unmountComponentAtNode(container)
    );
    }}
    />,
    container
    );
    }
    }
    }

    View full-size slide

  15. w 1PSUBMΛ࢖ͬͨ৔߹
    1PSUBM
    class App extends React.Component {
    render() {
    return (


    {this.state.modal && ReactDOM.createPortal(
    type={this.state.modal}
    onClose={() => {
    this.setState(() => ({modal: null}));
    }
    />,
    document.querySelector(‘.modal-container’)
    )}

    );
    }
    }

    View full-size slide

  16. w #SPXTFSJGZΛ࢖ͬͨϏϧυ͔Β3PMMVQΛ࢖ͬͨϏϧυʹ
    w ̍ͭͷϞδϡʔϧͱͯ͠Ϗϧυ͢Δ͜ͱͰɺϑΝΠϧαΠζͷ
    ࡟ݮɺύʔεʹ͔͔Δ࣌ؒΛ࡟ݮ
    w ͜ͷ݁ՌɺASFBDUMJCYYYAͷΑ͏ͳ಺෦Ϟδϡʔϧ΁ͷ௚઀ࢀ
    রʢ%JSFDU*NQPSUʣ͕ෆՄೳʹ
    w ґଘ͍ͯ͠ΔSEQBSUZMJCSBSZ͸ରԠ͕ඞཁ
    w SFBDUUBQFWFOUQMVHJO SFBDUOBUJWFXFCʜ
    'MBU#VOEMFT

    View full-size slide

  17. 'MBU#VOEMFT
    node_modules/react
    "## cjs
    $ "## react.development.js
    $ %## react.production.min.js
    "## index.js
    node_modules/react-dom
    "## cjs
    $ "## react-dom-server.browser.development.js
    $ "## react-dom-server.browser.production.min.js
    $ "## react-dom-server.node.development.js
    $ "## react-dom-server.node.production.min.js
    $ "## react-dom-test-utils.development.js
    $ "## react-dom-unstable-native-dependencies.development.js
    $ "## react-dom-unstable-native-dependencies.production.min.js
    $ "## react-dom.development.js
    $ %## react-dom.production.min.js
    "## index.js

    View full-size slide

  18. 4FSWFS4JEF3FOEFSJOH

    View full-size slide

  19. w ׬શʹಠཱͨ͠3FOEFSFSʹʢطଘ࣮૷͕ϕʔεʣ
    w 3FBDU1BSUJBM3FOEFSFSKTͱ͍͏ϑΝΠϧ -
    ʹ
    w 4USFBN3FOEFSJOHͷαϙʔτ
    w )ZESBUJPO4USBUFHZͷมߋ
    w )ZESBUJPOʜ443ͨ͠)5.-ΛΫϥΠΞϯτͰͷϨϯμϦ
    ϯά࣌ʹ࠶ར༻͢Δ
    w 3FBDU%0.IZESBUF
    ͷ௥Ճ
    4FSWFS4JEF3FOEFSJOH

    View full-size slide

  20. w SFOEFS5P/PEF4USFBN SFOEFS5P4UBUJD/PEF4USFBNͷ௥Ճ
    4USFBN3FOEFSJOH
    import ReactDOMServer from ‘react-dom/server’;
    const App = () => (

    Hello Stream!

    );
    ReactDOMServer.renderToNodeStream().pipe(process.stdin);
    // Hello Stream!
    ReactDOMServer.renderToStaticNodeStream().pipe(process.stdin);
    // Hello Stream!

    View full-size slide

  21. w 3FBDU%0.IZESBUF
    ͱ͍͏໌ࣔతͳ"1*ͷ௥Ճ
    w WͰ͸ɺ3FBDU%0.SFOEFS
    ʹΑΔ)ZESBUF΋Ҿ͖ଓ͖
    αϙʔτʢAEBUBSFBDUSPPUAଐੑʹΑͬͯ൑ఆʣ
    w 3FBDU&MFNFOUͷ୯ҐͰՄೳͳݶΓ࠶ར༻͞ΕΔΑ͏ʹ
    w W·Ͱ͸ɺ%0.ߏ଄͕׬શʹҰக͢Δ͔Ͳ͏͔ΛνΣο
    ΫαϜʹΑͬͯ൑ఆ
    w /PNPSFAEBUBSFBDUDIFDLTVNABOEAEBUBSFBDUJEA
    )ZESBUJPO4USBUFHZ

    View full-size slide

  22. %0."UUSJCVUFT

    View full-size slide

  23. w ϗϫΠτϦετʹͳ͍ଐੑ΋%0.ʹ൓ө͞ΕΔΑ͏ʹ
    w WͰ͸ɺXBSOJOHTUSJQ
    w ADMBTTA΍AGPSA΍APOʙAͳͲ͸আ͘
    w ෆਖ਼ͳܕͷଐੑ஋͸TUSJQ͞ΕΔΑ͏ʹ
    w WͰ͸ɺจࣈྻԽͯ͠ద༻͞Ε͍ͯͨ
    %0."UUSJCVUFT


    // v16 & warning
    // v15
    .PSFIUUQTGBDFCPPLHJUIVCJPSFBDUCMPHEPNBUUSJCVUFTJOSFBDUIUNM

    View full-size slide

  24. w .BQ 4FU SFRVFTU"OJNBUJPO'SBNF͕ඞཁʹ
    w αϙʔτ͢Δϒϥ΢βʔʹԠͯ͡1PMZpMMΛೖΕΔ
    1PMZpMM
    import ‘core-js/es6/map’;
    import ‘core-js/es6/set’;
    import raf from ‘raf’;
    if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = raf;
    }

    View full-size slide

  25. 0UIFS$IBOHFT

    View full-size slide

  26. w 3FBDUDSFBUF$MBTT 3FBDU1SPQ5ZQFTͷ࡟আ
    w "EEPOϏϧυͷ࡟আ
    w ͍͔ͭ͘ͷέʔεͰɺߋ৽࣌ͷ"1*ݺͼग़͠ॱ͕มߋʹ
    w TFU4UBUFͷίʔϧόοΫɺϥΠϑαΠΫϧϝιουɺ3FG
    w IUUQTHJUIVCDPNGBDFCPPLSFBDUCMPCNBTUFS
    $)"/(&-0(NE <6OSFMFBTFE>TFDUJPO

    0UIFS$IBOHFT

    View full-size slide

  27. .BZCFOFYUXFFL

    View full-size slide

  28. w 3FBDUͷίΞΞϧΰϦζϜͷ࠶࣮૷
    w ࠷ॳͷ13͸
    w طଘͷ࣮૷ͱޓ׵ੑΛอͪͳ͕ΒɺॊೈͳεέδϡʔϦϯάΛ
    Մೳʹ
    w WͰ͸ɺޓ׵ੑͷ͋Δঢ়ଶͰϦϦʔε͞ΕͯɺPQUJOͰඇಉ
    ظ3FOEFSJOH͕Մೳʹ
    w ඇಉظ3FOEFSJOHपΓ͸࣮૷த
    3FBDU'JCFSͱ͸

    View full-size slide

  29. طଘ࣮૷ͷ໰୊఺

    View full-size slide

  30. w ߋ৽ॲཧ͕શͯಉظతɻπϦʔશମͷࠩ෼ͷݕग़ʙ%0.΁ͷ
    ൓өɺϥΠϑαΠΫϧϝιουͷݺͼग़͕͠શͯಉظͰ࣮ߦ͞
    ΕΔ
    طଘ࣮૷ͷ໰୊఺







    ࠶ؼత & ಉظత

    UIΛϒϩοΫ͢Δ & ϑϨʔϜམͪ
    mount
    mount
    mount

    View full-size slide

  31. طଘ࣮૷ͷ໰୊఺
    Key Input
    API Response
    Ωʔೖྗ͕
    ϒϩοΫ
    αʔόʔ͔Βͷ
    ϨεϙϯεΛॲཧ
    Key Input Key Input Key Input
    Key Input

    View full-size slide

  32. 3FBDU'JCFSʹΑΔղܾํ๏

    View full-size slide

  33. w ߋ৽ॲཧΛεέδϡʔϦϯάՄೳʹ
    w ߋ৽ॲཧʹର͢Δ༏ઌ౓෇͚
    w $PNQPOFOUʹର͢Δ༏ઌ౓෇͚
    3FBDU'JCFSʹΑΔղܾํ๏
    ୯७ͳॲཧͷߴ଎ԽͰ͸ͳ͘ɺ
    6*ͷϨεϙϯεੑΛ޲্ͤ͞Δ͜ͱ͕໨త

    View full-size slide

  34. 3FBDU'JCFSʹΑΔղܾํ๏
    Key Input
    ߋ৽Λ
    Chunkʹ
    ෼ղͯ͠ద༻
    Key Input Key Input Key Input
    API Response
    ༏ઌ౓ߴ
    ༏ઌ౓௿

    View full-size slide

  35. 3FBDU"SDIJUFDUVSF

    View full-size slide

  36. 3FBDU"SDIJUFDUVSF

    Component + JSX
    Reconciler
    Renderer

    Fiber Stack
    DOM Native View Canvas

    View full-size slide

  37. w 3FBDU&MFNFOUͷπϦʔΛߏங͢Δ
    w $PNQPOFOUΛϚ΢ϯτɺߋ৽ɺΞϯϚ΢ϯτ͢Δ
    w ϥΠϑαΠΫϧϝιουΛݺͼग़͢
    w ࠩ෼Λܭࢉ͢Δ
    w 3FOEFSFSʹࠩ෼Λ఻͑Δ
    w ॴҦɺ7JSUVBM%0.ͱݴΘΕ͍ͯͨ෦෼
    3FDPODJMFS

    View full-size slide

  38. w ࣌ؒϕʔεͷεέδϡʔϦϯά
    w SFRVFTU*EMF$BMMCBDLΛ࢖ͬͨεέδϡʔϦϯά
    w ༏ઌ౓ϕʔεͷεέδϡʔϦϯά
    w ߴ༏ઌ౓ͷߋ৽͸ɺ௿༏ઌ౓ͷߋ৽ʹׂΓࠐΉ͜ͱ͕Ͱ͖Δ
    w ׂΓࠐ·Εͨߋ৽ॲཧ͸ޙ͔Β࠶։Ͱ͖Δ
    w ݱ࣌఺Ͱ͸༏ઌ౓ͱͯ͠ɺl4ZODz l5BTLz l)JHIz l-PXz
    l0⒎4DSFFOz͕ఆٛ͞Ε͍ͯΔ
    4DIFEVMJOH

    View full-size slide

  39. SFRVFTU*EMF$BMMCBDL
    const work = (deadline) => {
    if (deadline.timeRemaining() > 10) {
    // do some heavy tasks
    } else {
    requestIdleCallback(work);
    }
    };
    requestIdleCallback(work);
    Fig. 1 Example of an inter-frame idle period (https://www.w3.org/TR/requestidlecallback/)

    View full-size slide

  40. 'JCFSͷσʔλߏ଄

    View full-size slide

  41. 'JCFSͷσʔλߏ଄
    export type Fiber = {|
    tag: TypeOfWork,
    key: null | string,
    type: any,
    stateNode: any,
    return: Fiber | null,
    child: Fiber | null,
    sibling: Fiber | null,
    index: number,
    ref: null | (((handle: mixed) => void) & {_stringRef: ?string}),
    pendingProps: any,
    memoizedProps: any,
    updateQueue: UpdateQueue | null,
    memoizedState: any,
    internalContextTag: TypeOfInternalContext,
    effectTag: TypeOfSideEffect,
    nextEffect: Fiber | null,
    firstEffect: Fiber | null,
    lastEffect: Fiber | null,
    pendingWorkPriority: PriorityLevel,
    alternate: Fiber | null,
    _debugID?: DebugID,
    _debugSource?: Source | null,
    _debugOwner?: Fiber | ReactInstance | null,
    _debugIsCurrentlyTiming?: boolean,
    |};

    View full-size slide

  42. -JOLFE-JTUߏ଄
    let root = fiber;
    let node = fiber;
    while (true) {
    // Do something with node
    if (node.child) {
    node = node.child;
    continue;
    }
    if (node === root) {
    return;
    }
    while (!node.sibling) {
    if (!node.return || node.return === root) {
    return;
    }
    node = node.return;
    }
    node = node.sibling;
    }
    From: Fiber Principles: Contributing To Fiber #7942
    https://github.com/facebook/react/issues/7942

    View full-size slide

  43. Text = () => '...';
    List = () => [
    ...,
    ...,
    ];
    class App extends React.Component {
    render() {
    return (

    ...





    );
    }
    }
    ReactDOM.render(, container)
    HostRoot





    HostText
    List


    1
    2
    3
    4
    5
    6
    8
    9
    10
    7
    Ͳ͔͜ΒͰ΋தஅʙ࠶։
    Ͱ͖Δ

    View full-size slide

  44. w 3FBDU'JCFS͸l#FHJOz l$PNQMFUFz l$PNNJUzͷϑΣʔζΛ࣋ͬͯ
    ͍Δ
    w #FHJOʙ$PNQMFUF
    w 'JCFS $PNQPOFOU
    ͷ୯ҐͰॲཧ͞ΕΔ
    w Πϯελϯεͷ࡞੒ɺSFOEFSؔ਺ͷ࣮ߦ ࠩ෼ܭࢉ
    w $PNNJU
    w ߋ৽ॲཧͷ୯ҐͰॲཧ͞ΕΔ
    w ෭࡞༻Λ·ͱΊͯ൓ө͢Δ %0.ͷߋ৽ͳͲ

    1IBTFT

    View full-size slide

  45. w #FHJOϑΣʔζ
    w DPNQPOFOU8JMM.PVOU DPNQPOFOU8JMM3FDFJWF1SPQT
    TIPVME$PNQPOFOU6QEBUF DPNQPOFOU8JMM6QEBUF
    w ඇಉظ3FOEFSJOHͰ͸ɺதஅʙ࠶։͞ΕΔ͜ͱͰෳ਺ճݺ
    ͹ΕΔ͜ͱ΋
    w $PNNJUϑΣʔζ
    w DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM6ONPVOU
    ϥΠϑαΠΫϧϝιου

    View full-size slide

  46. ෭࡞༻͸·ͱΊͯҰ౓Ͱ൓ө͞ΕΔ
    FiberA FiberB FiberD FiberE Commit all SideEffects
    Idle Time Idle Time Idle Time
    Beginʙ

    Complete
    SideEffect
    SideEffect
    SideEffect
    Host

    (DOM)
    FiberC

    View full-size slide

  47. )JHI1SJPSJUZͷߋ৽ॲཧ͸ׂΓࠐΈͰ͖Δ
    FiberA FiberB
    FiberA FiberC
    Commit
    Low Priority
    High Priority
    Commit
    FiberA FiberB FiberC
    Low Priority
    ࠶ར༻
    ׂΓࠐΈʂ
    தஅ

    View full-size slide

  48. σϞ
    https://koba04.github.io/react-fiber-resources/examples/

    View full-size slide

  49. 4UBDLSFDPODJMFS

    View full-size slide

  50. 4ZOD1SJPSJUZʹΑΔߋ৽

    View full-size slide

  51. -PX1SJPSJUZʹΑΔߋ৽ॲཧ
    BeginʙComplete Commit

    View full-size slide

  52. 0⒎4DSFFO1SJPSJUZ
    TabA TabB
    hidden
    hidden
    Viewport
    hidden

    View full-size slide

  53. w %0.3FOEFSFSͷ৔߹͸ɺIJEEFO1SPQΛ࢖͏
    0⒎4DSFFO1SJPSJUZ
    App = () => (


    xxx
    : 1000items
    xxx


    xxx
    : 1000items
    xxx


    );
    ReactDOM.render(, container);

    View full-size slide

  54. w %0.3FOEFSFSͷ৔߹͸ɺIJEEFO1SPQΛ࢖͏
    0⒎4DSFFO1SJPSJUZ
    App = () => (


    xxx
    : 1000items
    xxx


    xxx
    : 1000items
    xxx


    );
    ReactDOM.render(, container);
    ݱ࣌఺Ͱ͸ɺFeatureϑϥάʹΑͬͯӅ͞Ε͍ͯΔ

    View full-size slide

  55. ඇಉظ3FOEFSJOHΛࢼ͢

    View full-size slide

  56. w 3FBDU%0.VOTUBCMF@EFGFSSFE6QEBUFTΛ࢖ͬͨ-PX
    1SJPSJUZʹΑΔߋ৽
    w 3FBDUVOTUBCMF@"TZOD$PNQPOFOUΛ࢖ͬͯߋ৽Λ-PX
    1SJPSJUZʹ
    w 3FBDU%0.'FBUVSF'MBHTpCFS"TZOD4DIFEVMJOHΛ༗ޮʹ͠
    ͯσϑΥϧτΛ-PX1SJPSJUZʹ
    w 0⒎4DSFFO1SJPSJUZ΋ར༻Մೳʹ
    w 3FBDU%0.qVTI4ZOD

    ඇಉظ3FOEFSJOHΛࢼ͢

    View full-size slide

  57. ඇಉظ3FOEFSJOHΛࢼ͢
    // Low PriorityʹΑΔߋ৽
    ReactDOM.unstable_deferredUpdates(() => {
    this.setState(updater);
    });
    // ߋ৽͕Low Priorityͱͯ͠ѻΘΕΔComponent
    const AsyncComponent = React.unstable_AsyncComponent;



    // or
    class App extends AsyncComponent {
    onClick() {
    // Sync Priority
    ReactDOM.flushSync(() => this.setState(() => newState));
    }
    }

    View full-size slide

  58. ඇಉظ3FOEFSJOHΛࢼ͢
    // Low PriorityʹΑΔߋ৽
    ReactDOM.unstable_deferredUpdates(() => {
    this.setState(updater);
    });
    // ߋ৽͕Low Priorityͱͯ͠ѻΘΕΔComponent
    const AsyncComponent = React.unstable_AsyncComponent;



    // or
    class App extends AsyncComponent {
    onClick() {
    // Sync Priority
    ReactDOM.flushSync(() => this.setState(() => newState));
    }
    }
    v17Ҏ߱ͰͷAPI͸ݱ࣌఺Ͱ͸ະఆ

    View full-size slide

  59. $VTUPN3FOEFSFS

    View full-size slide

  60. w $VTUPN3FOEFSFSΛ࣮૷͢ΔͨΊͷํ๏͕ఏڙ͞ΕΔ
    w ASFBDUSFDPODJMFSA
    w 3FBDUSFDPODJMFSQBDLBHF
    w IUUQTHJUIVCDPNGBDFCPPLSFBDUQVMM
    w 'MPXUZQFʹΑͬͯΠϯλʔϑΣΠε͕ఆٛ͞Ε͍ͯΔ
    w IUUQTHJUIVCDPNGBDFCPPLSFBDUCMPCNBTUFSTSD
    SFOEFSFSTTIBSFEpCFS3FBDU'JCFS3FDPODJMFSKT
    $VTUPN3FOEFSFS

    View full-size slide

  61. $VTUPN3FOEFSFS $POTPMF

    ReactConsole.render(

    Hello
    World
    React
    Custom Renderer!
    ,
    () =>
    console.log(
    colors.inverse('##### Update ######’)
    )
    );
    ReactConsole.render(

    Hello
    World2
    React

    );
    IUUQTHJTUHJUIVCDPNLPCBDCECEGBFDB

    View full-size slide

  62. $VTUPN3FOEFSFS 7PJDF

    ReactVoice.render([
    Hello,
    React Fiber,
    ͜Μʹͪ͸ HTML5 Conference,
    ]);
    ???
    IUUQTHJTUHJUIVCDPNLPCBFBGDBFBDEFGE

    View full-size slide

  63. ಠࣗʹ3FBDU%0.-JUFΛ࣮૷Ͱ͖Δʂ

    View full-size slide

  64. w WͰ͸ɺඇಉظ3FOEFSJOH -PX1SJPSJUZ
    ͕σϑΥϧτʹ
    w %ZOBNJDJNQPSUΛ1SPNJTF$PNQPOFOUͱͯ͠αϙʔτʁ
    w 3FBTPO3FBDU͔Βͷ1PSU 3FEVDFSFUD

    w কདྷతʹ3FBDU'JCFSΛผݴޠͰ࣮૷͢ΔՄೳੑ΋ʁ
    'VUVSF

    View full-size slide

  65. 'VUVSF
    React Fiber

    (written by C or C++ or…)

    Native module

    for ReactNative
    Web Assembly

    for ReactDOM

    View full-size slide

  66. w W͸3FBDU'JCFS͕࢖ΘΕΔॳΊͯͷόʔδϣϯ
    w Wͷ࣌఺Ͱɺ3FBDU'JCFSʹΑͬͯܶతʹߴ଎Խ͞ΕΔ͜ͱ
    ͸ͳ͍ɻࠓޙͷͨΊͷΠϯϑϥ
    w 3FBDU'JCFS͸ɺ6*ͷϨεϙϯεੑΛεέδϡʔϦϯάʹΑͬ
    ͯ޲্ͤ͞Δ
    ·ͱΊ

    View full-size slide

  67. 5IBOLT
    TQFBLFSEFDLDPNLPCB

    View full-size slide