React useMemo と useCallback の使用シナリオ

関数情報({
  スタイル、
}) {
  console.log('情報のレンダリングが行われます');

  使用効果(() => {
    console.log('データを再読み込み'); // 再レンダリングが発生するたびにデータが再読み込みされます}, [style]);

  戻る （
    <p スタイル={スタイル}>
      これは情報内のテキストです</p>
  );
}

関数ページ() {
  console.log('ページのレンダリング');

  定数[count, setCount] = useState(0);
  const スタイル = { 色: '赤' };

  // カウンターが +1 になると、ページが再レンダリングされ、その結果、Info の再レンダリングがトリガーされます (
    <div>
      <h4>カウント値: {count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <情報スタイル={スタイル} />
    </div>
  );
}

関数ページ() {
  console.log('ページのレンダリング');

  const [色] = useState('赤');
  定数[count, setCount] = useState(0);
  const style = useMemo(() => ({ color }), [color]); // スタイルは色が大幅に変更された場合にのみ変更されます // カウンターが +1 になると、ページの再レンダリングがトリガーされ、次に情報の再レンダリングがトリガーされます // ただし、スタイルはキャッシュされているため、情報のデータの再読み込みはトリガーされません return (
    <div>
      <h4>カウント値: {count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <情報スタイル={スタイル} />
    </div>
  );
}

クラス Parent は React.Component を拡張します {
   状態 = {
    クエリ: 'キーワード',
  }

  取得データ() {
    定数 url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${this.state.query}`;
    // データを要求します...
    console.log(`リクエストパス: ${url}`);
  }

  与える（） {
    戻る （
      // 子コンポーネントがレンダリングしないクエリ値を渡す <Child getData={this.getData} query={this.state.query} />
    );
  }
}

クラスChildはReact.Componentを拡張します。
  コンポーネントマウント() {
    このプロパティは、次の例のように機能します。
  }

  コンポーネントが更新されました(前のプロパティ) {
    // if (prevProps.getData !== this.props.getData) { // この条件は常に真です
    // this.props.getData();
    // }
    if (prevProps.query !== this.props.query) { // 判断にはクエリ値のみを使用できます this.props.getData();
    }
  }

  与える（） {
    戻る （
      // ...
    );
  }
}

関数親() {
  定数[count, setCount] = useState(0);
  const [クエリ、setQuery] = useState('キーワード');

  定数 getData = useCallback(() => {
    url に `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${query}` を追加します。
    // データを要求します...
    console.log(`リクエストパス: ${url}`);
  }, [query]); // getData はクエリが変更された場合にのみ更新されます // カウント値の変更によって、子がデータの再要求を行うことはありません (
    <>
      <h4>カウント値: {count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <input onChange={(e) => {setQuery(e.target.value)}} />
      <子 getData={getData} />
    </>
  );
}

関数Child({
  データを取得
}) {
  使用効果(() => {
    データを取得します。
  }, [getData]); // 関数は依存関係としてデータフローに参加できます return (
    // ...
  );
}