Conversation
|
とりあえずここまででcomponentに分けてfunctional componentに置き換えるところまでdone |
|
|
||
| return ( | ||
| <div> | ||
| <div className="board-row"> |
There was a problem hiding this comment.
ここもcomponentにしてもよかったな・・・
|
component一個ごとにディレクトリを分けてtestとかstorybookのファイル置けるようにすると見やすいかもしれないけど今回はやってない |
|
多分useCallback使えそうな箇所ありそう、と思いながら使い方わからなかったので使い所があれば教えてもらえると喜びます 🙏 |
| }; | ||
|
|
||
| export const Board = (props: BoardProps) => { | ||
| const renderSquare = (i: number) => { |
There was a problem hiding this comment.
ですね
僕の問題意識とあってたかはわからないですが詳しくは
ydammatsu#2 (comment)
| xIsNext: true, | ||
| }; | ||
|
|
||
| export const Game = () => { |
There was a problem hiding this comment.
Type Inference良いですよね
僕は割と本気でこれくらいでいいと思っています
|
|
||
| export const Game = () => { | ||
| const [state, dispatch] = useReducer(gameReducer, initialState); | ||
| const handleClick = (squareIndex: number) => { |
There was a problem hiding this comment.
とりあえず使ってみたものの特に外に依存するものもない気がしたので依存配列は空を渡してます
が、この考え方であっているのかよくわかっていないことがわかりました
There was a problem hiding this comment.
useCallbackのモチベーションに関してはさっきのコメントが参考になるかもです
#2 (comment)
componentにしろfunctionにしろ（function componentとfunctionの違いはプログラム的な意味で言うとほとんどないんですが）function componentがupdateされる＝functionが実行されるなのでその時にcomponent内で定義されてるfunctionが再定義されて問題ないかがポイントだと思います
問題になるケースの代表的なのがcomponent A内で定義しているfunction Aをどこかのcomponent Bに渡していてそのcomponent BがuseEffectでsetXXよんでそれが component Aをupdateするときに無限ループになるケース (case A)
空配列渡している場合はとりあえず無条件でmemoizeされることになる
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
こうすることで case A みたいなことは防げるがそう言うモチベーションが無ければ基本的にfunctionって状態持っていないのでmemoizeするメリットは別にない（計算結果をmemoizeするのとは違う）
今の会計プラスの考え方だととりあえずcomponent内で定義したfunctionにはuseCallbackしておけばこういうリスク無くせるのでやっておこうという感じですね
There was a problem hiding this comment.
基本的にfunctionって状態持っていないので
JSだとfunctionはObjectなので状態持たせられるけど
| | { type: GameActionType.GAME_ACTION_ADD; squareIndex: number } | ||
| | { type: GameActionType.GAME_ACTION_JUMP; step: number }; | ||
|
|
||
| export enum GameActionType { |
There was a problem hiding this comment.
こういう用途だとenumよりstringでunion type使う方が良いと思います
詳しくは
https://stackoverflow.com/questions/40275832/typescript-has-unions-so-are-enums-redundant
色々あるんですがunion typeの方が簡潔にかけて良いので
There was a problem hiding this comment.
あとActionTypeをこうやってまとめるのは丁寧で良いと思いますがこんな書き方で十分事足ります
https://codesandbox.io/s/roulette-kob3l?file=/src/stateManagement/actions.ts
| @@ -0,0 +1,13 @@ | |||
| export type SquareValue = "X" | "O" | null; | |||
There was a problem hiding this comment.
個人的にこの型の名前微妙だと思うんですよね
変数名がSquareProps.valueに対して型がSquareValueで良いのかなと
あんまり細かいことは気にしないですがここは気になります
情報量ない命名になってる気がするのでコードの可読性が下がる気が
There was a problem hiding this comment.
これあんまりいい単語が思いつかなかったんでとりあえずtic tac toeのwikiからそれっぽい単語を引っ張ってきてはめてみました
| @@ -1,13 +1,13 @@ | |||
| export type SquareValue = "X" | "O" | null; | |||
| export type Mark = "X" | "O" | null; | |||
There was a problem hiding this comment.
良いと思います 👍
僕もこうしました
後で若干nullを分けたくなるかもですがそんなに大した話ではないです
2 participants
Uh oh!
There was an error while loading. Please reload this page.