1

現在Reactを使っているのですが、stateに格納するデータは表示に関係するものだけ入れるべきなのでしょうか?

なぜこのような質問をするかというと、私が調べた限りsetStateで値を設定した場合、再描画が走るという認識です。
であれば設計方針としては、描画に直接的に関係ないデータはstateに格納するのではなく、インスタンス変数などに格納するべきなのでしょうか?

抽象的な質問ですがご回答よろしくお願いします。

2
  • "表示に関係するもの" とありますが、"表示に関係するもの" 、逆に "表示に関係しないもの" はそれぞれどのようなものと考えていらっしゃいますか?具体例があると回答しやすいと思います。
    – h-kanazawa
    Commented 2020年1月7日 10:27
  • 表示に関係するものはrender内などで表示されるデータそのものという想定です。また関係ないものとしては、例を上げるとページネーションを実現しているとして現在のページなどです。 Commented 2020年1月7日 14:38

1 件の回答 1

2

想定されているケースを私が正しく認識できていないかもしれないので、一様に state に入れるべきではない or 入れてもよい、とは回答できませんが、参考になる情報を記載します。

そのデータが、描画を含む React コンポーネントのライフサイクルに関係しないなら state に含める必要はありません。React 公式ドキュメントでも state を使っていない例がありますし、

何かデータフローに影響しないデータ(タイマー ID のようなもの)を保存したい場合に、追加のフィールドを手動でクラスに追加することは自由です。

という記述もあります。

https://ja.reactjs.org/docs/state-and-lifecycle.html


私が調べた限りsetStateで値を設定した場合、再描画が走るという認識です。

デフォルトのライフサイクルはその認識で正しいですが、shouldComponentUpdate を使って setState 後に不要な再描画を行わないようにもできます。

https://ja.reactjs.org/docs/optimizing-performance.html

1
  • 基本的にはライフサイクルに関係しないものは入れないようにしようかと思います。詳細なご回答ありがとうございました。 Commented 2020年1月9日 8:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。