Узорак реакције: Централизовани типови власништва

Избегавајте понављање централизовањем ПропТипес-а

Постоје три популарна начина за руковање типовима у Реацту: ПропТипес, ТипеСцрипт и Флов. Овај пост говори о ПропТипе-овима, који су тренутно најпопуларнији.

? За примену типова у Реацт-у обично користим ... # реаговање

РТ је цењен

- Цори Хоусе (@хоусецор) 23. септембра 2017

Будући да ПропТипес пружају упозорења о типу током извођења, корисно је бити што прецизнији.

  • Компонента прихвата објекат? Изјавите облик предмета.
  • Проп прихвата само одређену листу вредности? Користите онеОф.
  • Низ треба да садржи бројеве? Користите арраиОф.
  • Можете чак и да пријавите своје врсте. АирБнБ нуди многе додатне ПропТипе-ове.

Ево примера ПропТипе:

UserDetails.propTypes = { user: PropTypes.shape({ id: PropTypes.number.isRequired, firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired, role: PropTypes.oneOf(['user','admin']) };

У стварним апликацијама са великим објектима ово брзо доводи до пуно кода. То је проблем, јер ћете у Реацт-у често преносити исти објекат у више компоненти . Понављање ових детаља у вишекомпонентним датотекама крши ДРИ принцип (не понављајте се). Понављање себе ствара проблем одржавања.

Раствор? Централизирајте своје ПропТипес .

Ево како да централизујете ПропТипес

Више волим да централизујем ПропТипес у /типес/индек.јс.

Користим именовани увоз на линији 2 за скраћивање декларација. ?

И ево како користим ПропТипе који сам горе изјавио:

// types/index.js import { shape, number, string, oneOf } from 'prop-types'; export const userType = shape({ id: number, firstName: string.isRequired, lastName: string.isRequired, company: string, role: oneOf(['user', 'author']), address: shape({ id: number.isRequired, street: string.isRequired, street2: string, city: string.isRequired, state: string.isRequired, postal: number.isRequired }); });

Користим именовани увоз да бих добио референцу на извезену ПропТипе декларацију на линији 2. И ставио сам је на употребу на линији 13.

Предности :

  1. Централизовани ПропТипе радикално поједностављује декларацију ПропТипе компоненте. Ред 13 само упућује на централизовани ПропТипе, тако да је једноставан за читање.
  2. Централизовани тип декларише само облик, тако да и даље можете по потреби означити реквизит.
  3. Нема више копирања / лепљења. Ако се облик предмета касније промени, имаћете једно место за ажурирање. ?

Ево радног примера на ЦодеСандбок-у.

Додатни кредит: генеришите своје ПропТипес

На крају, размислите о писању неког прилагођеног кода за генерисање ваших ПропТипе декларација из кода на страни сервера. На пример, ако је ваш АПИ написан на строго откуцаном језику као што је Ц # или Јава, размислите о томе да генеришете своје ПропТипе декларације као део процеса израде АПИ-ја на страни сервера читањем облика класа на страни сервера. На овај начин нећете морати да бринете о одржавању синхронизације ПропТипе-а на страни клијента и АПИ кода на страни сервера. ?

Напомена : Ако знате пројекат који то ради за било који језик на страни сервера, одговорите у коментарима и ја ћу овде додати везу.

Уреди : ЈСОН можете претворити у ПропТипес помоћу трансформ.нов.сх. ?

Резиме

  1. Наведите своје ПропТипес што је експлицитније могуће како бисте знали када сте погрешили.
  2. Централизирајте своје ПропТипе-ове како бисте избјегли понављање.
  3. Ако на серверу радите на строго откуцаном језику, размислите о томе да генеришете своје ПропТипе-ове читајући код на страни сервера. Ово осигурава да се ваши ПропТипеови подударају са типовима на страни сервера.

Тражите више о Реацт-у? ⚛

Написао сам вишеструке курсеве Реацт и ЈаваСцрипт на Плуралсигхт-у (бесплатна пробна верзија).

Цори Хоусе је аутор вишеструких курсева о ЈаваСцрипт-у, Реацт-у, чистом коду, .НЕТ-у и више о Плуралсигхт-у. Главни је консултант у компанији респонсејсцонсултинг.цом, софтверски архитекта у компанији ВинСолутионс, Мицрософт МВП, и међународне програмере обучава за софтверске праксе попут фронт-енд развоја и чистог кодирања. Цори твитује о ЈаваСцрипт-у и фронт-енд развоју на Твиттеру као @хоусецор.