ざっくりReact Fiberまとめ

Transcript

1. ざっくりReact Fiberまとめ
2. Fiberとは • Stackに変わる新しいReconciliation（リコンシリエーション）用の構造 • React v17よりデフォルトでFiberを使用した非同期のRenderingに変更 →Fiberを使用した非同期Renderingになることで、 　ユーザのアクション（Inputへの入力など）を待たせないようになる
3. Reconsiliationとは • Virtual DOMの差分取得アルゴリズム • 差分取得結果をもとにHost（DOM等）に反映 ※HostとはブラウザであればDOM、 　ネイティブであればReactNativeのビュー
4. 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に行わ れる為、ユーザを待 たせない
5. まとめ • renderingする裏側の構造の変更の為、実際に使用する側としては 意識する必要はあまりない • 非同期Renderingにより、ユーザを待たせないようになる
6. Appendix
7. 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/