『Build your own React』をやった
『Build your own React』というチュートリアルが面白そうだったのでやってみた。
簡易版 React をフルスクラッチで実装しながら、React 内部の仕組みについて学ぶことができる。
簡易版 React とはいえ結構作り込む感じになっていて、なんと最後は useState フックの実装までやってしまう。
- Step I: The createElement Function
- Step II: The render Function
- Step III: Concurrent Mode
- Step IV: Fibers
- Step V: Render and Commit Phases
- Step VI: Reconciliation
- Step VII: Function Components
- Step VIII: Hooks
どのパートも良かったが、特に面白かったのが Fiber を実装する部分。
React v16 がリリースされた当時、下の記事で Fiber の仕組みを読んだがよく理解できないまま終わっていた。
しかし、このチュートリアルを終えてから改めて読むと、なるほどそういうことだったのかと理解が深まって良かった。
コード量はトータルで300行くらいで、数時間で終わった。
チュートリアルでは JavaScript が使われていて、一瞬 TypeScript でやりたい気持ちになったが結局 JS で進めた。
型をつけるのが大変そうな内容だったので、TS でやると大変だったと思う。
