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

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

Свойства жизненно важны для передачи атрибутов компонентам React. Чаще всего ожидается, что эти атрибуты будут определенного типа для правильного использования в компоненте. Если свойство передается компоненту, отличному от его первоначальной цели, компонент может вести себя не так, как ожидалось, или неэффективно. Таким образом, проверки свойств - отличный способ улучшить компоненты React.

Что такое React PropTypes?

PropTypes - это функция для проверки свойств во время разработки.

Согласно официальной документации Reactjs:

PropTypes экспортирует ряд валидаторов, которые можно использовать для проверки достоверности получаемых вами данных. Если для свойства указано недопустимое значение, в консоли JavaScript будет показано предупреждение. Из соображений производительности propTypes проверяется только в режиме разработки.

Вы можете объявить опору определенным типом Javascript, таким как массивы, логические значения, числа, строки, даже узлы или экземпляры класса. Это, в свою очередь, создает проверку валидации для свойств, которые передаются в компоненты. Но почему?

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

Зачем использовать React PropTypes?

А теперь представьте, что вы создаете библиотеку, которую хотите распространить среди других людей, или работаете в большой команде, где у каждого есть разные компоненты или контейнеры, за которые они несут ответственность. Тогда у вас могут быть сценарии, когда люди начинают неправильно использовать ваш компонент, потому что они не знают тип данных передаваемой опоры. Например, ваш товарищ по команде Боб хотел бы повторно использовать компонент сообщения, который вы с радостью создали и над которым так усердно работали (в конце концов, что было бы с React, если бы мы не могли повторно использовать компоненты?). Но Боб не может отобразить сообщение, потому что он не знает, что он передает строку в качестве реквизита, даже если свойство, которое принимает компонент, является массивом. Если бы проверка пропсов существовала, Боб получил бы красивое большое красное предупреждение в своей консоли о том, что он передает неверные реквизиты.

Хотя это надуманный пример, вы можете видеть, что propTypes пригодятся, когда ваше приложение растет, становится более сложным и вовлекает других разработчиков. Теперь, если вы работаете над своим собственным приложением и работаете в одиночку, propTypes может оказаться не очень полезным, потому что вы, очевидно, знаете, какие свойства используют ваши компоненты. Однако проверка опоры может помочь при повторном посещении проекта, над которым вы не работали какое-то время (как и оставлять хорошие комментарии!), Но это совсем другая история.

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

Давайте посмотрим на наш компонент Приложение.

import React, { Component } from "react";
import PersonGreeter from "./PersonGreeter";
class App extends Component {
  state = {
    persons: [
      { id: 1, name: "Steven", age: 27 },
      { id: 2, name: "John", age: 2 },
      { id: 3, name: "Smith", age: 8 }
    ],
    clicked: false
  };
clickHandler = () => {
    this.setState({ clicked: !this.state.clicked });
  };
mapThroughPersonsArray = () => {
    return this.state.persons.map((person, index) => (
      <PersonGreeter
        key={person.id}
        person={person}
        name={person.name}
        age={person.age}
        clicked={() => this.removePersonHandler(index)}
      />
    ));
  };
removePersonHandler = personIndex => {
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1);
    this.setState({ persons: persons });
  };
render() {
    return (
      <div className="app_heading">
        <h1>Welcome to Person Greeter!</h1>
        <button className="showButton" onClick={this.clickHandler}>
          Show Persons
        </button>
        {this.state.clicked && this.mapThroughPersonsArray()}
      </div>
    );
  }
}
export default App;

Здесь у нас есть компонент class, который содержит состояние с двумя ключами: массив объектов с именем свойства person и clicked с логическим значением, установленным в настоящее время как false. . Существует функция clickHandler, которая обрабатывает обновление состояния нажатия, а также функция mapThroughPersonsArray, которая выполняет итерацию по массиву объектов и отображает компонент PersonGreeter. для каждого объекта person в массиве (полюбите динамические компоненты). Наряду с передачей информации о человеке в дочерний компонент мы также передаем ссылку на функцию removePersonHandler.

Теперь давайте посмотрим на компонент PersonGreeter.

Здесь PersonGreeter получает реквизиты, и мы получаем доступ к этим реквизитам для отображения информации в тегах h2 на нашей странице, а также к кнопке, которая обрабатывает событие клика.

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

Настройка PropTypes и способы использования

Примечание. React.PropTypes был перемещен в другой пакет, начиная с React v15.5. Команда React извлекла React.PropTypes и React.createClass в свои собственные пакеты, чтобы отразить тот факт, что не все их используют, что сделало create-react-app намного легче, чем предыдущие версии.

В 15.5 и последующих версиях вместо доступа к PropTypes из основного объекта React мы установим prop-types пакет и импортируем их оттуда.

Сначала мы устанавливаем пакет, предоставленный командой REACT, вот так:

npm intall --save prop-types

Как я уже упоминал выше, он не встроен в ядро ​​React, но является частью React (для тех, кто обеспокоен исходным кодом пакета).

Теперь, когда это будет успешно завершено, давайте перейдем к компоненту, в котором мы хотим установить наши проверки, в данном случае это PersonGreeter. Вы просто импортируете PropTypes (рекомендуется использовать заглавные буквы, но это не обязательно)

import PropTypes from 'prop-types'

Это работает как в функциональных, так и в классовых компонентах. Итак, после определения нашего компонента мы получим доступ к нашему компоненту PersonGreeter и добавим новое свойство с именем propTypes со строчной буквой p *.

PersonGreeter.propTypes = {};

Импорт propTypes предоставляет нам несколько типов данных, которые мы можем использовать внутри этого объекта. Мы определяем, какие реквизиты использует этот компонент и какой тип данных должен быть у него, устанавливая пары ключ-значение, где ключи - это имена ваших реквизитов, и определяя, какой тип значения должен быть.

Наш компонент PersonGreeter получает name, age и clicked в качестве свойств, а ожидаемые значения этих свойств являются строками, номер и функции в указанном порядке. Итак, давайте посмотрим, как это выглядит в нашем компоненте.

Здесь func обозначает функцию, которая указывает React, что для события щелчка я ожидаю получить указатель на функцию и ничего больше. Не строка, не число, а функция. Для имени мы добавляем строковый тип опоры, а для возраста мы добавляем тип опоры числа, поскольку мы ожидаем, что опора будет числом. Довольно просто, правда?

Теперь, когда мы создали этот объект javascript со специальным свойством propTypes, React будет следить за этим в режиме разработки и выдавать предупреждение, если вы передадите неверные реквизиты.

Давайте сломаем наше приложение, чтобы мы могли наблюдать за ним в действии. В состоянии нашего компонента App заключим age объекта Steven в кавычки, фактически переключив тип данных age с числа на строка. Теперь на нашей веб-странице мы не увидим никаких изменений, но давайте откроем консоль разработчика, чтобы наблюдать за нашей работой по проверке.

При нажатии на Показать лиц мы получаем предупреждение в нашей консоли о том, что ожидаемый тип свойства age является числом, но является строкой. Теперь, если кто-то неправильно использует ваш компонент во время разработки, он получит предупреждение в консоли и сможет исправить свою ошибку.

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

И это проверка типов с помощью React PropTypes!

Больше о PropTypes

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

* Замечание об использовании propTypes в функциональных или классовых компонентах. Экземпляр объекта PropTypes пишется в нижнем регистре, а класс / тип - в верхнем регистре. Экземпляр List.propTypes. Класс / Тип - PropTypes.

//Class component
List.PropTypes = {
  todos: PropTypes.array.isRequired,
};
//Instance of propType (In a functional component)
List.propTypes = {
  todos: PropTypes.array.isRequired,
};

Спасибо за прочтение! Меня зовут Стивен, я веб-разработчик и люблю учиться и помогать людям приобретать новые навыки. Подписывайтесь на меня в Twitter и Instagram, если хотите оставаться на связи.