React v16 and beyond React Fiber

HTML5 Conference 2016
http://events.html5j.org/conference/2017/9/session/#a4

Transcript

1. 3FBDU
   W
   BOE
   CFZPOE
   3FBDU
   'JCFS )5.-
   $POGFSFODF
   
   
   !LPCB
   
2. !LPCB
3. !LPCB
4. w 3FBDU
   WͰͷมߋ఺
   w 3FBDU
   'JCFS
   w 8IBU
   w 8IZ
   w )PX "HFOEB
5. 3FBDU
   W
6. w ໿೥ͿΓͷϝδϟʔόʔδϣϯΞοϓ
   w WͷϦϦʔε͸ɺ
   w ޓ׵ੑΛอͪͳ͕Βͷ಺෦࣮૷ͷॻ͖׵͑
   ˠ
   3FBDU'JCFS
   w WΛ࢖͍ͬͯΕ͹εϜʔζʹΞοϓσʔτͰ͖Δʢ͸ͣʣ
   w XBSOJOH
   
   CSFBLJOH
   DIBOHFͷྲྀΕ
   w ͨͩ͠ɺ%0.ͷѻ͍΍ϥΠϑαΠΫϧΠϕϯτͷॱ൪ͳͲͰϋ ϚΔ৔߹͸͋Δ͔΋
   w ϥΠηϯε͕#4%
   
   1BUFOT͔Β.*5ʹ
   /FX
   3FBDU
   W
7. w #4%
   
   1BUFOT͔Β.*5ʹ -JDFOTF IUUQTDPEFGBDFCPPLDPNQPTUTSFMJDFOTJOHSFBDUKFTUqPXBOEJNNVUBCMFKT
8. /FX
   'FBUVSFT
   JO
   W
9. 3FOEFS
   TUSJOH
   BOE
   BSSBZ
10. w SFOEFSؔ਺͔Β௚઀จࣈྻ΍഑ྻΛฦ͢͜ͱ͕Ͱ͖ΔΑ͏ʹ 3FOEFS
    TUSJOH
    BOE
    BSSBZ // จࣈྻ const DisplayName = ({user}) => `${user.name} (@${user.id})`; <DisplayName user={{name: ‘Toru Kobayashi’, id: ‘koba04’}} /> // Toru Kobayashi (@koba04) // ഑ྻ const Row = ({children}) => <tr>{children}</tr>; const Columns = ({items}) => ( items((item, i) => <td key={i}>{item}</td> ); <Row> <Columns items={[‘foo’, ‘bar’, ‘baz’]} /> </Row>
11. w +49ͰγϯλοΫεͱͯ͠αϙʔτ͢Δͱ͍͏ٞ࿦΋
    w 4VQQPSU
    
    TUBOEBMPOF
    GSBHNFOU
    TZOUBY
    
    w IUUQTHJUIVCDPNGBDFCPPLKTYJTTVFT 3FOEFS
    TUSJOH
    BOE
    BSSBZ [ <Child key={1} />, <Child key={2} />, <Child key={3} /> ] !!! <> <Child /> <Child /> <Child /> </>
12. &SSPS
    #PVOEBSJFT
13. w USZ
    DBUDIͷ༷ʹɺࢠ$PNQPOFOUͷSFOEFS΍ϥΠϑαΠΫϧϝ ιουͰى͖ͨΤϥʔΛΩϟον͢ΔͨΊͷϥΠϑαΠΫϧϝ ιου͕௥Ճ
    w ˠDPNQPOFOU%JE$BUDI
    w W͔ΒࢠSFOEFS΍ϥΠϑαΠΫϧϝιουͰى͖ͨΤϥʔͷ ѻ͍͕มΘΔ &SSPS
    #PVOEBSJFT
14. w W·Ͱ͸ɺSFOEFS΍ϥΠϑαΠΫϧϝιουͰΤϥʔ͕ى͖ ͯ΋$PNQPOFOU͸ͦͷ··
    w ˠ
    ෆ੔߹ͳ7JFXΛϢʔβʔʹදࣔͯ͠͠·͏Մೳੑ
    w WͰ͸ɺΤϥʔ͕ൃੜͨ͠Β3FBDU%0.SFOEFSͰࢦఆͨ͠ SPPU
    DPOUBJOFS͔ΒΞϯϚ΢ϯτ͢Δ
    w ˠΞϯϚ΢ϯτ͞Εͨ͘ͳ͍৔߹͸ΤϥʔΛϋϯυϦϯά͢ Δඞཁ͕͋Δ &SSPS
    #PVOEBSJFT
15. &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 ? <p>Τϥʔ͕ൃੜ͠·ͨ͠</p> : <Child />; } }
16. 1PSUBM
17. w 3FBDU%0.DSFBUF1PSUBM
    w ೚ҙͷ%0.ʹର͢ΔSFOEFSΛ$PNQPOFOUπϦʔͷҰ෦ͱ͠ ͯѻ͏͜ͱ͕Ͱ͖Δ
    
    w ϥΠϑαΠΫϧϝιουͳͲ΋௨ৗͷࢠ$PNQPOFOUͱಉ༷ʹ ѻΘΕΔ 1PSUBM
18. w 1PSUBMΛ࢖Θͳ͍ྫ 1PSUBM class App extends React.Component { componentDidUpdate() { const container = document.querySelector(‘.modal-container’); if (this.state.modal) { ReactDOM.render( <Modal type={this.state.modal} onClose={() => { this.setState( () => ({modal: null}), () => ReactDOM.unmountComponentAtNode(container) ); }} />, container ); } } }
19. w 1PSUBMΛ࢖ͬͨ৔߹ 1PSUBM class App extends React.Component { render() { return ( <section> <Contents /> {this.state.modal && ReactDOM.createPortal( <Modal type={this.state.modal} onClose={() => { this.setState(() => ({modal: null})); } />, document.querySelector(‘.modal-container’) )} </section> ); } }
20. 'MBU
    #VOEMFT
21. w #SPXTFSJGZΛ࢖ͬͨϏϧυ͔Β3PMMVQΛ࢖ͬͨϏϧυʹ
    w ̍ͭͷϞδϡʔϧͱͯ͠Ϗϧυ͢Δ͜ͱͰɺϑΝΠϧαΠζͷ ࡟ݮɺύʔεʹ͔͔Δ࣌ؒΛ࡟ݮ
    w ͜ͷ݁ՌɺASFBDUMJCYYYAͷΑ͏ͳ಺෦Ϟδϡʔϧ΁ͷ௚઀ࢀ রʢ%JSFDU
    *NQPSUʣ͕ෆՄೳʹ
    w ґଘ͍ͯ͠ΔSE
    QBSUZ
    MJCSBSZ͸ରԠ͕ඞཁ
    w SFBDUUBQFWFOUQMVHJO
    SFBDUOBUJWFXFCʜ 'MBU
    #VOEMFT
22. '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
23. 4FSWFS
    4JEF
    3FOEFSJOH
24. w ׬શʹಠཱͨ͠3FOEFSFSʹʢطଘ࣮૷͕ϕʔεʣ
    w 3FBDU1BSUJBM3FOEFSFSKTͱ͍͏ϑΝΠϧ - ʹ
    w 4USFBN
    3FOEFSJOHͷαϙʔτ
    w )ZESBUJPO
    4USBUFHZͷมߋ
    w )ZESBUJPO
    ʜ
    443ͨ͠)5.-ΛΫϥΠΞϯτͰͷϨϯμϦ ϯά࣌ʹ࠶ར༻͢Δ
    w 3FBDU%0.IZESBUF ͷ௥Ճ 4FSWFS
    4JEF
    3FOEFSJOH
25. w SFOEFS5P/PEF4USFBN
    SFOEFS5P4UBUJD/PEF4USFBNͷ௥Ճ 4USFBN
    3FOEFSJOH import ReactDOMServer from ‘react-dom/server’; const App = () => ( <div> <p>Hello Stream!</p> </div> ); ReactDOMServer.renderToNodeStream(<App />).pipe(process.stdin); // <div data-reactroot=""><p>Hello Stream!</p></div> ReactDOMServer.renderToStaticNodeStream(<App />).pipe(process.stdin); // <div><p>Hello Stream!</p></div>
26. w 3FBDU%0.IZESBUF ͱ͍͏໌ࣔతͳ"1*ͷ௥Ճ
    w WͰ͸ɺ3FBDU%0.SFOEFS ʹΑΔ)ZESBUF΋Ҿ͖ଓ͖ αϙʔτʢAEBUBSFBDUSPPUAଐੑʹΑͬͯ൑ఆʣ
    w 3FBDU&MFNFOUͷ୯ҐͰՄೳͳݶΓ࠶ར༻͞ΕΔΑ͏ʹ
    w W·Ͱ͸ɺ%0.ߏ଄͕׬શʹҰக͢Δ͔Ͳ͏͔ΛνΣο ΫαϜʹΑͬͯ൑ఆ
    w /P
    NPSF
    AEBUBSFBDUDIFDLTVNA
    BOE
    AEBUBSFBDUJEA )ZESBUJPO
    4USBUFHZ
27. %0.
    "UUSJCVUFT
28. w ϗϫΠτϦετʹͳ͍ଐੑ΋%0.ʹ൓ө͞ΕΔΑ͏ʹ
    w WͰ͸ɺXBSOJOH
    
    TUSJQ
    w ADMBTTA΍AGPSA΍APOʙAͳͲ͸আ͘
    w ෆਖ਼ͳܕͷଐੑ஋͸TUSJQ͞ΕΔΑ͏ʹ
    w WͰ͸ɺจࣈྻԽͯ͠ద༻͞Ε͍ͯͨ %0.
    "UUSJCVUFT <div someExperimentalAttribute=“foo” /> <div className={false} /> // v16 <div /> & warning // v15 <div className=“false” /> .PSF
    IUUQTGBDFCPPLHJUIVCJPSFBDUCMPHEPNBUUSJCVUFTJOSFBDUIUNM
29. 1PMZpMM
30. 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; }
31. 0UIFS
    $IBOHFT
32. w 3FBDUDSFBUF$MBTT
    3FBDU1SPQ5ZQFTͷ࡟আ
    w "EEPOϏϧυͷ࡟আ
    w ͍͔ͭ͘ͷέʔεͰɺߋ৽࣌ͷ"1*ݺͼग़͠ॱ͕มߋʹ
    w TFU4UBUFͷίʔϧόοΫɺϥΠϑαΠΫϧϝιουɺ3FG
    w IUUQTHJUIVCDPNGBDFCPPLSFBDUCMPCNBTUFS $)"/(&-0(NE
    <6OSFMFBTFE>
    TFDUJPO 0UIFS
    $IBOHFT
33. 8IFO
34. .BZCF
    OFYU
    XFFL
35. 3FBDU
    'JCFS
36. w 3FBDUͷίΞΞϧΰϦζϜͷ࠶࣮૷
    w ࠷ॳͷ13͸
    w طଘͷ࣮૷ͱޓ׵ੑΛอͪͳ͕ΒɺॊೈͳεέδϡʔϦϯάΛ Մೳʹ
    w WͰ͸ɺޓ׵ੑͷ͋Δঢ়ଶͰϦϦʔε͞ΕͯɺPQUJOͰඇಉ ظ3FOEFSJOH͕Մೳʹ
    w ඇಉظ3FOEFSJOHपΓ͸࣮૷த 3FBDU
    'JCFSͱ͸
37. طଘ࣮૷ͷ໰୊఺
38. w ߋ৽ॲཧ͕શͯಉظతɻπϦʔશମͷࠩ෼ͷݕग़ʙ%0.΁ͷ ൓өɺϥΠϑαΠΫϧϝιουͷݺͼग़͕͠શͯಉظͰ࣮ߦ͞ ΕΔ طଘ࣮૷ͷ໰୊఺ <App /> <div /> <Button /> <List /> <Item /> <Item /> <Item /> ࠶ؼత & ಉظత ↓ UIΛϒϩοΫ͢Δ & ϑϨʔϜམͪ mount mount mount
39. طଘ࣮૷ͷ໰୊఺ Key Input API Response Ωʔೖྗ͕ ϒϩοΫ αʔόʔ͔Βͷ ϨεϙϯεΛॲཧ Key Input Key Input Key Input Key Input
40. 3FBDU
    'JCFSʹΑΔղܾํ๏
41. w ߋ৽ॲཧΛεέδϡʔϦϯάՄೳʹ
    w ߋ৽ॲཧʹର͢Δ༏ઌ౓෇͚
    w $PNQPOFOUʹର͢Δ༏ઌ౓෇͚ 3FBDU
    'JCFSʹΑΔղܾํ๏ ୯७ͳॲཧͷߴ଎ԽͰ͸ͳ͘ɺ
    6*ͷϨεϙϯεੑΛ޲্ͤ͞Δ͜ͱ͕໨త
42. 3FBDU
    'JCFSʹΑΔղܾํ๏ Key Input ߋ৽Λ Chunkʹ ෼ղͯ͠ద༻ Key Input Key Input Key Input API Response ༏ઌ౓ߴ ༏ઌ౓௿
43. 3FBDU
    "SDIJUFDUVSF
44. 3FBDU
    "SDIJUFDUVSF <div /> Component + JSX Reconciler Renderer <App /> <Text /> Fiber Stack DOM Native View Canvas
45. w 3FBDU&MFNFOUͷπϦʔΛߏங͢Δ
    w $PNQPOFOUΛϚ΢ϯτɺߋ৽ɺΞϯϚ΢ϯτ͢Δ
    w ϥΠϑαΠΫϧϝιουΛݺͼग़͢
    w ࠩ෼Λܭࢉ͢Δ
    w 3FOEFSFSʹࠩ෼Λ఻͑Δ
    w ॴҦɺ7JSUVBM
    %0.ͱݴΘΕ͍ͯͨ෦෼ 3FDPODJMFS
46. 4DIFEVMJOH
47. w ࣌ؒϕʔεͷεέδϡʔϦϯά
    w SFRVFTU*EMF$BMMCBDLΛ࢖ͬͨεέδϡʔϦϯά
    w ༏ઌ౓ϕʔεͷεέδϡʔϦϯά
    w ߴ༏ઌ౓ͷߋ৽͸ɺ௿༏ઌ౓ͷߋ৽ʹׂΓࠐΉ͜ͱ͕Ͱ͖Δ
    w ׂΓࠐ·Εͨߋ৽ॲཧ͸ޙ͔Β࠶։Ͱ͖Δ
    w ݱ࣌఺Ͱ͸༏ઌ౓ͱͯ͠ɺl4ZODz
    l5BTLz
    l)JHIz
    l-PXz
    l0⒎4DSFFOz͕ఆٛ͞Ε͍ͯΔ 4DIFEVMJOH
48. 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/)
49. 'JCFSͷσʔλߏ଄
50. '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, |};
51. -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
52. Text = () => '...'; List = () => [ <div>...</div>, <div>...</div>, ]; class App extends React.Component { render() { return ( <main> <h2>...</h2> <div> <Text /> <List /> </div> </main> ); } } ReactDOM.render(<App />, container) HostRoot <App /> <main /> <h2 /> <div /> <Text /> HostText List <div /> <div /> 1 2 3 4 5 6 8 9 10 7 Ͳ͔͜ΒͰ΋தஅʙ࠶։ Ͱ͖Δ
53. 1IBTFT
54. w 3FBDU
    'JCFS͸l#FHJOz
    l$PNQMFUFz
    l$PNNJUzͷϑΣʔζΛ࣋ͬͯ ͍Δ
    w #FHJOʙ$PNQMFUF
    w 'JCFS $PNQPOFOU ͷ୯ҐͰॲཧ͞ΕΔ
    w Πϯελϯεͷ࡞੒ɺSFOEFSؔ਺ͷ࣮ߦ
    ࠩ෼ܭࢉ
    w $PNNJU
    w ߋ৽ॲཧͷ୯ҐͰॲཧ͞ΕΔ
    w ෭࡞༻Λ·ͱΊͯ൓ө͢Δ
    %0.ͷߋ৽ͳͲ 1IBTFT
55. w #FHJOϑΣʔζ
    w DPNQPOFOU8JMM.PVOU
    DPNQPOFOU8JMM3FDFJWF1SPQT
    TIPVME$PNQPOFOU6QEBUF
    DPNQPOFOU8JMM6QEBUF
    w ඇಉظ3FOEFSJOHͰ͸ɺதஅʙ࠶։͞ΕΔ͜ͱͰෳ਺ճݺ ͹ΕΔ͜ͱ΋
    w $PNNJUϑΣʔζ
    w DPNQPOFOU%JE.PVOU
    DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM6ONPVOU ϥΠϑαΠΫϧϝιου
56. ෭࡞༻͸·ͱΊͯҰ౓Ͱ൓ө͞ΕΔ FiberA FiberB FiberD FiberE Commit all SideEffects Idle Time Idle Time Idle Time Beginʙ Complete SideEffect SideEffect SideEffect Host (DOM) FiberC
57. 1SJPSJUZ
58. )JHI
    1SJPSJUZͷߋ৽ॲཧ͸ׂΓࠐΈͰ͖Δ FiberA FiberB FiberA FiberC Commit Low Priority High Priority Commit FiberA FiberB FiberC Low Priority ࠶ར༻ ׂΓࠐΈʂ தஅ
59. σϞ https://koba04.github.io/react-fiber-resources/examples/
60. 4UBDL
    SFDPODJMFS
61. 4ZOD
    1SJPSJUZʹΑΔߋ৽
62. -PX
    1SJPSJUZʹΑΔߋ৽ॲཧ BeginʙComplete Commit
63. 0⒎4DSFFO
    1SJPSJUZ TabA TabB hidden hidden Viewport hidden
64. w %0.3FOEFSFSͷ৔߹͸ɺIJEEFO
    1SPQΛ࢖͏ 0⒎4DSFFO
    1SJPSJUZ App = () => ( <div> <ul hidden> <li>xxx</li> : 1000items <li>xxx</li> </ul> <ul> <li>xxx</li> : 1000items <li>xxx</li> </ul> </div> ); ReactDOM.render(<App />, container);
65. w %0.3FOEFSFSͷ৔߹͸ɺIJEEFO
    1SPQΛ࢖͏ 0⒎4DSFFO
    1SJPSJUZ App = () => ( <div> <ul hidden> <li>xxx</li> : 1000items <li>xxx</li> </ul> <ul> <li>xxx</li> : 1000items <li>xxx</li> </ul> </div> ); ReactDOM.render(<App />, container); ݱ࣌఺Ͱ͸ɺFeatureϑϥάʹΑͬͯӅ͞Ε͍ͯΔ
66. ඇಉظ3FOEFSJOHΛࢼ͢
67. w 3FBDU%0.VOTUBCMF@EFGFSSFE6QEBUFTΛ࢖ͬͨ-PX
    1SJPSJUZʹΑΔߋ৽
    w 3FBDUVOTUBCMF@"TZOD$PNQPOFOUΛ࢖ͬͯߋ৽Λ-PX
    1SJPSJUZʹ
    w 3FBDU%0.'FBUVSF'MBHTpCFS"TZOD4DIFEVMJOHΛ༗ޮʹ͠ ͯσϑΥϧτΛ-PX
    1SJPSJUZʹ
    w 0⒎4DSFFO
    1SJPSJUZ΋ར༻Մೳʹ
    w 3FBDU%0.qVTI4ZOD ඇಉظ3FOEFSJOHΛࢼ͢
68. ඇಉظ3FOEFSJOHΛࢼ͢ // Low PriorityʹΑΔߋ৽ ReactDOM.unstable_deferredUpdates(() => { this.setState(updater); }); // ߋ৽͕Low Priorityͱͯ͠ѻΘΕΔComponent const AsyncComponent = React.unstable_AsyncComponent; <AsyncComponent> <App /> </AsyncComponent> // or class App extends AsyncComponent { onClick() { // Sync Priority ReactDOM.flushSync(() => this.setState(() => newState)); } }
69. ඇಉظ3FOEFSJOHΛࢼ͢ // Low PriorityʹΑΔߋ৽ ReactDOM.unstable_deferredUpdates(() => { this.setState(updater); }); // ߋ৽͕Low Priorityͱͯ͠ѻΘΕΔComponent const AsyncComponent = React.unstable_AsyncComponent; <AsyncComponent> <App /> </AsyncComponent> // or class App extends AsyncComponent { onClick() { // Sync Priority ReactDOM.flushSync(() => this.setState(() => newState)); } } v17Ҏ߱ͰͷAPI͸ݱ࣌఺Ͱ͸ະఆ
70. $VTUPN
    3FOEFSFS
71. w $VTUPN
    3FOEFSFSΛ࣮૷͢ΔͨΊͷํ๏͕ఏڙ͞ΕΔ
    w ASFBDUSFDPODJMFSA
    w 3FBDU
    SFDPODJMFS
    QBDLBHF
    
    w IUUQTHJUIVCDPNGBDFCPPLSFBDUQVMM
    w 'MPXUZQFʹΑͬͯΠϯλʔϑΣΠε͕ఆٛ͞Ε͍ͯΔ
    w IUUQTHJUIVCDPNGBDFCPPLSFBDUCMPCNBTUFSTSD SFOEFSFSTTIBSFEpCFS3FBDU'JCFS3FDPODJMFSKT $VTUPN
    3FOEFSFS
72. $VTUPN
    3FOEFSFS $POTPMF ReactConsole.render( <div> <red>Hello</red> <yellow>World</yellow> <cyan>React</cyan> <rainbow>Custom Renderer!</rainbow> </div>, () => console.log( colors.inverse('##### Update ######’) ) ); ReactConsole.render( <div> <green>Hello</green> <yellow>World2</yellow> <cyan>React</cyan> </div> ); IUUQTHJTUHJUIVCDPNLPCBDCECEGBFDB
73. $VTUPN
    3FOEFSFS 7PJDF ReactVoice.render([ <alex key={1}>Hello</alex>, <victoria key={2}>React Fiber</victoria>, <kyoko key={3}>͜Μʹͪ͸ HTML5 Conference</kyoko>, ]); ??? IUUQTHJTUHJUIVCDPNLPCBFBGDBFBDEFGE
74. ಠࣗʹ3FBDU%0.-JUFΛ࣮૷Ͱ͖Δʂ
75. 'VUVSF
76. w WͰ͸ɺඇಉظ3FOEFSJOH -PX
    1SJPSJUZ ͕σϑΥϧτʹ
    w %ZOBNJD
    JNQPSUΛ1SPNJTF
    $PNQPOFOUͱͯ͠αϙʔτʁ
    w 3FBTPO3FBDU͔Βͷ1PSU
    3FEVDFS
    FUD
    w কདྷతʹ3FBDU'JCFSΛผݴޠͰ࣮૷͢ΔՄೳੑ΋ʁ 'VUVSF
77. 'VUVSF React Fiber (written by C or C++ or…) Native module for ReactNative Web Assembly for ReactDOM
78. ·ͱΊ
79. w W͸3FBDU
    'JCFS͕࢖ΘΕΔॳΊͯͷόʔδϣϯ
    w Wͷ࣌఺Ͱɺ3FBDU
    'JCFSʹΑͬͯܶతʹߴ଎Խ͞ΕΔ͜ͱ ͸ͳ͍ɻࠓޙͷͨΊͷΠϯϑϥ
    w 3FBDU
    'JCFS͸ɺ6*ͷϨεϙϯεੑΛεέδϡʔϦϯάʹΑͬ ͯ޲্ͤ͞Δ ·ͱΊ
80. 5IBOLT TQFBLFSEFDLDPNLPCB