Развивающиеся узоры в реакции

Автор оригинала: Alex Moldovan.

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

Я начал работать с Реагировать примерно около 3 лет назад. В то время не было установленных практик, из которых нужно учиться, чтобы использовать его возможности.

Для общества потребовалось около 2 лет, чтобы поселиться около нескольких идей. Мы перешли из Rect.CreateClass к ES6 Класс и чистые функциональные компоненты. Мы бросили смешины и Мы упростим наши API Отказ

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

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

Итак, давайте начнем!

Условный рендер

Я видел следующий сценарий во многих проектах.

Когда люди думают о Реагировать и Jsx они все еще думают с точки зрения HTML и JavaScript Отказ

Так что натуральный шаг – отдельный Условная логика из фактического обратного кода.

const condition = true;

const App = () => {
  const innerContent = condition ? (
    
      Show me
      Description
    
  ) : null;
  
  return (
    
      This is always visible
      { innerContent }
    
  );
};

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

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

const condition = true;

const App = () => (
  
    This is always visible
    {
      condition && (
        
          Show me
          Description
        
      )
    }
  
);

Если Состояние ложно, второй операнд && Оператор не оценен. Если это правда, второй операнд – Или JSX мы хотим рендерировать – возвращается.

Это позволяет нам смешать Пользовательская логика с фактическими элементами пользовательского интерфейса в декларативный способ!

Лечите JSX, как это неотъемлемая часть вашего кода! В конце концов, это просто JavaScript Отказ

Проходя вниз

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

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

Хороший способ обрушения этого – использовать реквизит разрушимости вместе с JSX Spreed Как вы можете видеть здесь:

const Details = ( { name, language } ) => (
  
    { name } works with { language }
  
);

const Layout = ( { title, ...props } ) => (
  
    { title }
    
  
);

const App = () => (
  
);

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

Разрушение реквизита

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

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

const Details = ( { name, language } ) => (
  
    { name } works with { language }
  
);

class Details extends React.Component {
  render() {
    const { name, language } = this.props;
    return (
      
        { name } works with { language }
      
    )
  }
}

Обратите внимание, что линии 2-4 и 11-13 являются идентичный. Преобразование компонентов гораздо проще с использованием этой картины. Кроме того, вы ограничиваете использование это внутри компонента.

Уровень провайдера

Мы смотрели на пример, где реквизит должен быть отправлен через другой компонент. Но что, если вам нужно отправить его 15 компонентов?

Введите Реагистрировать контекст !

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

Это было недавно объявил что контекст получает новый API, который реализует Шаблон провайдера из коробки.

Если вы используете такие вещи, как React Redux или Аполлон , вы можете быть знакомы с рисунком.

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

Компонент верхнего уровня – называется Провайдер – Устанавливает некоторые значения в контексте. Дочерние компоненты – называются Потребители – прихватит эти ценности из контекста.

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

Компоненты высокого порядка

Давайте поговорим о воспроизведении. Вместе с брошением старого Rect.Createelement () Фабрика, команда RACT также снизила поддержку на Мистины Отказ В какой-то момент они были стандартным способом составления компонентов посредством простого объекта.

Компоненты высокого порядка – HOCS Отныне – вышел, чтобы заполнить потребность в повторном использовании поведения по нескольким компонентам.

HOC – это функция, которая принимает входной компонент и возвращает Улучшено/Изменен Версия этого компонента. Вы найдете HOCS под разными именами, но мне нравится думать о них как Декораторы Отказ

Если вы используете Redux, вы узнаете, что соединить Функция – это HOC – принимает вашу компонент и добавляет кучу реквизит к этому.

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

const withProps = ( newProps ) => ( WrappedComponent ) => {
  const ModifiedComponent = ( ownProps ) => ( // the modified version of the component
     // original props + new props
  );

  return ModifiedComponent;
};

const Details = ( { name, title, language } ) => (
  
    { title }
    { name } works with { language }
  
);

const newProps = { name: "Alex" }; // this is added by the hoc
const ModifiedDetails = withProps( newProps )( Details ); // hoc is curried for readability

const App = () => (
  
);

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

Давайте посмотрим на очень полезный пример функциональность повторного использования Отказ

function withAuthentication(WrappedComponent) {
  const ModifiedComponent = (props) => {
    if (!props.isAuthenticated) {
      return ;
    }

    return ();
  };

  const mapStateToProps = (state) => ({
    isAuthenticated: state.session.isAuthenticated
  });

  return connect(mapStateToProps)(ModifiedComponent);
}

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

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

Тем не менее, есть недостаток в HOCS. Каждый HOC введет дополнительный реагировать компонент в вашей структуре DOM/VDOM. Это может привести к потенциальным проблемам производительности в качестве масштабов ваших приложений.

Некоторые дополнительные проблемы с HOCS суммируются в Эта отличная статья По Майкл Джексон Отказ Он выступает за заменой HOCS с рисунком, мы будем говорить о следующем.

Рендеринг

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

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

Некоторые люди предпочитают использовать Динамический опора Для этого некоторые просто используют Это.props.children Отказ

Я знаю, что это все еще очень запутанно, но давайте посмотрим на простой пример.

class ScrollPosition extends React.Component {
  constructor( ) {
    super( );
    this.state = { position: 0 };
    this.updatePosition = this.updatePosition.bind(this);
  }
  
  componentDidMount( ) {
    window.addEventListener( "scroll", this.updatePosition );
  }

  updatePosition( ) {
    this.setState( { position: window.pageYOffset } )
  }

  render( ) {
    return this.props.children( this.state.position )
  }
}

const App = () => (
  
    
      { ( position ) => (
        
          Hello World
          You are at { position }
        
      ) }
    
  
);

Здесь мы используем дети как рендеринг опоры. Внутри В> Компонент мы отправим функцию, которая получила погибал Sition в качестве параметра.

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

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

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

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

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

Какие шаблоны вы используете? Какой из них вписывается в эту статью? Оставьте мне сообщение ниже или напишите свои мысли на Twitter Отказ

Если вы нашли эту статью полезную, помогите мне поделиться с этим сообществом!

Условный рендер

Show me

This is always visible