ざっくりReact Fiberまとめ

Fiberとは • Stackに変わる新しいReconciliation（リコンシリエーション）用の構造 • React v17よりデフォルトでFiberを使用した非同期のRenderingに変更 →Fiberを使用した非同期Renderingになることで、　ユーザのアクション（Inputへの入力など）を待たせないようになる

Reconsiliationとは • Virtual DOMの差分取得アルゴリズム • 差分取得結果をもとにHost（DOM等）に反映 ※HostとはブラウザであればDOM、　ネイティブであればReactNativeのビュー

StackとFiberの違い Stack(既存) Rootから順番に全ての子Componentを処理後、renderingする為、処理中にユーザからアクセスがあった場合に対応できない Fiber(v17〜)
class App extends React.Component { render(){ return( <Head /> <div>test</div> ) } } : Fiber Fiberの非同期 RenderingではFiber 単位で処理が実行され、優先度によって Idle中の処理に回すなどFlexibleに行われる為、ユーザを待たせない

まとめ • renderingする裏側の構造の変更の為、実際に使用する側としては意識する必要はあまりない • 非同期Renderingにより、ユーザを待たせないようになる

Appendix

Links • https://github.com/acdlite/react-fiber-architecture • http://blog.koba04.com/post/2017/04/25/a-state-of-react-fiber/ • https://qiita.com/seya/items/a655adb340af3b6690b5 • https://postd.cc/react-fiber-architecture/

ざっくりReact Fiberまとめ

ざっくりReact Fiberまとめ

Yoshitaka Terazawa

More Decks by Yoshitaka Terazawa

Other Decks in Technology

Featured

Transcript