Модельные классы в React?

Question

React использует архитектуру Flux, и в https://reactjs.org/docs/thinking-in-react.html говорится, что React имеет две модели - state и props.И есть некоторые предложения по управлению моделями в React https://reactjs.org/community/model-management.html - но все это кажется некоторым дополнительным слоям для улучшения Flux.Основные вопросы, на которые я ищу ответы:

• Должен ли я определять классы моделей в React?Т.е. если у меня есть понятие класса Customer, то я могу: 1) определить атрибуты Customer непосредственно как атрибуты state/props 2) определить атрибуты Customer как атрибуты state.customer/props.customer;3) определите некоторый шаблон / класс JavaScript Customer отдельно и просто скажите, что state.customer/props.customer имеет тип Customer и не повторяет атрибуты в state/props.Я чувствую, что 3) правильный подход, не так ли?
• Если третий вариант (из предыдущего пункта) является правильным подходом, то как я могу определить шаблон Customer и как я могу это сделать?определить, что state.customer/props.customer принадлежит этому шаблону?Я мог бы использовать этот шаблон в некоторой сериализации, в некоторых задачах проверки модели, и я мог бы также использовать в проекте ReactNative.

Answer 1

Самый простой способ показан в следующем фрагменте:

const Customer = ({ name, age }) => (
  <div>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
  </div>
);

const App = () =>
  [{ name: "Bert", age: 22 }, { name: "Alfons", age: 45 }].map(
    ({ name, age }, i) => (
      <>
        <Customer key={i} name={name} age={age} />
        <hr />
      </>
    )
  );

Где вы определите эти реквизиты, зависит от того, где они вам нужны. Если реквизиты нужны только одному компоненту, вы определяете их в состоянии этих компонентов. Но часто вам нужны реквизиты из нескольких компонентов, поэтому вы поднимаете их в иерархии до . Это часто приводит к очень «умному» компоненту (компоненту с большим состоянием).

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

Если вы не хотите писать собственный контекст, вы можете использовать такие решения для управления состоянием, как redux или mobx . Они также используют контекст, но предоставляют удобные функции для простого подключения компонента к внешнему состоянию.