web-dev-qa-db-ja.com

React-ReduxフックとReact-Redux Connect（）の主な違いは何ですか？

React-Reduxでプロジェクトを開始しようとしています。 API参照には、フックとconnect（）があります。以来、フックは接続APIの代替手段です。フックを使用するか、私のReact-Reduxプロジェクトに接続することの違いは何ですか？.

reactjsreact-reduxreact-hooks
6
sajal shrestha

フックを使用したり、React-Reduxプロジェクトに接続したりすることの違いは何ですか

主な違いは2つあります。

  • 範囲
    connectはReactクラスコンポーネントと関数コンポーネントの両方で使用できますが、フックは関数コンポーネントでのみ使用できます。

  • パフォーマンスとシンプルさ
    フックの使用はより簡単です。シンプルさは代償を伴います。connectに比べて、パフォーマンスの微調整が自由に行えます。これはより複雑です。構成オプション（数個または多く）を渡してそれを呼び出し、connectの「構成済みフレーバー」を取得します。このフレーバーは、ラップして戻すためにコンポーネントに渡すことを呼び出すHOCです。

    主要な構成オプションの1つは、すでに言及したmapStateToProps関数です。使用する必要はありませんが、ほとんどの場合使用します。 connectを使用してラップするコンポーネントのパフォーマンスを向上させるさまざまな機会を提供するためだけに存在する他の4つの関数があります。関数が呼び出されます：
    areStatesEqual
    areStatePropsEqual
    areOwnPropsEqual
    areMergedPropsEqual

    4つすべてはオプションです。 connect構成オプションとして、なし、または一部またはすべてを渡して、パフォーマンスを調整できます。何も渡さない場合でも、これらの関数のデフォルトの実装（実質的にパフォーマンスヘルパー）が適用され、その結果、フックを使用するものよりもパフォーマンスが最適化されたラップされたコンポーネントが得られることに注意してください。 。

1
winwiz1

フックを使用すると、dispatchを使用してコンポーネントを接続せずにconnectおよびredux-stateに直接アクセスでき、フックは機能コンポーネントでのみ使用できます

Connectを使用すると、コンポーネント（クラスまたは機能）をredux-storeにリンクできます。

this リンクからreact-reduxフックのドキュメントを参照できます。

それは次のような異なるフックを与えています

useSelectorを使用してreduxストアにアクセスできますuseDispatchはdispatch関数を返し、reduxアクションをディスパッチできます

コンポーネントのreduxフックの使用例は次のとおりです（これは機能コンポーネントでのみ使用できます）

functions Test() {
const dispatch = useDispatch()
const count = useSelector(state => state.counter)
// If you want to dispatch a redux action using hooks then
// Assume a redux action called increaseCounter

return (
<>
<p>{count}</p>
<button onClick={() => {dispatch(increaseCounter(count + 1))}}>
ClickMe!
</button></>)
}

接続を使用して同じことを実現したい場合（これをクラスまたは機能コンポーネントで使用できます）

function Test() {
  return (
    <>
      <p>{this.props.count}</p>
      <button onClick={() => {this.props.increaseCounter(this.props.count+1)}}>Click Me!</button>
    </>
  );
}

const mapStateToProps = state => {
  return {
    count: state.counter
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ increaseCounter }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Test)
1
Sumanth Madishetty