Введение
Программист должен написать большое количество строк кода, чтобы построить приложение, будь то меньшее или большее. Каждое приложение основано на алгоритме, и этот алгоритм отлично работает при поддержке кода.
Как мы обсуждали выше, код является основой программирования, точно так же, как есть вещи, которые являются строительными блоками кода. Когда мы работаем в React, то единственное, что приходит нам в голову в первую очередь, — это компоненты React.
Компонент рассматривается как кирпич стены. Это значительно упрощает создание пользовательского интерфейса. Конечный пользовательский интерфейс зависит от того, какие компоненты используются, и все они объединяются в родительский компонент.
Он обеспечивает свою основную функцию через Компоненты, которые являются повторно используемыми и независимыми битами кода. Компоненты похожи на функции javascript, но работают изолированно и возвращают HTML.
Функциональные компоненты
Функциональные компоненты — это одни из наиболее распространенных компонентов, с которыми приходится сталкиваться при работе в React. Это просто функции JavaScript. Мы можем создать функциональный компонент для React, написав функцию JavaScript. Эти функции могут получать или не получать данные в качестве параметров.
// Написание компонента класса;
const Person = props =› (
‹див›
‹h1›Здравствуйте, {props.name}‹/h1›
‹/дел›
);
экспортировать человека по умолчанию;
Ключевые моменты
Функциональные компоненты — это базовые функции JavaScript. Обычно это функции со стрелками, но их также можно создать с помощью обычного ключевого слова function.
Иногда их называют «тупыми» или «безгражданскими» компонентами, поскольку они просто принимают данные и отображают их в той или иной форме; то есть они в основном отвечают за рендеринг пользовательского интерфейса.
Методы жизненного цикла React (например, componentDidMount) нельзя использовать в функциональных компонентах.
В функциональных компонентах не используется метод рендеринга.
Они в основном отвечают за пользовательский интерфейс и обычно предназначены только для представления (например, компонент «Кнопка»).
Функциональные компоненты могут принимать и использовать свойства.
Следует отдавать предпочтение функциональным компонентам, если вам не нужно использовать состояние React.
Компоненты класса
Компоненты — это независимые и многократно используемые фрагменты кода. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML через функцию render(). Компоненты бывают двух типов: компоненты класса и компоненты функций. В этой главе вы узнаете о компонентах класса.
// Написание компонента класса;
Статья класса расширяет React.Component {
оказывать(){
return ‹h3›Это статья Амира‹/h3›;
}
}
Ключевые моменты
Компоненты класса используют класс ES6 и расширяют класс Component в React.
Иногда их называют «умными» или «отслеживающими состояние» компонентами, поскольку они обычно реализуют логику и состояние.
Методы жизненного цикла React можно использовать внутри компонентов класса (например, componentDidMount).
Вы передаете реквизиты компонентам класса и получаете к ним доступ с помощью this.props.
