Существуют некоторые различия между компонентом метода и компонентом класса. Я постараюсь выделить некоторые из них, и когда использовать его.
Метод компонент
Самый простой способ объявить компонент в React. Нам нужно только объявить метод, который возвращает синтаксис JSX, и это сделано. Ниже приведен пример:
Мы также можем передать что -то в компонент, используя реквизит Анкет Это реквизит будет первый параметр на компоненте метода.
Класс компонент
Это надежная версия компонента. С компонентом класса вы можете сделать больше. Реквизит Уилл по умолчанию, включенный в класс (this.props). Вы можете использовать Государство , своего рода локальная переменная для вашего компонента. Вы можете вторгаться в метод многих классов, которые имеют одно и то же состояние. И не забудьте быть осторожным с привязкой объекта, я часто использую метод стрелки, чтобы избежать проблемы привязки объекта.
Компонент класса также позволяет использовать метод жизненного цикла. Это своего рода куча методов, которые будут называться в конкретном событии, например, к монтированию компонентов, обновленным, разоблачением и т. Д.
Вы можете увидеть диаграмму жизненного цикла здесь:
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Когда использовать компонент класса или компонент метода
Основная причина не использовать компонент класса заключается в том, что вам нужен только простой компонент или тупой компонент, такой как кнопка, карта или репрезентативный компонент. Если ваш компонент не нуждается в сложном состоянии, не используя жизненный цикл, компонент метода лучше всего подходит для вас. И наоборот.
Иногда я не уверен, будет ли мой компонент подходит для метода или компонента класса. В этом случае я предпочитаю использовать класс компонент с самого начала, поэтому мне не нужно ничего менять, если мне нужно больше надежных компонентов.
Бонус
Если вы используете код VS, вы можете установить плагин React:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Этот плагин много сэкономит время. Есть множество ярлыков, которые облегчают вашу жизнь, например RCC Чтобы создать компонент класса React, и RFC Чтобы создать компонент метода React.
оставайся голоден, оставайся в дураках
Оригинал: “https://dev.to/prabangkoro/react-method-component-vs-class-component-56fj”