いまさらながらReact Fiberのアルゴリズムを実装してみました。 300行くらいですが、プログラムの名前や責務など、本物のReactをできるかぎり忠実に再現するようにしています。実装は以下にポイントを絞りました。 Fiberのデータ構造とトラバースアルゴリズム 中断可能な「Unit of work」 RenderフェーズとCommitフェーズ アーキテクチャは以下のような感じ コード上にReactのソースコードへのリンクもコメントしているので、見比べてみるとより理解が深まると思います(例えば、今回はrequestIdleCallbackで擬似的にスケジューリングを実現していますが、Reactでは独自にSchedulerをつくっています)。 Fiberのアーキテクチャに関しては既にたくさんの情報があるため、この記事ではいくつか登場人物を紹介するまでとします。 performUnitOf

最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型

Today we are excited to announce the general availability of Docker Desktop for Mac [Apple Silicon], continuing to support developers in our community with their choice of local development environments. First, we want to say a big thank you to our community. The excitement you have shown about being able to run Docker Desktop on the new M1 chip has been tremendous and hugely motivating to us. You