序章

React Hooksは、Reactでの開発方法に革命をもたらし、最大の懸念事項のいくつかを解決しています。 useEffectフックを使用すると、反復的なコンポーネントのライフサイクルコードを置き換えることができます。

基本的に、フックはReact機能に「フック」できる特別な機能です。 以前に機能コンポーネントを作成し、それに状態を追加する必要があることに気付いた場合、フックは優れたソリューションです。

Hooksを初めて使用し、概要を知りたい場合は、 ReactHooksの概要を確認してください。

この記事は、あなたがuseStateフックに精通していることを前提としています。 そうでない場合は、恐れることはありません! Reactクラスベースのコンポーネントをステートフックを使用して機能的なコンポーネントに変換するのに少し時間を費やすと、正しい方向に進むことができます。

useEffectについて

useEffectは「副作用を使用する」の略です。 効果は、APIを操作するように、アプリケーションが外界と反応するときです。 これにより、何かが変更されたかどうかに基づいて関数を実行できます。 useEffectでは、componentDidMountcomponentDidUpdateを組み合わせることもできます。

私たちのアプリについて

事前に作成されたクラスベースのコードを取得して、それを機能コンポーネントに変換します。 reactstrap を使用してフォーマットを簡素化し、axiosを使用して外部ダミーAPIを呼び出します。

具体的には、 jsonplaceholder を使用して、最初のコンポーネントマウントにダミーのユーザーデータを取り込みます。

Starter Code

次に、ユーザーのクリックに基づいてコンポーネントを再レンダリングし、ユーザーに関する追加データを取得します。

Starter Code, clicked

入門

開始コードを使用してリポジトリのクローンを作成するだけです。

$ git clone https://github.com/alligatorio/use-effect-hook
$ npm i
$ npm start

コード、特にClassBasedComponent.jsファイルに慣れてください。

このファイルには、componentDidMountcomponentDidUpdateの2つのライフサイクルメソッドがあることに気付くでしょう。

async componentDidMount() {
  const response = await axios
    .get(`https://jsonplaceholder.typicode.com/users`);

  this.setState({ users: response.data });
};

async componentDidUpdate(prevProps) {
  if (prevProps.resource !== this.props.resource) {
    const response = await axios
      .get(`https://jsonplaceholder.typicode.com/users`);

    this.setState({ users: response.data });
  }
};

これらは両方ともasyncライフサイクルメソッドであり、 jsonplaceholderAPIを呼び出してユーザーのリストを取り込みます。

componentDidMountでは、最初のレンダリングでと言い、ユーザーデータを取得します。 次に、componentDidUpdateで、propsに変更がないかどうかを確認します。 これは、この例のように、ボタンを押すなど、ユーザーが開始したイベントからトリガーできます。 変更が検出されたら、外に出てデータを再度取得します

ライフサイクルメソッドをuseEffectフックに凝縮し、関数ベースのコンポーネントを作成します。

コンポーネントを作成する

同じClassBasedComponent.jsファイルを使用するのではなく、FunctionBasedComponent.jsという名前の新しいファイルを作成します。 2つを対比して比較できるように、新しいファイルを作成しています。

ターミナルで、次のコマンドを実行して、ルートディレクトリから新しいファイルを作成できます。

$ touch FunctionBasedComponent.js

開始するには、以下のコードをコピーして新しいファイルに貼り付けてください。

import React, { useState, useEffect } from 'react';
import { Container, Button, Row } from 'reactstrap';
import axios from 'axios';

const FunctionBasedComponent = () => {
  return (
    <Container className="user-list">
      <h1>My Contacts:</h1>
    </Container>
  )
};

export default FunctionBasedComponent;

次に、App.jsファイルに移動し、FunctionBasedComponent.jsファイルをインポートして、ClassBasedComponentFunctionBasedComponentに置き換えます。

これで、アプリは次のスクリーンショットのようになります。

our starting useEffect app


useStateで状態を初期化することから始めましょう。

const [ users, setUsers ] = useState([]);
const [ showDetails, setShowDetails ] = useState(false);

useStateをすばやく要約し、stateuseStateフックで初期化するには、変数と、配列内の変数に対応する関数の両方を宣言してから、[ X188X]