[解決済み] Reactメモを使うべきではない場合とは？

質問

私はこれまで React 16.6.0 のアイデアが大好きで、最近 リアクト メモ のアイデアが大好きなのですが、それを実装するのに最適なシナリオに関するものを見つけることができませんでした。

Reactのドキュメント( https://reactjs.org/docs/react-api.html#reactmemo ) は、機能的なコンポーネントのすべてにそれを投げることから、どんな意味合いも示唆していないようです。

再レンダリングが必要かどうかを判断するために浅い比較を行うので、次のような状況が発生することはありますか?

がパフォーマンスにマイナスの影響を与えるような状況はありますか?

このような状況は、実装のための当然の選択のように思えます。

// NameComponent.js
import React from "react";
const NameComponent = ({ name }) => <div>{name}</div>;
export default React.memo(NameComponent);

// CountComponent.js
import React from "react";
const CountComponent = ({ count }) => <div>{count}</div>;
export default CountComponent;

// App.js
import React from "react";
import NameComponent from "./NameComponent";
import CountComponent from "./CountComponent";

class App extends Component {
  state = {
    name: "Keith",
    count: 0
  };

  handleClick = e => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <NameComponent name={this.state.name} />
        <CountComponent count={this.state.count} />
        <button onClick={this.handleClick}>Add Count</button>
      </div>
    );
  }
}

なぜなら name はこの文脈では決して変更されないので、この文脈では をメモする .

しかし、プロップが頻繁に変わるような状況ではどうでしょうか？

もし、別のボタンを追加して、そのボタンが他の状態を変化させ、再レンダリングを引き起こすとしたら、ラップする意味があるでしょうか？ CountComponent で メモ は、このコンポーネントの設計上、頻繁に更新されることになっているにもかかわらず、？

私の主な疑問は すべてが純粋なままである限り、React Memoで機能的なコンポーネントをラップしない状況があるのでしょうか？

どのように解決するのですか？

すべてのリアクトコンポーネントは shouldComponentUpdate() メソッドを実装しています．デフォルトでは（ React.Component を拡張したコンポーネント) では、これは常に真を返します。コンポーネントをメモすることで、( React.memo を通して) メモすることができるようになりました。 React.PureComponent を拡張したもの) が導入されます。 shouldComponentUpdate() メソッドの実装です。このメソッドは状態とプロップの浅い比較を行います。

を見ると ドキュメントを見ると を見ると、コンポーネントのライフサイクル・メソッドに関する shouldComponentUpdate() は 常に はレンダリングが行われる前に呼び出されます。これは、コンポーネントをメモすることで、更新のたびにこの追加の浅い比較が含まれることを意味します。

このことを考慮すると、コンポーネントをメモすることは は はパフォーマンスに影響を及ぼし、その影響の大きさは、アプリケーションをプロファイリングして、メモ化の有無によって動作が良くなるかどうかを判断することによって決定されるべきです。

あなたの質問に答えるために、私はあなたがコンポーネントをメモするべきまたはそうでないときの明確なルールがあるとは思いません。 shouldComponentUpdate() : パフォーマンスの問題を見つけるには、提案されている プロファイリングツール を使用してパフォーマンスの問題を発見し、コンポーネントを最適化する必要があるかどうかを識別します。