组分与容器的反应还原差异

小开

最佳答案

Component是 React API 的一部分。组件是描述 React UI 的一部分的类或函数。

Container 是 React 组件的一个非正式术语，connect-ed 为 reducx 存储。容器接收 Redux 状态更新和 dispatch动作，它们通常不呈现 DOM 元素; 它们将呈现委托给表象子组件。

更多细节请阅读 Dan Abramov 的表示组件与容器组件。

小开

它们都是组件; 容器是功能性的，所以它们不会自己呈现任何 html，然后还有表示组件，在这里编写实际的 html。容器的用途是将状态和分派映射到表示组件的道具。

延伸阅读: 林克

小开

负责获取和显示数据的组件称为智能组件或容器组件。数据可以来自 redux、任何网络呼叫或第三方订阅。

哑/表示组件是那些负责根据接收到的道具呈现视图的组件。

这是一篇很好的文章，还有一个例子

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

小开

组件构造了视图的一部分，因此它应该呈现 DOM 元素，将内容放在屏幕上。

容器参与了数据细化，因此它应该与 redux“对话”，因为它需要修改状态。因此，你应该包括连接(response-reducx)它建立的连接，以及函数 MapStateToProps和道具:

.
.
.
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 环境中存储和管理数据的特定哲学。它是一个大的 JS 对象，定义了某些方法，最好的用例来自于 Web 应用程序的状态管理。

由于 React 规定所有数据都应该从根流向叶子，因此主要处理所有道具，在组件中定义道具，然后将道具传递给特定的儿童道具就变得非常繁琐。它还使整个应用程序状态易受攻击。

React reux 提供了一个干净的解决方案，它通过简单地将连接元件(图论)包裹在另一个 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
}

函数传递一个支柱 type。

这样，连接就充当了 Person 组件的容器。

小开

React 有两个主要组成部分，第一个是智能组件(容器) ，第二个是哑组件(表示组件)。容器与组件非常相似，唯一的区别是容器知道应用程序的状态。如果您的网页的一部分只是用来显示数据(哑) ，然后使其成为一个组件。如果您需要它的智能性，并且知道应用程序中的状态(每当数据发生更改时) ，那么将它设置为一个容器。

小开

零件

组件使您可以将 UI 分割成独立的、可重用的部分，并独立地考虑每个部分。它们有时被称为“表示组件”，主要关注的是 事情看起来怎么样

集装箱

容器就像没有用户界面的组件，容器与 事情是如何运作的。有关。它主要通过 redux 存储来获取和更新数据

请参阅 Redux 文档中的表格比较

详细说明