web-dev-qa-db-ja.com

反応還元剤における成分と容器の違い

反応還元剤の成分と容器の違いは何ですか？

javascriptreactjsredux
89
Stanislav Mayorov

Componentname__はReact APIの一部です。コンポーネントはReact UIの一部を記述するクラスまたは関数です。

コンテナは、reduxストアにconnectnameされたReactコンポーネントの非公式の用語です。コンテナはReduxの状態更新とdispatchname__アクションを受け取り、通常DOM要素をレンダリングしません。彼らはプレゼンテーショナルの子コンポーネントにレンダリングを委任します。

詳細については、 プレゼンテーションとコンテナーのコンポーネントとの対比 Dan Abramovによる。

106
joews

データの取得と表示を担当するコンポーネントは、スマートコンポーネントまたはコンテナコンポーネントと呼ばれます。データはredux、ネットワークコール、またはサードパーティのサブスクリプションから取得できます。

ダム/プレゼンテーションコンポーネントは、受け取った小道具に基づいて意見を提示する責任があるコンポーネントです。

例を使った良い記事はこちら

https://www.cronj.com/blog/difference-container-component-react-js/

7
Akash Bhandwalkar

コンポーネントはビューのピアスを構成するので、DOM要素をレンダリングし、画面にコンテンツを配置します。

コンテナーはデータの作成に参加するので、状態を変更する必要があるため、reduxと「対話する」必要があります。それで、あなたはconnect（react-redux）それが接続するもの、そして関数mapStateToPropsとmapDispatchToPropsを含めるべきです：

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);
3
J C

両方ともコンポーネントです。コンテナは機能的なので、HTMLを独自にレンダリングすることはありません。それから、実際のHTMLを記述するためのプレゼンテーションコンポーネントもあります。コンテナーの目的は、状態とディスパッチを表示コンポーネントの小道具にマップすることです。

続きを読む： Link

2
lysdexic

実際のところ、Reduxは独立したライブラリです。

ReactはHTML文書を作成するためのフレームワークを提供します。コンポーネントはある意味でドキュメントの特定の部分を表しています。コンポーネントに関連付けられているメソッドは、ドキュメントの特定の部分を操作できます。

Reduxは、JS環境でデータを保存および管理するための特定の理念を規定したフレームワークです。これは、特定のメソッドが定義された1つの大きなJSオブジェクトです。最良の使用例は、Webアプリケーションの状態管理という形です。

Reactはすべてのデータをルートからリーフに流すように規定しているので、すべてのプロップをメインにし、コンポーネントでプロップを定義してから、特定のプロップにプロップを渡すことは面倒になります。また、アプリケーション全体の状態を脆弱にします。

React Reduxは、接続されているコンポーネントを別のReactコンポーネント（あなたのContainer）の周りにラップするだけで、ユーザーをReduxストアに直接接続する、クリーンなソリューションを提供します。あなたの実装では、あなたの実装はあなたが既に必要としている全体のアプリケーション状態のどの部分を定義しています。そのためconnectはそのデータを格納場所から取り出し、それを囲むコンポーネントにそれを小道具として渡します。

この簡単な例を見てください。

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connect関数はプロップtypeを渡します。

このように、connectはPersonコンポーネントのコンテナとして機能します。

1
nirbhaygp

Reactには2つの主要コンポーネントがあります。1つはスマートコンポーネント（コンテナ）で、もう1つはダム（プレゼンテーションコンポーネント）です。コンテナはコンポーネントと非常によく似ていますが、唯一の違いはコンテナがアプリケーションの状態を認識していることです。あなたのWebページの一部がデータを表示するためだけに使われている場合（ダム）、それをコンポーネントにしてください。賢く、アプリケーションの状態を（データが変わるたびに）認識する必要がある場合は、それをコンテナにします。

1
Neel Patel