React Js パートのライフサイクル メソッドと React のフック

React は、宣言的にユーザー インターフェイスを構築できる JavaScript ライブラリです。 React の重要な概念の 1 つは、コンポーネントのライフサイクルを管理する方法です。この記事では、クラス コンポーネントのライフサイクル メソッドとフックという 2 つの主要な側面について説明します。

1. クラスコンポーネントのライフサイクルメソッド

ライフサイクル メソッドは、コンポーネントのライフサイクルのさまざまな段階で呼び出される特別なメソッドです。以下に、最も一般的なライフサイクル メソッドとその目的をいくつか示します。

ａ．取り付け

• constructor(props): 最初に呼び出されるメソッド。通常、状態の​​初期化とメソッドのバインドに使用されます。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• ComponentDidMount(): コンポーネントが最初に DOM にマウントされた後に呼び出されます。データの取得やサブスクリプションの初期化に最適です。

componentDidMount() {
  this.fetchData();
}

b.更新中

componentDidUpdate(prevProps, prevState): コンポーネントの更新後に呼び出されます。小道具や状態の変化に応答するのに役立ちます。無限ループを避けるために、必ず変更を確認してください。

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c.アンマウント中

componentWillUnmount(): コンポーネントが DOM から削除される直前に呼び出されます。サブスクリプション、タイマー、またはクリーンアップが必要なその他の操作をクリーンアップするのに役立ちます。

componentWillUnmount() {
  this.cleanup();
}

d.エラー処理

componentDidCatch(error, info): 子コンポーネントのエラーをキャッチするために使用されます。一元的なエラー処理に役立ちます。

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

2. React フックの概要

React Hooks は、クラス コンポーネントを作成せずに状態メソッドとライフサイクル メソッドを使用できるようにする機能です。最も一般的に使用されるフックのいくつかを次に示します:

ａ． useState()

機能コンポーネントに状態を追加するために使用されます。この関数は、現在の状態とそれを更新する関数のペアを返します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

b. useEffect()

useEffect を使用すると、機能コンポーネントで副作用を実行できます。これは、componentDidMount、componentDidUpdate、componentWillUnmount の機能を組み合わせたものです。

• 例 1: 空の配列 ([]) を使用した useEffect useEffect が依存関係として空の配列とともに使用される場合、エフェクトはコンポーネントのマウント後に 1 回だけ実行されます。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• 例 2: 依存関係配列を使用しない useEffect useEffect が依存関係配列なしで提供されている場合、コンポーネントが再レンダリングされるたびにエフェクトが実行されます。

componentDidMount() {
  this.fetchData();
}

• 例 3: 依存関係の配列を使用した useEffect 依存関係の配列を指定すると、配列内の値の 1 つが変更されるたびにエフェクトが実行されます。

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c. useContext()

useContext フックは、機能コンポーネントのコンテキストにアクセスするために使用されます。これは、テーマやユーザー認証ステータスなどのグローバル データをプロップドリルなしで共有する場合に特に便利です。

例: useContext を使用したテーマ
この例では、明るいテーマと暗いテーマを切り替えることができる単純なテーマ コンテキストを作成します。

1.テーマコンテキストを作成します
まず、テーマのコンテキストを作成します。

componentWillUnmount() {
  this.cleanup();
}

2.テーマコンテキストを消費します
次に、テーマのコンテキストを使用してスタイルを適用し、テーマを切り替えるボタンを提供するコンポーネントを作成できます。

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

3.アプリケーションをテーマプロバイダーでラップします
最後に、アプリケーション (またはその一部) を ThemeProvider でラップして、その子にテーマ コンテキストを提供します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

説明

• テーマ コンテキストの作成: createContext と、現在のテーマの状態を管理し、それを切り替える機能を提供する ThemeProvider コンポーネントを使用して ThemeContext を作成します。

• コンテキストの消費: ThemedComponent では、useContext(ThemeContext) を使用して現在のテーマと切り替え関数にアクセスします。このコンポーネントは、現在のテーマに基づいてさまざまなコンテンツをレンダリングし、それを切り替えるボタンが含まれています。

• アプリケーション構造: アプリケーション全体 (またはその一部) が ThemeProvider でラップされ、子コンポーネントがテーマ コンテキストにアクセスできるようになります。

d. useMemo() と useCallback()

• useMemo(): レンダリングのたびに再計算するのを避けるために、高価な計算の結果をキャッシュします。

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

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

• useCallback(): レンダリングのたびに関数が再作成されるのを避けるために関数をキャッシュします。

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

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

3. フックを使用する利点

フックは、高次コンポーネント (HOC) を使用したりプロップをレンダリングしたりすることなく、コンポーネント間でロジックを共有する柔軟性と機能を提供します。フックを使用する利点は次のとおりです。

• シンプルさと明確さ: コードがすっきりして読みやすくなります。
• 柔軟性: ロジックは、どこでも再利用できる小さな関数に分割できます。
• 複雑さの軽減: クラスや複雑なライフサイクル メソッドの使用を回避します。

---

ライフサイクル メソッドとフックは、React 開発の 2 つの重要な側面です。両方の概念がどのように機能するかを理解することで、より効率的で保守しやすいコンポーネントを作成できるようになります。特にフックは、機能コンポーネントの開発に新たな可能性をもたらし、状態や副作用との対話方法を変えます。

ライフサイクル メソッドとフックをマスターすることで、より堅牢で応答性の高い React アプリケーションを構築できるようになります。コーディングを楽しんでください!

以上がReact Js パートのライフサイクル メソッドと React のフックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。