Компоненты классов по сравнению с функциональными компонентами без состояния

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

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

Что такое «класс компонент»?

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

Эти вещи могут быть полезны, когда мы храним или маниплируем данные в нашем компоненте. Случаи, подобные этим, будут нашими основными вариантами использования компонентов класса. Я предоставил пример компонента класса, который будет отображать «Hello World» ниже, используя состояние:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      greeting: "Hello World"
    }
  }
  render() {
    return (
      

        
{ this.state.greeting }
      
    )
  }
}

Что такое «функциональный компонент без состояния»?

Я знаю я знаю. «Функциональный компонент без состояния» звучит как нечто большое и страшное, но я обещаю: это не так. Функциональный компонент без состояния – это просто функция, которая возвращает JSX. Это очень просто, но невероятно полезно.

Есть два способа создания функционального компонента без состояния. Оба похожи и делают одно и то же, это просто вопрос краткости. Я буду использовать ES6 Функции стрелы создать компоненты. Если вы их не использовали, я настоятельно рекомендую вам проверить ES6.

Первый путь: поместите это в переменную

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

const HelloWorld = (props) => (
  

    
{ props.greeting }
  
);
export default HelloWorld;

===

Второй путь: экспортировать функцию

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

export default (props) => (
  

    
{ props.greeting }
  
);

===

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

Краткое примечание: с функциями стрелки ES6 мы можем использовать кудрявые скобки и положить возврат внутри них. Чтобы сохранить вещи кратко, мы также можем написать функцию на одной строке. Если после стрелки не размещены вьющиеся скобки, функция автоматически вернет все, что находится за стрелкой. Если JSX, который мы возвращаем, занимает более одной строки, мы можем обернуть наш код в скобках, как приведенный выше код.

Какой из них мне использовать?

Как правило, я вижу, что «наилучшая практика» заключается в использовании функциональных компонентов без состояния, когда это возможно, чтобы уменьшить раздутие кода. На Syntax.fm Они обсуждали просто использование классовых компонентов все время, потому что они обнаруживают, что меняют много своих компонентов с функциональных на класс и не хотят продолжать конвертировать. Если вы не создаете приложение, которое будет огромным, я не вижу, чтобы это действительно вызывает какие -либо проблемы с точки зрения производительности, так что это полностью зависит от вас.

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

Оригинал: “https://dev.to/iam_timsmith/class-components-vs-stateless-functional-components-51he”