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

Яка різниця між компонентом і контейнером у реакції відновлення?

Componentє частиною API React. Компонент - це клас або функція, яка описує частину інтерфейсу React.

Контейнер - це неофіційний термін для компонента React, який входить connectдо складу резерву. Контейнери отримують оновлення та dispatchдії Redux , і вони, як правило, не надають елементів DOM; вони делегують візуалізацію до дочірнім презентаційним компонентам.

Детальніше читайте презентаційні та контейнерні компоненти від Дана Абрамова.

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

Німі / презентаційні компоненти - це ті, які відповідають за подання перегляду на основі отриманих реквізитів.

Хороша стаття з прикладом тут

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

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

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

Компоненти

Компоненти дозволяють розділити користувальницький інтерфейс на незалежні багаторазові шматки та подумати про кожен фрагмент окремо. Їх іноді називають "презентаційними компонентами", і головне питання полягає в тому, як виглядають речі

Контейнери

Контейнери подібно до компонентів без користувальницького інтерфейсу, і контейнери переймаються тим, як все працює. . В основному він розмовляє з магазином скорочення для отримання та оновлення даних

див. таблицю порівняння від Redux doc

Детальне пояснення https://redux.js.org/basics/usage-with-react#presentational-and-container-components

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

Подальше читання: Посилання

React, Redux є незалежними бібліотеками.

React надає вам основу для створення документів HTML. Компоненти певним чином представляють певну частину документа. Методи, пов’язані з компонентом, можуть потім маніпулювати самою частиною документа.

Redux - це рамка, яка призначає конкретну філософію для зберігання та управління даними в середовищах JS. Це один великий об'єкт JS з певними методами, визначений найкращий випадок використання у формі управління державою веб-додатком.

Оскільки React прописує, що всі дані повинні надходити від кореня до листя, стає втомлюючим ремонтувати всі реквізити, визначаючи реквізити в компонентах, а потім передавати реквізит певним реквізитом дітям. Це також робить уразливий стан усієї програми.

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

React має два основні компоненти: перший - розумний компонент (контейнери), а другий - німий (презентаційний компонент). Контейнери дуже схожі на компоненти, різниця лише в тому, що контейнери знають про стан застосування. Якщо частина вашої веб-сторінки використовується лише для відображення даних (німих), то перетворіть її на компонент. Якщо вам це потрібно, щоб бути розумним і знати про стан (щоразу, коли дані змінюються) у додатку, тоді зробіть це контейнером.