Difference between component and container in reac

问题:

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

回答1:

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

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

For more detail read presentational vs container components by Dan Abramov.

回答2:

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

Dumb/presentational components are those which are responsible for presenting data that receives.

Good article with example here

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

回答3:

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.

Further reading: Link

回答4:

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

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 mapStateToProps and 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);

回答5:

React, Redux are independent libraries.

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.

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.

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 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 connect takes that data out of store and passes it as props to the component it wrapping itself arround.

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
 }

connect function passes a prop type.

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

回答6:

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.