反応還元における成分と容器の差

Question

反応還元における成分と容器の違いは何ですか？

Answer 1

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

コンテナは、リアクタンスコンポーネントの非公式の用語で、connect-reduxストアです。コンテナはRedux状態の更新とdispatchアクションを受け取り、通常DOM要素をレンダリングしません。レンダリングをプレゼンテーション子コンポーネントに委譲します。

詳細はpresentational vs container components Dan Abramovによる。

Answer 2

両方ともコンポーネントです。コンテナは機能的なので、独自のHTMLをレンダリングせず、実際のhtmlを記述するプレゼンテーションコンポーネントも持っています。コンテナの目的は、状態とディスパッチをプレゼンテーションコンポーネントの小道具にマッピングすることです。

さらに読書：データをフェッチし、それはスマートまたはコンテナコンポーネントと呼ばれて表示するための責任があるLink

Answer 3

コンポーネント。データはredux、props、または任意のネットワークコールから取得できます。

ダム/プレゼンテーションコンポーネントは、受け取るデータの提示を担当するコンポーネントです。ここ

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

Answer 4

例と

良い記事のコンポーネントがビューのpiaceを構築し、それは、DOM要素をレンダリングする必要がありますが、画面上のコンテンツを置きます。

コンテナはデータの精緻化に参加しているので、状態を変更する必要があるため、reduxと「話す」必要があります。だから、あなたはそれが接続を作るもの（反応-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); 

Answer 5

が反応、Reduxのは、独立したライブラリです。

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

Reduxは、JS環境でデータを格納および管理するための特定の哲学を規定するフレームワークです。特定のメソッドが定義された1つの大きなJSオブジェクトです。ベストユースケースは、Webアプリケーションの状態管理の形で提供されます。

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

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

は、この単純な例を考えてみましょう：

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コンポーネントのコンテナとして機能します。