react reduxのcomponentとcontainerの違いは何ですか?
Component`はReact APIの一部である。ComponentはReact UIの一部を記述するクラスまたは関数である。
コンテナとは、Reduxストアに「接続」されたReactコンポーネントの非公式な呼称です。コンテナはReduxの状態更新とdispatch
アクションを受け取り、通常はDOM要素のレンダリングを行いません; レンダリングは_presentational_子コンポーネントに委ねられます。
詳しくは、Dan Abramov氏のpresentational vs container components をお読みください。
データの取得と表示を担当するコンポーネントは、スマートコンポーネントまたはコンテナコンポーネントと呼ばれます。データはredux、任意のネットワークコール、サードパーティーのサブスクリプションから来ることができます。
ダム/プレゼンコンポーネントとは、受け取った小道具に基づいたビューを提示する役割を担うコンポーネントである。
事例を交えた良い記事はこちら
https://www.cronj.com/blog/difference-container-component-react-js/
コンポーネントはビューのピアスを構築するため、DOM要素をレンダリングし、コンテンツを画面に配置する必要があります。
コンテナはデータの精 ⁇ 化に参加するため、状態を変更する必要があるため、redxで「話す」必要があります。 したがって、接続するものを 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);
React、Reduxは独立したライブラリです。
Reactは、HTMLドキュメントを作成するためのフレームワークを提供します。 コンポーネントは、ドキュメントの特定の部分を表す方法です。 コンポーネントに関連付けられたメソッドは、ドキュメントの非常に特定の部分を操作できます。
Reduxは、JS環境でデータを保存および管理するための特定の哲学を規定するフレームワークです。 これは、特定のメソッドが定義された1つの大きなJSオブジェクトであり、最適な使用例は、Webアプリの状態管理の形で提供されます。
Reactはすべてのデータが根から葉に流れ落ちるように規定しているため、すべての小道具をメイン化し、コンポーネントで小道具を定義し、小道具を特定の小道具に子供に渡すのは面倒になります。 また、アプリケーション全体の状態が脆弱になります。
React Reduxは、接続されたコンポーネントを別のReactコンポーネント(「コンテナ」)に巻き付けるだけで、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
を渡します。
このようにして、接続はPersonコンポーネントのコンテナとして機能します。
コンポーネント。
コンポーネントを使用すると、UIを独立した再利用可能なピースに分割し、各ピースを個別に考えることができます。 それらは「プレゼンテーションコンポーネント」と呼ばれることもあり、主な関心事は物事の様子です。
コンテナ。
コンテナはUIのないコンポーネントのようであり、コンテナは物事のしくみに関心があります。。 主に、データの取得と更新についてreduxストアに問い合わせます。
Redux docの表の比較を参照してください。
。。
詳細な説明https://redux.js.org/basics/usage-with-react#presentational-and-container-components。