React v16 and beyond React Fiber

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 koba04
September 24, 2017

React v16 and beyond React Fiber

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

September 24, 2017
Tweet

Transcript

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

  2. !LPCB

  3. !LPCB

  4. w 3FBDUWͰͷมߋ఺ w 3FBDU'JCFS w 8IBU  w 8IZ 

    w )PX "HFOEB
  5. 3FBDUW

  6. w ໿೥ͿΓͷϝδϟʔόʔδϣϯΞοϓ w WͷϦϦʔε͸ɺ w ޓ׵ੑΛอͪͳ͕Βͷ಺෦࣮૷ͷॻ͖׵͑ˠ3FBDU'JCFS w WΛ࢖͍ͬͯΕ͹εϜʔζʹΞοϓσʔτͰ͖Δʢ͸ͣʣ w XBSOJOHCSFBLJOHDIBOHFͷྲྀΕ

    w ͨͩ͠ɺ%0.ͷѻ͍΍ϥΠϑαΠΫϧΠϕϯτͷॱ൪ͳͲͰϋ ϚΔ৔߹͸͋Δ͔΋ w ϥΠηϯε͕#4% 1BUFOT͔Β.*5ʹ/FX 3FBDUW
  7. w #4% 1BUFOT͔Β.*5ʹ -JDFOTF IUUQTDPEFGBDFCPPLDPNQPTUTSFMJDFOTJOHSFBDUKFTUqPXBOEJNNVUBCMFKT

  8. /FX'FBUVSFTJOW

  9. 3FOEFSTUSJOHBOEBSSBZ

  10. w SFOEFSؔ਺͔Β௚઀จࣈྻ΍഑ྻΛฦ͢͜ͱ͕Ͱ͖ΔΑ͏ʹ 3FOEFSTUSJOHBOEBSSBZ // จࣈྻ 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 4VQQPSUTUBOEBMPOFGSBHNFOUTZOUBY w IUUQTHJUIVCDPNGBDFCPPLKTYJTTVFT 3FOEFSTUSJOHBOEBSSBZ [ <Child key={1}

    />, <Child key={2} />, <Child key={3} /> ] !!! <> <Child /> <Child /> <Child /> </>
  12. &SSPS#PVOEBSJFT

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

  14. w W·Ͱ͸ɺSFOEFS΍ϥΠϑαΠΫϧϝιουͰΤϥʔ͕ى͖ ͯ΋$PNQPOFOU͸ͦͷ·· w ˠෆ੔߹ͳ7JFXΛϢʔβʔʹදࣔͯ͠͠·͏Մೳੑ w WͰ͸ɺΤϥʔ͕ൃੜͨ͠Β3FBDU%0.SFOEFSͰࢦఆͨ͠ SPPUDPOUBJOFS͔ΒΞϯϚ΢ϯτ͢Δ 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 ґଘ͍ͯ͠ΔSEQBSUZMJCSBSZ͸ରԠ͕ඞཁ

    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. 4FSWFS4JEF3FOEFSJOH

  24. w ׬શʹಠཱͨ͠3FOEFSFSʹʢطଘ࣮૷͕ϕʔεʣ w 3FBDU1BSUJBM3FOEFSFSKTͱ͍͏ϑΝΠϧ - ʹ w 4USFBN3FOEFSJOHͷαϙʔτ w )ZESBUJPO4USBUFHZͷมߋ

    w )ZESBUJPOʜ443ͨ͠)5.-ΛΫϥΠΞϯτͰͷϨϯμϦ ϯά࣌ʹ࠶ར༻͢Δ w 3FBDU%0.IZESBUF ͷ௥Ճ 4FSWFS4JEF3FOEFSJOH
  25. w SFOEFS5P/PEF4USFBN SFOEFS5P4UBUJD/PEF4USFBNͷ௥Ճ 4USFBN3FOEFSJOH 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 /PNPSFAEBUBSFBDUDIFDLTVNABOEAEBUBSFBDUJEA )ZESBUJPO4USBUFHZ
  27. %0."UUSJCVUFT

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

    %0."UUSJCVUFT <div someExperimentalAttribute=“foo” /> <div className={false} /> // v16 <div /> & warning // v15 <div className=“false” /> .PSFIUUQTGBDFCPPLHJUIVCJPSFBDUCMPHEPNBUUSJCVUFTJOSFBDUIUNM
  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. .BZCFOFYUXFFL

  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. )JHI1SJPSJUZͷߋ৽ॲཧ͸ׂΓࠐΈͰ͖Δ 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. 4UBDLSFDPODJMFS

  61. 4ZOD1SJPSJUZʹΑΔߋ৽

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

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

  64. w %0.3FOEFSFSͷ৔߹͸ɺIJEEFO1SPQΛ࢖͏ 0⒎4DSFFO1SJPSJUZ 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ͷ৔߹͸ɺIJEEFO1SPQΛ࢖͏ 0⒎4DSFFO1SJPSJUZ 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Λ༗ޮʹ͠ ͯσϑΥϧτΛ-PX1SJPSJUZʹ w

    0⒎4DSFFO1SJPSJUZ΋ར༻Մೳʹ 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. $VTUPN3FOEFSFS

  71. w $VTUPN3FOEFSFSΛ࣮૷͢ΔͨΊͷํ๏͕ఏڙ͞ΕΔ w ASFBDUSFDPODJMFSA  w 3FBDUSFDPODJMFSQBDLBHF w IUUQTHJUIVCDPNGBDFCPPLSFBDUQVMM w

    'MPXUZQFʹΑͬͯΠϯλʔϑΣΠε͕ఆٛ͞Ε͍ͯΔ w IUUQTHJUIVCDPNGBDFCPPLSFBDUCMPCNBTUFSTSD SFOEFSFSTTIBSFEpCFS3FBDU'JCFS3FDPODJMFSKT $VTUPN3FOEFSFS
  72. $VTUPN3FOEFSFS $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. $VTUPN3FOEFSFS 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 -PX1SJPSJUZ ͕σϑΥϧτʹ w %ZOBNJDJNQPSUΛ1SPNJTF$PNQPOFOUͱͯ͠αϙʔτʁ w 3FBTPO3FBDU͔Βͷ1PSU  3FEVDFSFUD

     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