В реакции у нас есть два типа компонентов: 1. Функциональные компоненты 2. Компоненты класса Мы узнаем о обоих типах, а также обсуждаем различия между двумя, но прежде чем мы сделаем, нам нужно знать, что такое «компонент»? Компонент – это функция или класс, который производит JSX, чтобы показать пользователь и обратную связь с пользователем, используя обработчики событий. Теперь давайте погрузимся в:
Функциональные компоненты
Функциональные компоненты в основном являются функцией JavaScript, которая производит JSX, чтобы показать контент пользователю. Он не имеет доступа к методам жизненного цикла компонента или состояния. Его единственная работа – показать контент пользователям. Вот пример функционального компонента:
const App = () => {
return Hello World!
}
Если вы не знакомы с синтаксисом ES6, вот еще один пример регулярной функции:
function App() {
return Hello World!
}
Они оба возвращают Hello World! Я предпочитаю использовать функцию стрелки, как показано в первом примере, потому что она автоматически свяжет Это Отказ
Компоненты класса
Компонент класса – это класс JavaScript, который простирается от реагирования, который имеет метод рендеринга. Мы видим, что у нас не было метода рендеринга, определенного в функциональном компоненте. Это одно значение между обоими компонентами. Так же, как функциональный компонент, компонент класса также производит JSX, чтобы показать контент пользователю, но он также может использовать Государство Система для обновления контента на экране с использованием SetState и, кроме того, используйте методы жизненного цикла для запуска кода в определенные моменты во времени. Вот простой пример компонента класса:
class App extends React.Component {
render() {
return Hello World!
}
}
Существует еще одна разница между компонентами класса и функции, который является тем, как мы проходим реквизит Отказ В классовых компонентах мы проходим реквизиты, используя Это .proops Но в функциональных компонентах мы просто проходим реквизит Отказ Давайте посмотрим:
const App = (props) => {
return My name is {props.name}!
}
class App extends React.Component {
render() {
return My name is {this.props.name}!
}
}
Все, что мы обсуждали выше, было без системы крючков. С помощью системы React Cloks есть гораздо больше, мы можем сделать с функциональными компонентами, но мы не будем изучать систему крючков в этом сообщении в блоге. Тем не менее, я скажу это: в современном мире React World Cooks System предоставляет больше возможностей для функциональных компонентов, а также функционирует аналогично компонентам классов.
Оригинал: “https://dev.to/uma/class-and-functional-components-4ik8”