Реагировать на Redux и наследование - PullRequest
Новая
       5

Реагировать на Redux и наследование

0 голосов
/ 27 ноября 2018

Мне действительно интересно, почему в Redux ничего нет и как бороться с наследованием.Если у меня есть базовый компонент: 

class BaseComponent extends Component{

}

, тогда все остальные компоненты расширяются BaseComponent: 

class Todo extends BaseComponent {

}

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

К сожалению, не могу найти там никакой документации.Я понятия не имею, правильная ли это концепция или нет.

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Наследование не является широко предпочтительным и поощряется в React, и поэтому вы не найдете много документации об этом в Интернете.Лучший способ добиться того, чего вы хотите, - это экспортировать контейнер, который затем можно обернуть как HOC, в любой компонент, который вы хотите использовать для

connectContainer.js 

const mapStateToProps = state => {
   return {}; // return data you want from reducers
}

const mapDispatchToProps = {}; // define action creators you want to pass here

export default connect(mapStateToProps, mapDispatchToProps);

Теперь влюбой компонент, который вы хотите использовать те же свойства контейнера, вы можете использовать их как 

import connectHOC from './connectContainer';
class Todo extends React.Component {

}
export connectHOC(Todo);
0 голосов
/ 27 ноября 2018

С реакцией вы обычно не будете наследовать от своих собственных компонентов.

Вот цитата из официальных документов по Состав против наследования :

В Facebook мы используем React в тысячах компонентов, и мы не нашли ни одного случая использования, в котором мы бы рекомендовали создавать иерархии наследования компонентов.

Реквизиты и состав дают вам всю гибкость, необходимую для настройки внешнего вида компонента.и поведение в явной и безопасной форме.Помните, что компоненты могут принимать произвольные реквизиты, включая примитивные значения, элементы React или функции.

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

Это, как говорится, если вы все еще хотите отклониться от рекомендуемого способа и иметь базовый компонент для общего доступафункциональность, это возможно.Вы все еще на «безопасной стороне» (т.е. это, скорее всего, не вызовет слишком много путаницы или проблем), если вы (1) уменьшите функциональность своей базы до наименьшего общего знаменателя, необходимого большинству ее дочерних элементов (2), а несохраняйте любое общее состояние в базовом компоненте (3), не используйте , не используйте функции стрелок в базовом компоненте, а если вы (4), обязательно сохраняйте методы жизненного цикла и connect в дочерних компонентах, чтобы избежать непредвиденныхповедения.

Выполнение connect в базовом классе, как вы планируете это сделать, было бы проблематично, так как connect возвращает вновь обернутый компонент, который действует как владелец изваш фактический BaseComponent (см. , как работает connect ).Следовательно, вы потеряете возможность доступа к вашим методам класса в ваших ChildComponents.Также, скорее всего, произойдут и другие плохие вещи, потому что вы теперь независимо внедряете и управляете состоянием и жизненными циклами на двух уровнях (дочерний и базовый).- Поэтому при использовании пользовательского BaseComponent лучше всего не помещать connect в родительский объект, а позволить ребенку обработать соединение.

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

Так, каковы мои рекомендации для компонентов React?

  • Вы можете использовать класс в своем JS, если не наследуетедважды и не используйте super.
  • Предпочитайте писать компоненты React как чистые функции, когда это возможно.Используйте классы ES6 для компонентов, если вам нужны перехватчики состояния или жизненного цикла.
  • В этом случае вы можете только напрямую расширять React.Component.Оставьте свой отзыв команде React по предложениям о функциональном состоянии.

Вообще говоря, хороши или нет иерархии в программировании ООП, является предметом споров.

...