Javascript react redux中组件和容器的区别

Difference between component and container in react redux

提问by Stanislav Mayorov

What is the difference between component and container in react redux?

react redux中的组件和容器有什么区别？

回答by joews

Componentis part of the React API. A Component is a class or function that describes part of a React UI.

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

Containeris an informal term for a React component that is connect-ed to a redux store. Containers receive Redux state updates and dispatchactions, and they usually don't render DOM elements; they delegate rendering to presentationalchild components.

Container是 React 组件的非正式术语，它被connect-ed 到 redux 存储。容器接收 Redux 状态更新和dispatch动作，它们通常不渲染 DOM 元素；它们将渲染委托给展示性子组件。

For more detail read presentational vs container componentsby Dan Abramov.

有关更多详细信息，请阅读Dan Abramov 的presentational vs container components。

回答by Akash Bhandwalkar

Component which is responsible for fetching data and displaying is called smart or container components. Data can be come from redux, any network call or third party subscription.

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

Dumb/presentational components are those which are responsible for presenting view based on props received.

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

Good article with example here

好文章，这里有例子

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

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

回答by J C

The components construct a piace of the view, so it should render DOM elements, put content on the screen.

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

The containers participate in the data elaboration, so it should "talk" with redux, because it will need to modify the state. So, you should include connect(react-redux) what it makes the connection, and the functions mapStateToPropsand mapDispatchToProps:

容器参与数据细化，因此它应该与 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);

回答by gsaandy

Components

成分

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. They are sometimes called "presentational components" and the main concern is how things look

组件让您可以将 UI 拆分为独立的、可重用的部分，并单独考虑每个部分。它们有时被称为“展示组件”，主要关注的是事物的外观

Containers

容器

Containers are just like components without UI and Containers are concerned with how things work.. It mainly talks to the redux store for getting and updating the data

容器就像没有 UI 的组件一样，容器关注事物的工作方式。. 它主要与 redux store 对话以获取和更新数据

see the table comparison from Redux doc

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

Detailed explanation https://redux.js.org/basics/usage-with-react#presentational-and-container-components

详解https://redux.js.org/basics/usage-with-react#presentational-and-container-components

回答by NiftyAsp

They're both components; containers are functional, so they do not render any html on their own, and then you also have presentational components, where you write the actual html. The purpose of the container is to map the state and dispatch to props for the presentational component.

它们都是组件；容器是功能性的，因此它们不会自己渲染任何 html，然后您还有展示组件，您可以在其中编写实际的 html。容器的目的是将 state 和 dispatch 映射到表示组件的 props。

Further reading: Link

进一步阅读：链接

回答by nirbhaygp

React, Redux are independent libraries.

React、Redux 是独立的库。

React provides you with a framework for creating HTML documents. Components are in a way representing a particular part of the document. Methods associated with a component can then manipulated the very particular part of the document.

React 为您提供了一个用于创建 HTML 文档的框架。组件以某种方式表示文档的特定部分。然后，与组件相关联的方法可以操作文档中非常特殊的部分。

Redux is a framework which prescribes to a specific philosphy for storing and managing data in JS environments. It a one big JS object with certain methods defined, best use case comes in the form of state management of a web app.

Redux 是一个框架，它规定了在 JS 环境中存储和管理数据的特定哲学。它是一个定义了某些方法的大型 JS 对象，最佳用例以 Web 应用程序的状态管理的形式出现。

Since React prescribes that all the data should flow down from root to leaves, it becomes tedious to main all the props, defining props in components and then passing props to certain props to children. It also makes the entire application state vulnerable.

由于 React 规定所有数据都应该从根向下流动到叶子，因此主所有 props，在组件中定义 props 然后将 props 传递给某些 props 给子级变得乏味。它还使整个应用程序状态易受攻击。

React Redux offers a clean solution, where it directly connects you to the Redux store, by simply wrapping the connected component around another React Component( your Container). Since in your implementaion, your implementation you already defined which piece of the entire application state you require. So connecttakes that data out of store and passes it as props to the component it wrapping itself arround.

React Redux 提供了一个干净的解决方案，通过简单地将连接的组件包装在另一个 React 组件（您的Container）周围，​​它直接将您连接到 Redux 存储。由于在您的实现中，您的实现已经定义了您需要的整个应用程序状态的哪一部分。因此，connect将这些数据从存储中取出，并将其作为道具传递给它包裹自身的组件。

Consider this simple example:

考虑这个简单的例子：

 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
 }

connectfunction passes a prop type.

connect函数传递一个 prop type。

This way a connect acts as container for the Person component.

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

回答by Neel Patel

React has two main components first is smart component(containers) and second is dumb(presentation component). Containers are very similar to components, the only difference is that containers are aware of application state. If part of your webpage is only used for displaying data (dumb) then make it a component. If you need it to be smart and aware of the state (whenever data changes) in the application then make it a container.

React 有两个主要组件，第一个是智能组件（容器），第二个是哑组件（表示组件）。容器与组件非常相似，唯一的区别是容器了解应用程序状态。如果您的网页的一部分仅用于显示数据（哑巴），则将其设为组件。如果您需要它智能并了解应用程序中的状态（每当数据更改时），则将其设为容器。