ジェネリック構成部品として
AppHeaderを作成する過程で反応ライフサイクルがよく分からなかったので、hooksに変更しました.
当時のコードは以下の通りです.

はんのうサイクルの文章を書いたばかりで、私の無知を知ったので、この文章を書きました.
もちろん、そのコードは私が望んでいるものです.

Route.pathname === router.pathname条件を満たす場合、pageHeaderの値

を変更する
この部分は通じない.
素子の取り付け時にのみ動作するcomponentDidMountの方法を用いたからである.
私が望むように、componentDidMountとcomponentDidUpdateで2回運転するべきです.
公式文書にもよく書かれていますが、バカです.

私の場合とまったく同じです.
これは、構成部品の取り付けや更新にかかわらず、同じside Effectを実行する必要があるためです.
react classコンポーネントにはこの方法はありません.

Hooks useEffect

Hooksを使うときはUserEffectを使えばいいです

useEffectの仕事は何ですか?

useEffect Hookでは、Reactコンポーネントがレンダリング後にどのような操作を行うべきかを示します.
reactは、伝達された関数を記憶し、DOM更新を実行した後にロードされます.

なぜエレメント内でuserEffectを呼び出すのですか?

useEffectを構成部品の内部に配置することで、効果によって状態変数(または任意のアイテム)にアクセスできます.関数の範囲内に存在し、特別なAPIを必要とせずに値を得ることができます.
Hookは、ReactのみのAPIを考慮するのではなく、JavaScriptのモジュールを使用して問題を解決します.

userEffectはレンダリング後に毎回実行されますか?

既定では、最初のレンダリングとその後のすべての更新で実行されます.

clean-upの効果の使用

これまで、整理する必要のない副作用を見てきました.
整理が必要な効果もあります.
外部データを購読する必要があるかどうかを考えてみましょう.この場合、メモリの漏洩を除去することが重要です.

Class Clean-up

classはComponentDidMountでサブスクリプションを設定し、ComponentWillUnmountでサブスクリプションをクリアします.

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return 'Loading...';
    }
    return this.state.isOnline ? 'Online' : 'Offline';
  }
}

componentDidMountとcomponentWillUnmountがどのように対称であるかを見てみましょう.
2つの方法には概念的に同じ効果のコードがありますが、ライフサイクルは分離されます.

Hooks Clean-up

定理の実施のためには別の効果が必要であると考えられる.ただし、サブスクリプションの追加と削除に使用されるコードは結合度が高いため、useEffectはそれらを同時に処理するように設計されている.
effectが関数を返すと、reactはクリーンアップが必要なときに関数を実行します.

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

なぜeffectから関数を返すのか

これは追加のクリーンアップメカニズムです.
すべての効果は、クリーンアップに使用する関数を返します.これにより、サブスクリプションの追加と削除のロジックが緊密に結合されます.
サブスクリプションの追加と削除は、いずれも効果を構成します.

いつ行動すべきか

構成部品のアンインストール時にクリーンアップを実行します.
ただし、前述の例のようにeffectは一度ではなく、レンダリングを実行するたびに実行されます.
これは、次の効果を実行する前に、以前のレンダリングから派生した効果を整理する理由です.
return関数は必ずしもnamedfunctionを返す必要はありません.矢印関数を返します.