Написание чистых и кратких компонентов реагирования, в полном использовании функций ES6 / 7 и узор компонентов контейнера

Автор оригинала: Joshua Jahans.

История до сих пор

Если, как и я, вы когда-либо создали веб-сайт, используя «стандартные» инструменты простых старых HTML или шаблонов, предварительно обработанных CSS и JavaScript, тогда вы также можете поделиться тем же радостью, которое я сделал, когда реагировал и предложил путь. Чтобы легко сломать веб-сайт или приложение в управляемые, многоразовые куски.

Это также пришло в то время, когда JavaScript был чрезвычайно созревает, идут от того, что некоторые считали «языком игрушка» на Один из самых популярных языков там Cегодня. После Обещания Пришел на сцену, мы могли бы забыть о писать боковых пирамидах и оказаться в обратном вызове ад. Тогда пришел Async/await И теперь большинство из нас пытаются избежать тех «грязных и запутанных» цепей обещания, где это возможно. Мы избалованы буквально, для выбора.

Затем наступил поток, после этого redux. ГОСУДАРСТВЕННОЕ УПРАВЛЕНИЕ ПРОСТО ПОЛУЧИЛ БОЛЬШОГО ЛОТА, И Хотя вы, возможно, не всегда нуждаетесь в этом , Redux часто является инструментом управления GO-государственным управлением для многих разработчиков. Эта небольшая дополнительная начальная установка часто проходит долгий путь и спасает нас в основных головных болях вниз по линии.

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

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

Узор контейнеров

Умеренно простой шаблон, который позволяет в полной мере использовать компоновкость RACT, которые можно просто объяснить, когда ваш контейнер обрабатывает функциональные возможности и отображает ваш компонент, в то время как ваш компонент занимается отображением данных, которые выбраны вашим контейнером.

Вот контейнер:

import MyComponent from '../MyComponent'

export default class MyContainer extends Component {
  constructor (props) {
    super(props)

    this.state = {
      // ...
    }
  }

  someFunction () {
    // ...
  }
  
  render () {
    return (
      
    )
  }
}

Теперь я знаю, что вы думаете, это просто реактивный компонент? Ну, ты прав. Хотя здесь ключ, состоит в том, что ваша контейнерная компонент полностью отделен от вашей нестандартной компоненты и касается только данных, проходящих то, что что-то отношение к вашему компоненту.

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

import Button from '../Button'
import style from './style'

const MyComponent = ({ headerText, buttons }) => (
  
    
      
        {headerText}
      
    
    
      {buttons.map(button => (
        
      )}
    
  
)

ОФТ-пропущенная выгода – это двойной проптип, проверяет, что этот шаблон существенно усиливает. Когда в вашем контейнере передаются сырые опоры, те, которые вы управляете, будут помечены вашим Linter, и, если вам не наслаждаются скважинскими красными линиями, вы добавляете их в свои проверки Proptype. Для остальных реквизитов, которые вы знаете, существуют, но ваш контейнер не имеет обработчиков бизнеса, вы должны распространять их в свой компонент. Вы можете увидеть это в приведенном выше фрагменте кода, где объект кнопки распространяется в компонент кнопки.

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

Для более глубокого объяснения шаблона Проверьте эту статью Отказ

Полезные функции ES6/7

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

Свойства класса

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

Чтобы показать вам, насколько полезной это одна простая функция может быть, вот компонент, который не использует свойства класса:

export default class MyContainer extends Component {
  contructor (props) {
    super(props)
    
    this.classPropertyA = 'something'
    this.classPropertyB = 123
    
    this.state = {
      stateItemA: undefined,
      stateItemB: 'default string'
    }
    
    this.someMethod = this.someMethod.bind(this)
    this.anotherMethod = this.anotherMethod.bind(this)
  }
  
  someMethod () {
    // ...
  }
  
  anotherMethod () {
    // ...
  }
  
  render () {
    return (
      
    )
  }
}

Yikes

export default class MyContainer extends Component {
  classPropertyA = 'something'
  classPropertyB = 123

  state = {
    stateItemA: undefined,
    stateItemB: 'default string'
  }
  
  someMethod = () => {
    // ...
  }
  
  anotherMethod = () => {
    // ...
  }
  
  render () {
    return (
      
    )
  }

И вот точно такой же компонент, но с свойствами класса:

Объединяя эту функцию с другими, более известными новыми функциями ES, такие как функции стрелки, которые не открывают новый контекст, нам удалось сократить треть строк из нашего файла контейнера. Мы больше не нуждаются в конструкторе, и нам не нужно связывать контекст наших классов методов в контексте класса.

Я также буду использовать это пространство, чтобы объяснить домашнюю мозолистику: люди, называющие супер на реквизитах без необходимости. Вам не нужно звонить «супер (реквизит)», Если вам не нужно использовать «Это .proops» внутри конструктора Отказ Компонент React Actore всегда свяжет «реквизит» к «это», он просто происходит после конструктора в жизненном цикле компонента.

Статические методы и свойства

Следуя на красиво от свойств классов являются статическими методами и свойствами. Используя статические методы, вы можете использовать части класса без необходимости создавать совершенно новый экземпляр указанного класса. Они называются ссылаться на класс Un-Instance, за которым следует имя свойства, если вы используете Static на методе, однако, этот, конечно, исключит вас от доступа к «этому» внутри этого метода, поскольку класс не был создан.

Как это выгодно реагирует на компоненты? Что ж, помимо четко указывает на кого-нибудь, чтение вашего кода, что «это» не будет использоваться, вы также можете использовать его, чтобы принести пропиты и по умолчаниюProops внутри корпуса класса. Это чисто личное предпочтение, но, на мой взгляд, он выглядит немного приятнее, чем затягивая проверки проптипа после определения вашего класса. Вот пример:

export default class MyContainer extends Component {
  static propTypes = {
    someProp: PropTypes.string.isRequired,
    anotherProp: PropTypes.number
  }
  
  static defaultProps = {
    anotherProp: 123
  }

  ...

Декораторы

Декораторы находятся на других языках на некоторое время. Концепция в JavaScript проста; Декораторы обеспечивают синтаксически сексуальную способ упаковки ваших классов и функций и добавление дополнительных функций.

Наиболее распространенным использованием в случае декораторов с реагированием является использование функции Connect Read redux в качестве декоратора. Концепция проста, поэтому вот пару примеров, чтобы проиллюстрировать, насколько более элегантны они могут сделать ваш код.

Без декораторов:

const mapStateToProps = state => {
  const { someStore: { someProperty } } = state
  const somePropertyPlusOne = someProperty + 1
  return {
    somePropertyPlusOne
  }
}

class MyContainer extends Component {
  // ...
}

export default connect(mapStateToProps)(MyContainer)

С декораторами:

@connect(state => {
  const { someStore: { someProperty } } = state
  const somePropertyPlusOne = someProperty + 1
  return {
    somePropertyPlusOne
  }
})
export default class MyContainer extends Component {
  // ...

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

Без декораторов:

const mapStateToProps = state => {
  const { someStore: { someProperty } } = state
  return {
    someProperty
  }
}

class MyContainer extends Component {
  // ...
}

export default reduxForm({
  form: 'someForm'
})(connect(mapStateToProps)(MyContainer))

YO DAWG … Я слышал, вы любите обернуть функции

С декораторами:

@reduxForm({ form: 'someForm' })
@connect(state => {
  const { someStore: { someProperty } } = state
  return {
    someProperty
  }
})
export default class MyContainer extends Component {
  // ...
}

Это больше походит на это

Объект распространения + выбросы

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

Так что такое распространение объекта? Ну, чтобы просто поставить его, он присваивает все свойства объекта на другой объект, один за другим, на верхнем уровне. Думать объект.assign. Синтаксис сейчас стал довольно повсеместно, поэтому всякий раз, когда вы видите «…» префикс переменной внутри объекта или массива, вы смотрите на оператор по распространению. Существует разброс массива, разброс объекта, распределительный разброс объекта и параметры отдыха, которые все используют один и тот же «…» синтаксис. Параметры разброса отдыха объекта и параметры отдыха немного отличаются, поэтому я не буду идти в те здесь.

Так что же создает реквизит? Ну, это отличный маленький трюк для прохождения реквизит к компоненту из контейнера. Это ничего не наглядно, но он предлагает способ четко видеть, как вы проходите и делаете небольшие манипуляции на них, прежде чем делать это. Идея проста, имейте функцию, которая возвращает все ваши реквизиты, затем распространяйте эти опоры в свой компонент, чтобы избежать большого грязного комка JSX внутри вашего метода Render. К сожалению, использование генерации реквизитов не будет работать, если вы не используете шаблон контейнеров-компонентов, как вы увидите в приведенных ниже примерах.

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

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

Еще раз, давайте посмотрим на пример, и пример без.

Без генерации реквизитов:

class MyContainer extends Component {
  state = {
    itemA: 'something',
    itemB: 'another thing'
  }

  _onPress = () => {
    // ...
  }
  
  _onPinch = () => {
    // ...
  }
  
  render () {
    return (
      
    )
  }
}

И использование генерации реквизитов:

class MyContainer extends Component {
  state = {
    itemA: 'something',
    itemB: 'another thing'
  }

  _onPress = () => {
    // ...
  }
  
  _onPinch = () => {
    // ...
  }
  
  _generateProps = () => ({
    ...this.props,
    ...this.state,
    onPress: this._onPress,
    onPinch: this._onPinch
  })
  
  render () {
    const props = this._generateProps()
    return (
      
    )
  }
}

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

В итоге

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