Как написать лучший код React?

Оригинальный адрес:How To Write Better Code In React

Оригинальный автор:Rajat S

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:Github.com/ Редкая земля / золото - не ...

Переводчик:jonjia

Корректор:jasonxia23 старый профессор

9 практических советов по написанию лучшего кода React: узнайте о проверках кода, propTypes, PureComponent и многом другом.

использоватьReactИнтерактивные интерфейсы могут быть легко созданы. Создавайте простые представления для каждого состояния в вашем приложении, а React эффективно обновляет и отображает правильные компоненты при изменении данных.

В этой статье я расскажу о некоторых способах сделать вас лучшим разработчиком React. Он охватывает все, от инструментов до стиля кодирования, и все это может помочь вам улучшить свои навыки, связанные с React. 💪

проверка кода

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

Но помимо проблемы захвата,ES LintЭто также поможет вам узнать о лучших практиках для кода React.

import react from 'react';
/* 其它 imports */

/* Code */

export default class App extends React.Component {
  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return <Loader />;
    
    return (
      /* Code */
    )
  }
}

Взгляните на код выше. Предположим, вы хотитеrender()Метод ссылается на метод, называемыйthis.props.helloновые свойства. Инструмент проверки кода немедленно сделает код красным и предложит:

props 验证没有 'hello' (react/prop-types)

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

ты можешь идтиОфициальный сайт ESLintНастройте инструменты проверки кода для JavaScript или используйтеРуководство по стилю JavaScript от Airbnb. также можно установитьReact ESLint Package.

propTypesи defaultProps

В предыдущем разделе я говорил о том, как работает мой инструмент проверки кода при использовании несуществующей опоры.

static propTypes = {
  userIsLoaded: PropTypes.boolean.isRequired,
  user: PropTypes.shape({
    _id: PropTypes.string,
  )}.isRequired,
}

Здесь, еслиuserIsLoadedНе обязательно, тогда добавим в код описание:

static defaultProps = {
 userIsLoaded: false,
}

Поэтому всякий раз, когда мы хотим использовать в компоненте参数类型检查, для него необходимо установить propType. Как и выше, мы говорим React:userIsLoadedТип всегда является логическим.

если мы объявимuserIsLoadedне является обязательным значением, то мы должны определить для него значение по умолчанию. При необходимости нет необходимости определять значение по умолчанию. Однако в правилах также указано, что не следует использовать неоднозначные свойства propTypes, такие как объекты или массивы.

зачем использоватьshapeметод проверкиuserЧто, потому что внутри него должен быть тип строкиidсвойства, в то время как весьuserОбъект снова требуется.

Обязательно использоватьpropsКаждый компонент заявленногоpropTypesа такжеdefaultProps, что отлично подходит для написания лучшего кода React.

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

Уведомление:

Начиная с React v15.5, proptypes больше не являются встроенными и должны быть добавлены в ваш проект как отдельный пакет зависимостей.

Нажмите на ссылку ниже, чтобы узнать больше:

prop-types: Инструмент для проверки реквизитов React и аналогичных типов объектов во время выполнения.

Знайте, когда создавать новые компоненты

export default class Profile extends PureComponent {
  static propTypes = {
    userIsLoaded: PropTypes.bool,
    user: PropTypes.shape({
      _id: PropTypes.string,
    }).isRequired,
  }
  
  static defaultProps = {
    userIsLoaded: false,
  }
  
  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return <Loaded />;
    return (
      <div>
        <div className="two-col">
          <section>
            <MyOrders userId={user._id} />
            <MyDownloads userId={user._id} />
          </section>
          <aside>
            <MySubscriptions user={user} />
            <MyVotes user={user} />
          </aside>
        </div>
        <div className="one-col">
          {isRole('affiliate', user={user._id) &&
            <MyAffiliateInfo userId={user._id} />
          }
        </div>
      </div>
    )
  }
}

EстьProfileс компонент. Внутри этого компонента также есть такие вещи, какMyOrderа такжеMyDownloadsтакие другие компоненты. потому что они из одного и того же источника данных (user), чтобы получить данные, поэтому вы можете написать все эти компоненты вместе. Превратите эти маленькие компоненты в один гигантский компонент.

Хотя жестких правил о том, когда создавать новый компонент, не существует, спросите себя:

Функциональность кода стала громоздкой?
Он просто представляет что-то свое?
Нужно ли повторно использовать эту часть кода?

Если ответ на один из вопросов выше положительный, то вам необходимо создать новый компонент.

Помните, любой взбесится, если увидит ваш 200–300-строчный компонент, и тогда никто не захочет снова смотреть на ваш код.

Component vs PureComponent vs Stateless Functional Component

Реагируйте на разработчика, чтобы знать, когда использовать в своем кодеComponent,PureComponentа такжеStateless Functional Componentочень важно.

Вы могли заметить, что в приведенном выше коде я неProfileунаследовано отComponent, ноPureComponent.

Во-первых, давайте взглянем на функциональный компонент без сохранения состояния.

Функциональный компонент без сохранения состояния

const Billboard = () => (
  <ZoneBlack>
    <Heading>React</Heading>
    <div className="billboard_product">
      <Link className="billboard_product-image" to="/">
        <img alt="#" src="#">
      </Link>
      <div className="billboard_product-details">
        <h3 className="sub">React</h3>
        <p>Lorem Ipsum</p>
      </div>
    </div>
  </ZoneBlack>
);

Функциональные компоненты без состояния — очень распространенный тип компонентов. Это дает нам очень аккуратный способ создать что-то, что не использует никакихstate,refsилиметоды жизненного циклас компонент.

Функциональные компоненты без состояния характеризуются отсутствием состояния и только одной функцией. Таким образом, вы можете определить компонент как постоянную функцию, которая возвращает некоторые данные.

Проще говоря, функциональные компоненты без сохранения состояния — это функции, которые возвращают JSX.

PureComponents

Обычно, когда компонент получает новые реквизиты, React перерисовывает компонент. Но иногда только что переданный реквизит на самом деле не меняется, и React по-прежнему запускает повторный рендеринг.

использоватьPureComponentможет помочь вам избежать этой траты повторного рендеринга. Например, реквизит — это строковое или логическое значение, которое изменяется,PureComponentраспознает изменение, но если prop является объектом, после изменения его свойствPureComponentПовторный рендеринг не запускается.

Итак, как вы знаете, реагируют, когда он будет вызвать ненужным повторным рендерингом его? Вы можете посмотреть на это называетсяWhy Did You UpdateРеакт-пакет. Этот пакет уведомит вас в консоли, когда произойдет ненужный повторный рендеринг.

Как только вы определили ненужный повторный рендеринг, вы можете использоватьPureComponentзаменятьComponentизбегать.

Использование инструментов разработчика React

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

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

Инструменты разработчика React доступны для всех основных браузеров, таких как:Chromeа такжеFirefox.

С React DevTools вы можете увидеть всю структуру приложения, а также свойства и состояние, используемые в приложении.

Инструменты разработчика React — это отличный способ изучить компоненты React и помочь диагностировать проблемы в вашем приложении.

Используйте встроенные условные операторы

Это представление может вызвать некоторые споры, но я обнаружил, что встроенный оператор условия может явно упростить мой код React.

следующим образом:

<div className="one-col">
  {isRole('affiliate', user._id) &&
    <MyAffiliateInfo userId={user._id} />
  }
</div>

В приведенном выше коде есть метод, чтобы проверить, является ли человек «аффилированным лицом», за которым следует метод, называемый<MyAffiliateInfo/>с компонент.

Преимущества этого:

Не нужно писать отдельную функцию
Вам не нужно использовать оператор «if» в методе рендеринга.
Не нужно создавать «ссылки» где-либо еще в компоненте.

Использование встроенных условных операторов очень лаконично. Сначала вы можете записать условие как истинное, затем<MyAffiliateInfo />Компоненты отображаются несмотря ни на что.

Затем мы используем&&присоединиться к условию и<MyAffiliateInfo />. Таким образом, компонент будет отображаться, когда условие истинно.

По возможности используйте библиотеки фрагментов кода

Откройте редактор кода (я использую VS Code) и создайте новый файл js.

введите в этот файлrc, вы увидите следующее приглашение:

Нажмите Enter, и вы сразу же получите следующий фрагмент кода:

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

Вы можете установить множество различных библиотек фрагментов кода в редакторе кода. я использую дляVS CodeназываетсяES7 React/Redux/React-Native/JS Snippets.

React Internals — Узнайте, как работает React внутри компании

React Internals — это серия из пяти частей, которая помогла мне понять основы React и, в конечном счете, помогла мне стать лучшим разработчиком React!

Если вы что-то не до конца понимаете или знаете, как работает React, то React Internals может помочь вам понятькогда и какДелайте правильные вещи в React.

Это особенно полезно для тех, кто не знает, где выполнять код.

Понимание внутренней работы React поможет вам стать лучшим разработчиком React.

Используйте в своих компонентахBitа такжеStoryBook

Bit— это инструмент, который превращает ваши компоненты пользовательского интерфейса в стандартные блоки, которые можно совместно использовать, разрабатывать и синхронизировать между приложениями.

Вы также можете воспользоваться преимуществами компонента команды управления Bit черезОбласть онлайн-компонента, что упрощает их получение и использование, а также их индивидуальное тестирование.

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

Storybook— это среда быстрой разработки компонентов пользовательского интерфейса, которая помогает вам просматривать библиотеку компонентов, просматривать различные состояния каждого компонента, интерактивно разрабатывать и тестировать компоненты.

Storybook предоставляет вам среду для быстрой разработки компонентов React.Благодаря этому, когда вы манипулируете свойствами компонентов, веб-страница будет быстро обновляться, позволяя вам видеть эффекты компонентов в реальном времени.

Быстрый обзор

Используйте инструменты проверки кода, используйте ES Lint, руководство по стилю JavaScript от Airbnb и плагин ESLint React.
Используйте propTypes и defaultProps.
Знайте, когда создавать новые компоненты.
Знайте, когда использовать Component, PureComponent и Stateless Functional Component.
Используйте инструменты разработчика React.
Используйте встроенные условные операторы.
Экономьте время на шаблонном коде с помощью библиотеки фрагментов кода.
Узнайте, как React работает с React Internals.
Используйте такие инструменты, как Bit, StoryBook, чтобы оптимизировать процесс разработки.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.