[解決済み] reduxの接続コンポーネントは、どのように再レンダリングするタイミングを知ることができますか？

質問

私はおそらく非常に明白な何かを見逃しているので、自分自身をクリアにしたいと思います。

以下は私の理解です。

素朴なリアクトコンポーネントでは states と入力します。 props . 更新 state と setState はコンポーネント全体を再レンダリングします。 props はほとんど読み取り専用で、更新しても意味がありません。

reduxストアにサブスクライブするreactコンポーネントでは、以下のような方法で store.subscribe(render) のように、reduxストアを購読しているreactコンポーネントでは、ストアが更新されるたびに明らかに再レンダリングが行われます。

react-redux にはヘルパーの connect() として、ステートツリーの一部 (コンポーネントにとって関心のあるもの) とアクションクリエータを注入します。 props としてコンポーネントに注入します。

const TodoListComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

しかし、理解した上で setState は必須であり TodoListComponent は redux のステートツリーの変更(再レンダリング)に反応するために必要なものですが、私は state または setState に関連するコードを TodoList コンポーネントファイルにあります。それは次のようなものです。

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

どなたか、私が何を見落としているのか、正しい方向を示していただけませんか？

追伸：私は redux パッケージにバンドルされている .

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

この connect 関数は、ストアを購読するラッパーコンポーネントを生成します。 アクションがディスパッチされると、ラッパーコンポーネントのコールバックが通知されます。 そして、あなたの mapState 関数を実行し を浅く比較します。 で、今回の結果オブジェクトと前回の結果オブジェクトを比較します（つまり、もしあなたが を書き換える を書き換えたとしても、再レンダリングは起こりません）。 もし結果が異なっていれば、その結果をプロップスとして "real" コンポーネント" に渡します。

Dan Abramov が書いた素晴らしい単純化されたバージョンの connect で ( connect.js ) で、最適化の作業は示されていませんが、基本的な考え方が示されています。 また、いくつかの記事へのリンクは Redux のパフォーマンス に関するいくつかの記事へのリンクもあります。

更新

React-Redux v6.0.0 は、接続されたコンポーネントがストアからデータを受け取る方法について、いくつかの主要な内部変更を行いました。

その一環として、私は投稿を書き、どのように connect API とその内部がどのように動作し、時間の経過とともにどのように変化してきたかを説明する記事を書きました。

Idiomatic Redux: React-Reduxの歴史と実装について。