Тупой компонент, интеллектуальный компонент, чистый компонент, компонент более высокого порядка, контролируемый и неконтролируемый компонент

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

«Компоненты позволяют разделить пользовательский интерфейс на независимые, многоразовые части и рассматривать каждую часть отдельно».

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

Теперь давайте изучим различные типы компонентов, которые есть в React:

Тупой / без сохранения состояния / презентационный компонент

🦄 Глупые компоненты сосредотачиваются на том, как все выглядит.

• Глупые компоненты также называются «презентационными», потому что их единственная обязанность - представить что-то в DOM . Как только это будет сделано, компонент будет готов.
• Внутри этого компонента не будет никакой логики, поэтому он называется тупым компонентом. Поскольку немые компоненты сосредоточены только на презентации (компоненте пользовательского интерфейса), в идеале это наиболее многоразовый компонент.
• Этот компонент часто является просто функциями Javascript и имеет только метод render (). У него также нет никаких перехватчиков состояния или жизненного цикла. Тем не менее, он по-прежнему может получать некоторые данные и работать от родителей через реквизиты.

1. Сосредоточьтесь на пользовательском интерфейсе: почти все основные компоненты пользовательского интерфейса следует рассматривать как глупые компоненты. Примеры включают загрузчики, модальные окна, кнопки, вводы и т. Д.
2. Принять реквизиты: немые компоненты принимают реквизиты, чтобы сделать их динамическими и многоразовыми. Например, вы можете отправить заголовок кнопки в props из родительского компонента, чтобы дать ей уникальное имя.
3. Не требовать зависимостей приложения: кроме пакетов пользовательского интерфейса, например Reactstrap, немые компоненты не требуют зависимостей.
4. Редко включать состояние: единственный случай, когда у немого компонента есть состояние, - это управление самим пользовательским интерфейсом, а не данными приложения. Некоторыми примерами того, где у немого компонента может быть состояние, могут быть группы кнопок, вкладки, переключатели и другие элементы пользовательского интерфейса, которые не влияют на данные, а только на пользовательский интерфейс.

const DumbComponent = (props) => {  
  return (    
    <div>      
      <ul>       
       <li> Information - {props.title} </li>      
      </ul>   
    </div>  
 )
};



🤓 Умные компоненты сосредоточены на том, как все работает.

• С другой стороны, интеллектуальные компоненты (или компоненты контейнера) несут другую ответственность. Поскольку они обязаны быть умными, именно они следят за состоянием и заботятся о том, как работает приложение. Используя шаблон проектирования контейнера, компоненты контейнера отделяются от презентационных компонентов, и каждый обрабатывает свою собственную сторону вещей. Компоненты контейнера берут на себя тяжелую работу и передают данные презентационным компонентам в качестве опоры.
• Шаблон компонента контейнера представляет собой компоненты на основе классов и имеет функции constructor (). Обычно мы инициализируем состояние внутри конструктора, хотя вы можете удалить конструктор и при этом сохранить состояние.
1. Управляет данными: интеллектуальные компоненты могут извлекать, фиксировать изменения и передавать данные приложения.
2. Вызов Redux, методы жизненного цикла, API, библиотеки и т. Д.: Эти компоненты не зря называются умными! Они отвечают за вызов библиотек и функциональность.
3. Управление состоянием: интеллектуальные компоненты несут ответственность за управление состоянием и знание того, когда следует повторно визуализировать компонент.
4. Редко включает стили: поскольку тупые компоненты фокусируются на стилях, это позволяет интеллектуальному компоненту сосредоточиться на функциональности, не перегружая стили.

class SmartComponent extends Component {  
  constructor(props) {      
     super(props);      
     this.state = {        
       firstTimeLoading: true      
     }  
  } 
 
  render() {   
    return (      
          {this.state.firstTimeLoading 
             && <Header title={this.props.title}/>}         
          {this.state.firstTimeLoading 
             || <Header title="Welcome Again"/>}         
    );  
  }
}

5. Pure Component - один из наиболее важных способов оптимизации приложений React.
6. Использование Pure Component дает значительное увеличение производительности, поскольку сокращает количество операций рендеринга в приложении.

class Welcome extends React.PureComponent {
  render() {
   return <h1>Welcome</h1>
  }
}

7. Это связано с тем, что PureComponent изменяет метод жизненного цикла shouldComponentUpdate и добавляет некоторую логику для автоматической проверки необходимости повторного рендеринга для компонента. Это позволяет PureComponent вызывать метод рендеринга только в том случае, если он обнаруживает изменения в состоянии или свойствах.
• Компонент более высокого порядка в React - это шаблон, используемый для разделения общих функций между компонентами без повторения кода. Компонент более высокого порядка на самом деле не является компонентом, это функция . Функция HOC принимает компонент в качестве аргумента и возвращает компонент. Он преобразует компонент в другой компонент и добавляет дополнительные данные или функции. Суммируя:

const NewComponent = (BaseComponent) => {
  // ... create new component from old one and update
  return UpdatedComponent
}

• Компонент более высокого порядка - это функция, которая принимает компонент в качестве аргумента и возвращает компонент. Это означает, что HOC всегда будет иметь форму, подобную следующей:
• Это higherOrderComponentфункция, которая принимает WrappedComponentв качестве аргумента вызываемый компонент . Мы создаем новый компонент с именем, HOCкоторый возвращает <WrappedComponent/>из своей renderфункции. Хотя на самом деле это не добавляет функциональности в тривиальный пример, он отображает общий шаблон, которому будет следовать каждая функция HOC. Мы можем вызвать HOC следующим образом:

const SimpleHOC = higherOrderComponent(MyComponent);

import React from 'react';
var newData = {
   data: 'Data from HOC...',
}
var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}
export default MyHOC(MyComponent);


• HOC должен быть чистой функцией без побочных эффектов. Он не должен вносить никаких изменений, а просто скомпоновать исходный компонент, заключив его в другой компонент.
• Не используйте HOC в методе рендеринга компонента. Доступ к HOC вне определения компонента.
• Статические методы необходимо скопировать, чтобы по-прежнему иметь к ним доступ. Самый простой способ сделать это - hoist-non-react-staticsпакет.
• Рефлсы не проходят.
• Управляемый компонент привязан к значению, и его изменения будут обрабатываться в коде с помощью обратных вызовов на основе событий . Здесь элемент формы ввода обрабатывается самой реакцией, а не DOM. В этом случае изменяемое состояние сохраняется в свойстве state и будет обновляться только с помощью метода setState (). Состояние внутри компонента служит «единственным источником истины» для элементов ввода, которые визуализируются компонентом.
• Управляемые компоненты имеют функции, которые управляют передачей данных в них при каждом событии onChange . Затем эти данные сохраняются в состоянии и обновляются с помощью метода setState (). Это позволяет компоненту лучше контролировать элементы формы и данные.

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

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

Неконтролируемый компонент

• Это похоже на традиционные поля ввода HTML-форм. Здесь данные формы обрабатываются самой DOM . Он сохраняет свое собственное состояние и будет обновляться при изменении входного значения.
• Чтобы написать неконтролируемый компонент, нет необходимости писать обработчик событий для каждого обновления состояния, и вы можете использовать ссылку для доступа к значению формы из DOM.

Вышеупомянутый компонент делает то же самое, что и предыдущий пример, он обновляет содержимое pэлемента, пока вы, пользователь, вводите текст в inputполе. Ничего особенного, но вы можете видеть, как для достижения того же результата нам пришлось написать код, который напрямую обращается к API DOM (т.е. нам пришлось напрямую установить innerHTMLсвойство целевого элемента). Это может стать намного сложнее, если то, что вы пытаетесь сделать, требует большей логики, но вы поняли суть.

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

Таблица различий между контролируемым и неконтролируемым компонентом



Когда мне следует использовать управляемый компонент, а когда - неуправляемый?

По сути, это зависит от вас и вашего варианта использования, например - вы можете использовать управляемый компонент при создании:

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

Вот и все!
Надеюсь, вы узнали что-то новое сегодня. Спасибо за прочтение! :)