エピック反応:フック.USENT , USE効果私は何を学んでいる..

Back into Epic React

1 - useState

2 - useEffect

Other notes

バックエピック反応

長い休憩と非常により多くの経験の後、私はどうにかEpicCertに戻りました.これはシリーズの第2章です.最初のリンクへのリンクです.
他のポストと同様に、これは反応するためのガイドでもないし、エピコ反応.彼らは私のメモ、考え、コースのワークショップの学習です.文脈の欠如を混乱させるようなものはほとんどない.しかし、私はあなたがいくつかの興味深い点を見つけることができると思います.リポジトリとソリューションは、KentのGithubで公開されています.
のは、USENTとUseeffectに焦点を当ててフックに飛び込みましょう!

1－不動産

最初の良い点は:コントロールされたコンポーネントの値で、状態ハンドラーによって変更され、更新されます.
USENTの興味深い部分は、フードの下では、配列宣言以外の何ものでもない.それが使用されるとき、それは配列の2つの要素を得ます.
以下のようなコードです.const [ count, setCount ] = useState(0)は破壊されない.

const array = useState(0)
const count = array[0]
const setCount = array[1]

最初の運動は非常に簡単に反応状態を理解する場合は非常に簡単です.コンポーネントの一部では、コンポーネントの仮想DOMの再レンダリングが行われ、ページに表示される内容が更新されます.
入力のonChangeの関数を呼び出し、その関数が状態を変更すると(setCount(event.target.value) ), それから、私はレンダリングのどんな部分でも更新された状態を呼ぶことができます{count ? <strong>Count is {count}</strong> : 'Add a number to count'}第2の部分では、タスクはコンポーネントの支柱を初期値として使う<Counting initialCount={0}私は、異なる方法があるとわかります.最良の方法は関数の引数で破壊される初期値にsetstateを設定することです.

function Counting({ initialCount = 0 })

InitialCountがオブジェクトであるので、破壊する必要があります.もし、私たちが引数(initialCount)と同じように引数を渡すならば、結果は[ Object Object ]になります.
プロップとして何も渡さない場合は、デフォルト値(=')も必要です.この場合、私たちは定義されていない値のためにクラッシュを起こしません(私たちがtypescriptを使用しない限り、私たちは定義されていない可能な限り定義します).
つの方法は、入力にsetstate ( initialCount )とvalue = countを指定する方法です.
もう一つの方法は、入力のデフォルト値を初期カウントに設定することです.これは、レンダリングされたテキストの状態が何か入力されるまで更新されないこと以外は、同じ効果を持ちます.カウントを使用するためのチェックを作成することが可能です(ネストされている場合でも、三項演算子を使用します).しかし、それはコードを読みやすく、その流れに従うことを難しくします.

2 -使用効果

このフックは、依存関係が変わるたびに、コンポーネントのすべてのレンダリングで呼び出されます.または依存関係の配列が空の場合、任意のレンダリングを行います.
私たちは状態を持続させることができます.const [name, setName] = React.useState(window.localStorage.getItem('name') || initialName)しかし、そうすることで我々はパフォーマンスの問題に実行することができます.LocalStorageへのアクセスは他の方法より遅いです.
これにはいくつかの回避策があります.

ResponseのusEstateフックでは、実際の値の代わりに関数を渡すことができ、コンポーネントが最初に表示されたときにその値を取得するだけの関数を呼び出します.React.useState(() => someExpensiveComputation()) ... クラスコンポーネントのsetstateのコールバックと同じですconst [name, setName] = React.useState(() => window.localStorage.getItem('name') || initialName)コールバックの中にコンソールを置くならば、我々は缶が最初のRenderだけで呼ばれるのを見ます.
これは同期時間を必要とするボトルネック関数にのみ使用する必要があります

または有効な使用方法

怠惰な初期化、またはすべてのレンダリングでLocalStorageからの読み取り.

Dependency Array : 2番目の引数を使用します.

React.useEffect(() => {
    window.localStorage.setItem('count', count)
  }, [name])

名前変更以外の他の状態が
空のままならば、それは最初のRenderだけで呼ばれます.
依存配列の状態は、オブジェクトの比較によって前の状態との比較で比較されるオブジェクトです.彼らが同じ有効であるならば、走らないでください、さもなければ、はい.
カスタムフック.メソッドの内部で呼び出される外部関数です.名前は“use”から始まる.
コンポーネントメソッドの中で異なる関数があれば、それらを外部化することもできます.
このような方法があれば、

function Greeting({ initialCount = 0 }) {
  const [count, setCount] = React.useState(
    () => window.localStorage.getItem('count') || initialCount,
  )

  React.useEffect(() => {
    window.localStorage.setItem('count', count)
  }, [count])

  function handleChange(event) {
    setCount(event.target.value)
  }

これを変換し、カスタムフックとしてメインメソッドで使用します.

function useLocalStorageWithState() {
  const [count, setCount] = React.useState(
    () => window.localStorage.getItem('count') || initialCount,
  )

  React.useEffect(() => {
    window.localStorage.setItem('count', count)
  }, [count])

  return [count, setCount];
}

function Greeting({ initialCount= 0 }) {
  const [count, setCount] = useLocalStorageWithState()
  function handleChange(event) {
    setCount(event.target.value)
  }

その他

USENT内部のコールバックを設定すると、状態を比較するので、状態の設定を怠惰にします.

を返します.関数で呼び出されます.どちらが反応関数コンポーネントでもカスタムレスポンスフック関数でもありません.
反応規則として、あなたの関数は' use 'から始めなければなりません.たとえば、usegetitems.
したがって、SynchronalStorageWithStateの代わりに、UseLocalStorageWithStateと呼びます.

UseLocalStorageWithStateはUSENTフックと同じ使用をする必要がありますので、USENTのような配列を返すことができます.それで、我々は同様に他のものをするカスタムUSENTフックをつくりました.
パラメータとしてcountとinitialcountを渡しますuseLocalStorageWithState(count, initialCount) を呼び出した後にUseLocalStorageWithStateをより一般的にし、引数として受け取るkey, defaultValue , したがって,この方法は自由に再利用でき,カウント状態に連鎖しない.この状態についても同様である.我々は[状態、setstate ]を設定し、同じことを返すことができます.
2つの引数を持つことは、依存関係の配列に2つの効果を持たなければならないことを意味します.
柔軟なLocalStorageフックの論理は以下の通りです.

ローカルストレージから項目を取得する

を返します.

そうでなければ、デフォルト値

それは州を得るためです.このような場合、ローカルストレージの作成/編集に使用する変更を設定するには、次のように移動します.
シリアル化はJSONをstringifyするためのものです.
uselocalStorageWithStateの引数として、数の代わりに関数を渡すと、別の関数の結果を返すチェックを作成することができます.const [name, setName] = useLocalStorageWithState('name', complexCounting() ) --> 関数をデフォルト値として渡すreturn typeof defaultValue === 'function' ? defaultValue() : defaultValue; --> USENTに戻り、メソッドの結果
その後、複雑な部分が来る.
上記の場合、USELocalStorageWithStateに2つのパラメータを渡します.最初のキー-キーは文字列で、2番目は原始値かメソッドです.
誰かがもう一つの価値を『キー』に渡したいならば、どうですか?今、例えば、' count 'を文字列として渡すことができますが、誰かが何か違うものを渡すことができます(例えば、ローカルストレージに別のものを格納するために).
キーの状態を変更するための直接的な方法はありません.したがって、何ができるのかは、キーをUserefを使ってレンダリングをトリガーしない変数に格納することです.そのあと、古いキーを新しいキーと比較することができます.
ドキュメントによると

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

UESTENTとの違いは、それからuserEFがRerenderを誘発しないので、このフックで、我々は実際にRerenderを引き起こすことなくキーをセットすることができます.この目的の目的は効用に明確です

const prevKey = prevKeyRef.current;
    if (prevKey !== key) {
      window.localStorage.removeItem(prevKey)
    }

通常、localstorageに値を格納します.しかし、この値はオブジェクトにあります、そして、そのオブジェクトはキーを持ちます.だから今のところ'カウント'です.しかし、それが' sum 'であり、初期キーを削除しない場合、localstorageに2つのオブジェクトがあるでしょう.したがって、userkey varに格納される新しいキーと古いものが異なっているならば、我々は古いキーでLocalStorageでオブジェクトを削除します.