FunctionalComponent<>に状態を持たせられるようにする関数

class componentの潜在的な問題をカバーする仕組みらしい

オブジェクト指向プログラミングに対する関数型プログラミング……という対比というわけでもないのか？

custom Hooksというのも作れる

Hookの種類

最近Reactを始めた人向けのReact Hooks入門を読んで書いたメモ

FunctionalComponent<>に保存領域を作る

要はproperty

使い方

initialValue から型推論できる場合は <T> 不要

useState() はそのrenderingの回での値と、値を更新するための関数を入れた配列を返す

更新関数を使って値を更新する

更新のタイミングはrenderingの後。 setX を実行した直後ではない

from CodePenを使ってReact.jsを学ぶ練習log#5fb6b84b1280f000001cb35a

更新関数の型は React.Dispatch<React.SetStateAction<T>>

値の更新タイミングを制御できる

cache変数として使うことができる

useMemo()の関数版

少しだけ簡単に書ける

componentのrendering後に実行されるHook

JQueryを使ってDOMを直接操作したり、APIと通信したりするときに使う

副作用その他を実行できるという名目だが、よくわかっていない

2020-11-20 08:03:03 おそらく、外に何も返却せず中で処理を行うことから来ているんだと思う

逆に他のHooksは内部で変更処理を行うことができない

使い方

第2引数で更新タイミングを制御する

[] のときは一度しか実行しない

利用場面はないと思う

renderingをblockするので使用するときは注意

useEffect()の参照版

componentのmountの状態を取得するのに使える

useRef()で ref を受け取った後、useEffect()内で使う

ref.current でそのComponentのDOMを操作できる

React.forwardRefを使うと、componentの外でもそのDOMを操作できるようになるが、安全性が落ちるのでなるべくやらないほうが良い

userが自作できるHooks

注意点

実行する順番と回数は一意でなければならない

たぶん内部でlinked listを使っている都合だと思う

from React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた

あとで読む

公式の解説

React Hooksを導入する利点、これによって解決する問題が説明されている

簡単なtutorial

非公式の中では一番わかりやすそう

知らない人向けにも配慮して書いてある

そのものについては正真正銘のReactだけの不純物なしでReact入門で深く解説している

#2020-11-27 21:36:38

#2020-11-23 19:00:40

#2020-11-20 08:03:34

#2020-11-20 03:29:08

#2020-11-12 16:22:56