最近2分間コーディングのすすめ、コードを書く習慣のハードルを下げるに触発されて2分間コーディングをやってみている。まずは昔興味が出ていたReactを自作しようをやってみたのでメモ。
やった様子は https://github.com/shibayu36/building-own-react に置いた。メインファイルは https://github.com/shibayu36/building-own-react/blob/main/src/index.tsx
create-react-appしたままだと色々おかしくなったのでejectして手直ししたり、JSXのtranspileを置き換えるためにwebpackの設定を少しいじったりしたところが苦労した。そのあたりについては https://github.com/shibayu36/building-own-react/commits/main を眺めると様子がわかると思う。
学べたこと
- Fiberという仕組みによって細かく作業単位を分割しながらレンダリングし、ユーザーのインタラクションを妨げないようにしている仕組みについて理解が深まった
- Reactの型構造について理解が深まった
- JSXの解釈を自分で実装する方法が学べた
- requestIdleCallbackを使った無限ループっぽい仕組みによって、変更を監視する手法を学べた
- ReactのRender PhaseとCommit Phaseそれぞれでやっていることの理解が深まった
- 差分検出の簡単な流れについて理解が深まった
数百行くらいのコードで、JSXのtranspile・render・差分検出・関数コンポーネント・useStateが簡単に使えるものが出来上がるのはすごい。作った後にReactを使っているコードのスタックトレースを眺めていたら、今回作った関数名などが出てきて理解しやすくなったなと感じた。
