useEffectReactフックの使用方法

useEffect Reactフックが何に役立つのか、そしてそれをどのように扱うのかを調べてください！

私をチェックしてくださいReactフックの紹介まず、あなたが彼らに不慣れであるならば。

私が時々使うReactフックの1つはuseEffect。

import React, { useEffect } from 'react'

フックの非常に重要な機能の1つは、関数コンポーネントがライフサイクルフックにアクセスできるようにすることです。

クラスコンポーネントを使用して、関数をに登録できます。componentDidMount、componentWillUnmountそしてcomponentDidUpdateイベント、およびそれらは、変数の初期化からAPI呼び出し、クリーンアップまで、多くのユースケースに役立ちます。

フックはuseEffect()API。呼び出しは、関数を引数として受け入れます。

この関数は、コンポーネントが最初にレンダリングされたとき、およびその後のすべての再レンダリング/更新時に実行されます。 Reactは最初にDOMを更新し、次に渡された関数を呼び出しますuseEffect()。古いものとは異なり、ブロックコードでもUIレンダリングをブロックすることなくすべてcomponentDidMountそしてcomponentDidUpdate、これによりアプリの動作が速くなります。

例：

const { useEffect, useState } = React
const CounterWithNameAndSideEffect = () => {
const [count, setCount] = useState(0)
const [name, setName] = useState(‘Flavio’)
useEffect(() => {
console.log(Hi </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> you clicked </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> times)
})
return (
<div>
<p>
Hi {name} you clicked {count} times
</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<button onClick={() => setName(name === ‘Flavio’ ? ‘Roger’ : ‘Flavio’)}>
Change name
</button>
</div>
)
}
ReactDOM.render(
<CounterWithNameAndSideEffect />,
document.getElementById(‘app’)
)

同じcomponentWillUnmount仕事はオプションで達成することができます戻る私たちの関数useEffect()パラメータ：

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

useEffect()複数回呼び出すことができます。これは、無関係なロジック（クラスコンポーネントのライフサイクルイベントを悩ますもの）を分離するのに便利です。

以来useEffect()関数は後続のすべての再レンダリング/更新で実行されます。パフォーマンスの目的で、監視する状態変数のリストを含む配列である2番目のパラメーターを追加することにより、実行をスキップするようにReactに指示できます。 Reactは、この配列の項目の1つが変更された場合にのみ、副作用を再実行します。

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

同様に、空の配列を渡すことで、（マウント時に）副作用を1回だけ実行するようにReactに指示できます。

useEffect(() => {
  console.log(`Component mounted`)
}, [])

useEffect()ログの追加、サードパーティのAPIへのアクセスなどに最適です。

Codepenの例：

ペンを見るReact Hooksの例＃3の副作用フラビオ・コープス（@flaviocopes）オンCodePen。

Tech Wiki Online!