自分用メモ: 解剖React Hooks


とりあえずreactのソース読んだが以下の記事の内容で合っている。
https://gist.github.com/mizchi/fa00890df2c8d1f27b9ca94b5cb8dd1d

しかし、あの記事だけではどうしてもわからなかった所があった。
hooksのライフサイクルだ。
カーソルはグローバル?
グローバルの場合どうやって現在のhooksのカーソルにこのコンポーネントの続きですよって伝えてコントロールするんだろう?...etc

調べた結果 (力尽きたのでこの辺までが限界だった

カーソルはグローバルだった。prodやdevでカーソルを使い分けてた。
また、workInProgressとかisFirstとかグローバル変数使いまくってた。

  1. renderを実行する時にhooksのカーソル位置を初期化してる
  2. もしfirst renderなら、hooksで素直に初期化させる
  3. もし2回目以降のrenderならそのhooksを続かせるのに必要な情報を渡して引き継いでいる。 (専用のrenderWithHooksとupdate用の関数等ある
  4. renderWithHooksとかの判定は、hooksを使った場合は痕跡が残るからそれで使い分けてると思う。そして、その痕跡を次回用にどっかに引き継いだりしてんじゃないかな。(力尽きた
  5. とりあえずこういう奴の実装を手っ取り早く見たいだけなら、evanさんがちょちょっと書いたvue hooksのコードが結構参考になる。実装は違うけど概念はほぼ同じだと思う。https://github.com/yyx990803/vue-hooks/blob/master/index.js