Open9
zustandとかrecoilとかの更新動作調べ
疑問:zustandやらrecoilやら、Contextを経由してるのに部分更新したらその部分だけrerenderされるのはどういう仕組か?同じように再現するにはどうするのが良いか?
zustandの場合
-
store自体はreactより外部にあり、selectorを経由したsliceの等価チェックをしている
-
そのため、slice結果が変更しないならば、利用しているコンポーネントも更新されない
- https://github.com/pmndrs/zustand/blob/0ba3c240078cf61792a4b13ff11d774ecca70a0a/src/react.ts#L128-L145
- zustandのstoreのリスナーに対して、更新があった場合はforceUpdateを走らせている
- こちらもselectorの結果(=slice)を利用して差分チェックをしているので、sliceが変わらない部分には更新処理が走らない
recoilの場合
- https://github.com/facebookexperimental/Recoil/blob/d826c5f5f64029ed38d9880214b16dd9efdffe4c/packages/recoil/hooks/Recoil_Hooks.js#L486-L487
- やはりstore自体はrefに格納し、forceUpdateのフラグを持っている
- https://github.com/facebookexperimental/Recoil/blob/d826c5f5f64029ed38d9880214b16dd9efdffe4c/packages/recoil/hooks/Recoil_Hooks.js#L389-L401
- このあたりでやはり外部に置いたatomを取り出して判定、としているように見えるが、やっぱむずい
redux
- useSelectorがそれっぽい動きをしてくれる
- https://github.com/reduxjs/react-redux/blob/master/src/hooks/useSelector.ts
- reduxってそもそも外部storeだっけ?
- const store = createStore()としてるんだからそりゃ外部storeだった