React v16 and beyond React Fiber

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

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

3FBDUW

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

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

/FX'FBUVSFTJOW

3FOEFSTUSJOHBOEBSSBZ

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>

w +49ͰγϯλοΫεͱͯ͠αϙʔτ͢Δͱ͍͏ٞ࿦΋ w 4VQQPSUTUBOEBMPOFGSBHNFOUTZOUBY w IUUQTHJUIVCDPNGBDFCPPLKTYJTTVFT 3FOEFSTUSJOHBOEBSSBZ [ <Child key={1}
/>, <Child key={2} />, <Child key={3} /> ] !!! <> <Child /> <Child /> <Child /> </>

&SSPS#PVOEBSJFT

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

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

&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 />; } }

1PSUBM

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

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 ); } } }

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> ); } }

'MBU#VOEMFT

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

'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

4FSWFS4JEF3FOEFSJOH

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

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>

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

%0."UUSJCVUFT

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

1PMZpMM

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; }

0UIFS$IBOHFT

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

.BZCFOFYUXFFL

3FBDU'JCFS

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

طଘ࣮૷ͷ໰୊఺

w ߋ৽ॲཧ͕શͯಉظతɻπϦʔશମͷࠩ෼ͷݕग़ʙ%0.΁ͷ ൓өɺϥΠϑαΠΫϧϝιουͷݺͼग़͕͠શͯಉظͰ࣮ߦ͞ ΕΔ طଘ࣮૷ͷ໰୊఺ <App /> <div /> <Button
/> <List /> <Item /> <Item /> <Item /> ࠶ؼత & ಉظత ↓ UIΛϒϩοΫ͢Δ & ϑϨʔϜམͪ mount mount mount

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

3FBDU'JCFSʹΑΔղܾํ๏

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

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

3FBDU"SDIJUFDUVSF

3FBDU"SDIJUFDUVSF <div /> Component + JSX Reconciler Renderer <App />
<Text /> Fiber Stack DOM Native View Canvas

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

4DIFEVMJOH

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

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/)

'JCFSͷσʔλߏ଄

'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, |};

-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

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 Ͳ͔͜ΒͰ΋தஅʙ࠶։ Ͱ͖Δ

1IBTFT

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

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

෭࡞༻͸·ͱΊͯҰ౓Ͱ൓ө͞ΕΔ FiberA FiberB FiberD FiberE Commit all SideEffects Idle Time
Idle Time Idle Time Beginʙ Complete SideEffect SideEffect SideEffect Host (DOM) FiberC

1SJPSJUZ

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

σϞ https://koba04.github.io/react-ﬁber-resources/examples/

4UBDLSFDPODJMFS

4ZOD1SJPSJUZʹΑΔߋ৽

-PX1SJPSJUZʹΑΔߋ৽ॲཧ BeginʙComplete Commit

0⒎4DSFFO1SJPSJUZ TabA TabB hidden hidden Viewport hidden

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);

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ϑϥάʹΑͬͯӅ͞Ε͍ͯΔ

ඇಉظ3FOEFSJOHΛࢼ͢

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Λࢼ͢

ඇಉظ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)); } }

ඇಉظ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͸ݱ࣌఺Ͱ͸ະఆ

$VTUPN3FOEFSFS

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

$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

$VTUPN3FOEFSFS 7PJDF ReactVoice.render([ <alex key={1}>Hello</alex>, <victoria key={2}>React Fiber</victoria>, <kyoko key={3}>͜Μʹͪ͸
HTML5 Conference</kyoko>, ]); ??? IUUQTHJTUHJUIVCDPNLPCBFBGDBFBDEFGE

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

'VUVSF

w WͰ͸ɺඇಉظ3FOEFSJOH -PX1SJPSJUZ ͕σϑΥϧτʹ w %ZOBNJDJNQPSUΛ1SPNJTF$PNQPOFOUͱͯ͠αϙʔτʁ w 3FBTPO3FBDU͔Βͷ1PSU 3FEVDFSFUD
w কདྷతʹ3FBDU'JCFSΛผݴޠͰ࣮૷͢ΔՄೳੑ΋ʁ 'VUVSF

'VUVSF React Fiber (written by C or C++ or…) Native
module for ReactNative Web Assembly for ReactDOM

·ͱΊ

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

5IBOLT TQFBLFSEFDLDPNLPCB

React v16 and beyond React Fiber

React v16 and beyond React Fiber

More Decks by koba04

Other Decks in Programming

Featured

Transcript