初心者のための React useEffect と useLayoutEffect の完全ガイド-jsチュートリアル-php.cn

初心者のための React useEffect と useLayoutEffect の完全ガイド

Patricia Arquette

リリース： 2024-10-24 06:27:02

オリジナル

682 人が閲覧しました

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

React アプリケーションを構築する場合、useEffect や useLayoutEffect などのフックは副作用を管理するために不可欠なツールですが、いつどのように使用するかを理解するのは難しい場合があります。この初心者向けガイドでは、これら 2 つのフックの主な違い、いつ使用する必要があるか、およびよくある間違いを回避する方法を詳しく説明します。

はじめに: React におけるエフェクトの役割を理解する

あなたが家を飾っているところを想像してみてください。まず家具を配置し（レイアウト）、その後に装飾（エフェクト）を追加するとよいでしょう。 React では、エフェクト はこれらの装飾のようなもので、コンポーネントのレンダリング後にデータのフェッチやイベントリスナーの設定などのアクションを実行できるようになります。

React は、副作用を管理するための 2 つの主要なフック、useEffect と useLayoutEffect を提供します。どちらも重要な役割を果たしますが、いつどのように実行されるかによって動作が異なります。

useEffectとは何ですか？

副作用を処理するためのデフォルトのフック

useEffect から始めましょう。これは、React の副作用用に最もよく使用されるフックです。このフックは、コンポーネントのレンダリング後に実行されるため、API からのデータの取得、DOM の更新、サブスクリプションの設定などのアクションに最適です。

例：

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means this effect runs once when the component mounts

  return <div>{data ? data.name : 'Loading...'}</div>;
}

ログイン後にコピー

この例では、コンポーネントのレンダリング後に useEffect を使用してデータを取得します。これは、コンポーネントの初期レイアウトに影響を与えないアクションに最適です。

useLayoutEffectとは何ですか?

レイアウト効果が必要な場合

一方、useLayoutEffect は、より特殊なフックです。これは、DOM が更新された後、ブラウザが画面を描画する前に同期的に実行されます。つまり、useLayoutEffect はエフェクトの実行が完了するまでビジュアル更新をブロックできるため、レイアウトの測定やアニメーションの同期など、ユーザーが変更を確認する前に実行する必要があるタスクに最適です。

例：

import { useLayoutEffect, useRef } from 'react';

function LayoutComponent() {
  const ref = useRef();

  useLayoutEffect(() => {
    const height = ref.current.offsetHeight;
    console.log('Element height:', height);
    // This runs before the browser paints the screen
  });

  return <div ref={ref}>Hello, world!</div>;
}

ログイン後にコピー

この例では、useLayoutEffect を使用して、レンダリング直後、ブラウザーが画面を更新する前に、DOM 要素の高さを測定します。これにより、レイアウトを直接操作する必要があるタスクがより正確になります。

違いとベストプラクティス

どちらを選択するか

一見すると、useEffect と useLayoutEffect は似ているように見えますが、タイミングと使用例は大きく異なります。それぞれをいつ使用するかを簡単に説明します:

useEffect: ほとんどの副作用、特にデータのフェッチ、イベントリスナーの設定、状態の更新など、レイアウトに直接影響しない副作用にはこれを使用します。
useLayoutEffect: ブラウザーが画面を描画する前に DOM を測定または操作する必要がある場合にこれを使用します。これは、要素の寸法の計算やアニメーションの同期など、レイアウト関連のタスクにとって非常に重要です。

ベストプラクティス:

パフォーマンス: useLayoutEffect はレンダリングが完了するまでブロックするため、過度に使用するとパフォーマンスが低下する可能性があります。特にペイント前に DOM を操作する必要がない限り、useEffect を使用してください。
可読性: useEffect はより一般的に使用され、煩わしさが少ないため、useEffect を使用すると、ほとんどの開発者にとってコードが理解しやすくなります。

避けるべきよくある落とし穴

複雑なアプリでのエフェクトの悪用

多すぎる再レンダリングのトリガー: 適切な依存関係なしにエフェクト内で状態を設定しないように注意してください。これにより、コンポーネントが不必要に再レンダリングされ、ループが作成される可能性があります。

間違いの例:

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means this effect runs once when the component mounts

  return <div>{data ? data.name : 'Loading...'}</div>;
}

ログイン後にコピー

解決策: 必要な場合にのみ状態を更新し、依存関係配列内の正しい依存関係を使用します。

エフェクトをクリーンアップしていない: エフェクトでイベントリスナーやタイマーなどを設定している場合は、コンポーネントがアンマウントされたときに必ず適切にクリーンアップしてください。

例:

import { useLayoutEffect, useRef } from 'react';

function LayoutComponent() {
  const ref = useRef();

  useLayoutEffect(() => {
    const height = ref.current.offsetHeight;
    console.log('Element height:', height);
    // This runs before the browser paints the screen
  });

  return <div ref={ref}>Hello, world!</div>;
}

ログイン後にコピー

結論: 適切なエフェクト管理によるより良い React アプリの構築

useEffect と useLayoutEffect のどちらを選択するか最初は混乱するように思えるかもしれませんが、いつどのように実行されるかを明確に理解すれば、React コンポーネントを最適化してパフォーマンスと読みやすさを向上させることができます。

useEffect は、ほとんどの副作用に対する頼りになるフックで、レンダリング後に実行され、必要に応じてブラウザーが自由に画面を更新できるようになります。ただし、useLayoutEffect は、ユーザーに画面が表示される前に実行する必要があるレイアウト関連の更新のために予約する必要があります。

エフェクトを賢く管理することで、不必要な再レンダリングやレイアウトの不具合などのよくある落とし穴を回避し、React アプリの高速性、効率性、保守の容易さを確保します。

React スキルを向上させる準備はできましたか? 次のプロジェクトで useEffect と useLayoutEffect を使用して、アプリのパフォーマンスがどのように向上するかを確認してください。

この記事が気に入っていただけた場合は、私の仕事をサポートすることを検討してください: