ReactuseEffectの使用方法

Reactの開発チームは、Reactバージョン16.8でフックの概念を導入しました。 Reactフックを使用すると、関数コンポーネントで状態やその他のReact機能を使用できます。フックuseStateを使用すると、関数コンポーネントは、クラスコンポーネントとして書き直すことなく、独自の内部状態を設定できます。

このガイドをチェックして、Reactクラスと機能コンポーネントの違いを確認してください。

Reactで広く使用されているもう1つのフックは、useEffectです。 useEffectを使用すると、機能コンポーネントのコンテキストから副作用（または「効果」）が実行されます。副作用はJavaScript関数でも発生することを忘れないでください。

副作用は、関数が体の外で何かを変更したときに発生します。 Reactでも同じことで、データのフェッチ、サブスクリプション、または以前のReactコンポーネントからのDOMの変更を含めることができます。

useEffectとは何ですか？

React Hook useEffectを使用すると、機能コンポーネントで副作用を実行できます。これは、ReactクラスコンポーネントのライフサイクルメソッドcomponentDidMount、componentWillUpdate、およびcomponentWillUnmountと同じように機能します。詳細については、Reactライフサイクルメソッドに関するこの紹介を参照してください。

この記事では、フックの使用を開始する方法の基本的な例を示します。この記事の目的は、詳細な説明ではなく、紹介として機能することです。 useEffectの包括的な概要については、React Hooksに慣れたら、この概要をお読みください。

ReactHooks構文

useEffectを理解するには、最初にuseStateフックの構文を簡単に確認する必要があります。フックを使用する場合は、Reactがインポートされるのと同じようにフックをインポートする必要があります。

import React, { useState, useEffect } from 'react';

これで、フックを内部に使用して機能コンポーネントを定義できます。これはJavaScript関数スコープを利用しています。機能コンポーネント内でuseEffectフックを定義すると、スコープを介して状態と小道具にアクセスできます。範囲の詳細については、この入門書で確認してください。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

useState構文

わかりやすくするために、この例では単純なカウンターを使用しましょう。ボタンがクリックされた回数をDOMに出力します。インポートを備えた機能コンポーネントは次のようになります。

import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'

  const ButtonCounter = () => {
    return (
      <button>Click Me</button>
    )
  }
    


ReactDOM.render(
  <ButtonCounter />,
  document.getElementById('container')
);

これにより、ボタンがDOMにレンダリングされます。 useEffectを定義する前に、useStateフックを定義することで初期状態を設定できます。

const [count, setCount] = useState(0);

この構文を使用することにより、Reactは最初の変数を初期状態に設定します。この場合、変数「count」は、useStateに渡される引数によって設定されます。 Reactはカウントの初期状態を0に設定しました。2番目の変数はカウントを更新する関数として使用されます。

countの初期状態を0に設定したので、setCount関数を使用して状態を更新できます。

const ButtonCounter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked the button {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

setCountをonClickプロパティへのコールバック関数として使用することで、ボタンがクリックされるたびにDOMを更新できます。

これは、useStateで初期状態を設定するときに定義されたsetCount関数が機能していることを意味します。 useStateフックの構文を確認したので、useEffectを見てみましょう。

useEffect構文

前に述べたように、useEffectは副作用の使用を定義します。データフェッチおよび手動のDOM変更によるコンポーネントの変更は、副作用を構成します。 useEffectフックは、コンポーネントがレンダリングされるたびに呼び出されます。

これは、ReactクラスコンポーネントのcomponentDidMountおよびcomponentDidUpdateと同様に機能します。反例を進めると、useEffectで

要素に名前を表示してDOMを更新します。

const [count, setCount] = useState(0);
  const [name, setName] = useState(" ");

  useEffect(() => {
    setName(name + "Ryan")
  })
  return (
    <div>
      <p>Hello {name}! You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

これは意図的に正しくコーディングされていません。 DOMにプッシュされるものは、コンポーネントのレンダリングごとにuseEffectが呼び出されることを証明します。

これは、デフォルトでuseEffectフックがcomponentDidMountとcomponentWillUpdateの組み合わせのように動作するために発生します。

コンポーネントがマウントされたときにのみレンダリングするようにフックをカスタマイズするために、useEffectに2番目の引数を送信できます。 2番目の引数としてuseEffectに空の配列（[]）を渡すことにより、ReactはコンポーネントがマウントされたときにのみuseEffectを呼び出すことを認識します。

useEffect(() => {
    setName(name + "Ryan")
  }, [])

これで、機能コンポーネントがマウントされたときにのみ文字列「Ryan」が表示されるはずです。

すごい！フックの使用に慣れるには時間がかかります。それを念頭に置いて、公式のReactドキュメントには、フックの使用に関する更新されたガイドがあります。ここでそれを読んでください。

結論

このReactuseEffectフックの紹介では、フックとは何か、およびフックの使用方法を学びました。また、useStateフックとuseEffectフックの構文についても、それぞれの基本的な例で説明しました。

フックの潜在的な用途は、この入門書でカバーされているものをはるかに超えています。これを読み、独自のコードで時間を費やした後、リンクされたリソースに分岐して、ReactHooksの理解を深めてください。クラスコンポーネントはどこにも行きませんが、フックはReactの未来なので、最新情報を入手してください！