Дженерик ИЛИ разложение? как правильно реагировать

Question

У меня есть приложение, разработанное в Angular с машинописным шрифтом, которое имеет более 20 экранов с представлениями списков различных объектов, таких как Список фильмов, Список актеров, Список театров и т. Д. c. Я создал BaseListComponent<T extends Base> в angular и инкапсулировал большинство общих функций, таких как просмотр, фильтр, удаление, поиск, разбиение на страницы и т. Д. c, в эту BaseListComponent. И я создаю детей этого как MoviesListComponent extends BaseListComponent<Movies>. Таким образом, мне нужно добавить минимальную функциональность в дочерние классы, что уменьшает объем ошибок, а также усилия для юнит-тестов.

Теперь я конвертирую это приложение в React с машинописью. Я изучал ловушки реакции и узнал, что многие разработчики предпочитают функционально-ориентированный подход по сравнению с компонентами на основе классов. Как я могу создать вышеуказанную структуру с функциями. Насколько я понимаю, в функциях нет наследования. Поэтому я сомневаюсь, что Generics будет выполнимо с функциями. Если нет, то как я могу решить эту проблему, используя популярный подход разложения? Есть ли какое-либо руководство по использованию дженериков или разложения в реакции?

Answer 1

Чтобы сделать это "реагирующим стилем", сначала нужно создать компонент BaseListComponent. Затем поместите перечисленные здесь функции «просмотр, фильтрация, удаление, поиск, разбиение на страницы и т. Д. c». Но всякий раз, когда вы хотите, чтобы некоторые функции вели себя по-разному для производных классов, вы помещаете в эту функцию обратный вызов.

Например:

renderView = () => { // function of BaseListComponent
  const header = (
    <div>--I am Header--</div>
  );
  const footer = () => (
    <div>--------</div>
  );
  const letDerivedClassDecide = this.props.renderCenter();
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
        {header}
        {letDerivedClassDecide}
        {footer}
    </div>
  );
}

Этот пример означает, что вы можете управлять базой c layout как вертикальный flex-div, но вы позволяете производному классу реализовать this.props.renderCenter, чтобы его результат можно было комбинировать с basi c layout.

view = () => { // function of BaseListComponent
  let someResult = 100;
  someResult = this.props.view();
  return someResult;
}

Та же идея, this.props.view реализуется производным классом.

Наконец, в производном классе это будет выглядеть следующим образом:

render() { // function of DeriveComponent; can be MoviesListComponent
  return (
    <BaseListComponent
      renderCenter={this.renderCenter}
      view={this.view}
    >
  );
}

Обратите внимание, что производный класс на самом деле не «наследует» или расширяет базовый компонент, он просто объединяет его в функции render(). Таким образом, BaseListComponent и MoviesListComponent расширяются React.Component (или React.PureComponent при рассмотрении проблемы производительности).