Разница между компонентом и контейнером в реакции редукции

Ответ 1

Component является частью React API. Компонент - это класс или функция, которая описывает часть пользовательского интерфейса React.

Контейнер является неофициальным термином для компонента React, который connect -ed в хранилище redux. Контейнеры получают обновления состояния Redux и действия dispatch, и обычно они не отображают элементы DOM; они делегируют рендеринг презентационным дочерним компонентам.

Подробнее см. презентация против компонентов контейнера Дэн Абрамов.

Ответ 2

Компонент, который отвечает за выборку и отображение данных, называется интеллектуальным компонентом или компонентом контейнера. Данные могут быть получены из-за переадресации, любого сетевого звонка или сторонней подписки.

Тупые/презентационные компоненты - это те, которые отвечают за представление представления на основе полученных реквизитов.

Хорошая статья с примером здесь

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

Ответ 3

Компоненты создают piace представления, поэтому он должен отображать элементы DOM, помещать контент на экран.

Контейнеры участвуют в разработке данных, поэтому он должен "говорить" с 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);

Ответ 4

Они оба являются компонентами; контейнеры функциональны, поэтому они не отображают какой-либо html самостоятельно, а затем у вас также есть презентационные компоненты, где вы пишете фактический html. Целью контейнера является отображение состояния и отправка в реквизит для презентационного компонента.

Дополнительная литература: Ссылка

Ответ 5

React, Redux - независимые библиотеки.

React предоставляет вам структуру для создания HTML-документов. Компоненты представляют собой определенную часть документа. Затем методы, связанные с компонентом, могут манипулировать самой конкретной частью документа.

Redux - это структура, которая предписывает конкретную философию для хранения и управления данными в средах JS. Это один большой объект JS с определенными методами, наилучшим вариантом использования является форма управления государственным веб-приложением.

Так как React предписывает, что все данные должны течь от корня до листьев, становится утомительно использовать все реквизиты, определять реквизит в компонентах, а затем передавать реквизиты определенным реквизитам для детей. Это также делает уязвимым состояние всего приложения.

React Redux предлагает чистое решение, в котором он напрямую соединяет вас с хранилищем Redux, просто обернув подключенный компонент вокруг другого компонента React (ваш Container). Поскольку в вашей реализации, в вашей реализации вы уже определили, какая часть всего состояния приложения вам требуется. Таким образом, 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 функция передает prop type.

Таким образом, соединение действует как контейнер для компонента Person.

Ответ 6

В React есть два основных компонента: первый - "умный" компонент (контейнеры), а второй - "немой" (компонент представления). Контейнеры очень похожи на компоненты, единственное отличие состоит в том, что контейнеры знают о состоянии приложения. Если часть вашей веб-страницы используется только для отображения данных (немой), то сделайте ее компонентом. Если вам нужно, чтобы он был умным и знал о состоянии (при каждом изменении данных) в приложении, сделайте его контейнером.