Прохождение функций как реквизит реагирования

Автор оригинала: Ryan Duffy.

У меня недавно была обсуждение с коллегой по поводу именования свойства функции, которое будет передано в компонент реагирования. Это заставило меня задуматься о роли функций как свойств. Я считаю, что они обычно попадают в один из двух лагерей. Функция либо:

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

Обратные вызовы событий

Давайте назовем первый «обратный вызов события». Это хорошо настроено с нативными событиями крючками, предоставляемыми реагированными. Вы, компонент автор, может предоставить функцию ( это. HandleClick ) через опору ( onclick ) вашего <кнопка> Компонент такой:

class MyComponent extends React.Component {
    handleClick = (ev) => {
        if (ev.keyCode === 13) {
            console.log('Enter!');
        }
    }
    
    render () {
        return (
            
            	Click it real good
            
        );
    }
}

Если <кнопка> был «постоянным» компонентом реагирования, вы можете ожидать, что он имеет проптип определено, что объявит, что OnClick Ожидайте функцию.

onClick: PropTypes.func

Что это значит, интуитивно, в том, что <кнопка> принимает функцию в OnClick опоры, который будет вызван при нажатии кнопки. Это не означает, что означает «означает», чтобы нажать кнопку. Это представляет форму? Выберите опцию? играть Ninja Cat Video ? Эта ответственность лежит в пределах Контейнер И является определяющим характеристикой обратного вызова события:

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

Внедрение зависимости

Иногда компонент либо требует функции, осуществляемой ее контейнером или обеспечивает его контейнер для переопределения поведения по умолчанию функции.

Пример этого приходит из популярных Реагистрационный маршрутизатор упаковка.

Navlink # Isactactive Принимает функцию в качестве опоры, которая используется компонентом для переопределения поведения по умолчанию маркировки ссылки активной, если она соответствует текущему пути URL.

Вот пример, поднятый непосредственно из документов пакета: X`

// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

Event 123

В этом примере контейнер не должен быть уведомлен о чем-либо; Вместо этого он впрыскивает новое, пользовательское поведение.

С впрыскам зависимости компонент отвечает за описание договора для функции (через интерфейс функции). Контейнер предоставит функцию.

Различия в реализации

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

Обратные вызовы событий должны быть:

• Необязательно: Есть исключения, но обычно должны быть на усмотрение потребителя, чтобы справиться с событием
• Названо последовательно: Префикс всех обратных вызовов событий с на , например onselectthingthingthing
• Одиночный аргумент: Передать аргумент объекта с соответствующими данными для мероприятия, например, onselectthingth ({index: 1})
• Однонаправленные: Пропускать данные только через обратный вызов, а не полагаться на возвращаемое значение из обратного вызова

Функции впрыска зависимости должны быть:

• Однонаправленные: Передайте только поведение в компонент и не ожидайте отзывы от функции (или его параметров!)
• Названо соответствующим образом: часто начинается с глагола, например isactactive или генерация

Заворачивать

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

Также опубликовано Середина