что такое реакция

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

класс компонента реакции против функции

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

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

Функциональный компонент — это просто функция JavaScript, которая принимает свойства в качестве аргумента и возвращает элемент React.

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

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

вы также не можете использовать хуки жизненного цикла при использовании функциональных компонентов. Причина та же, что и для состояния: все крючки жизненного цикла исходят из React. Component, которые вы расширяете из компонентов класса.

определение компонента

function greeting(props) {
return <h1>hello, {props.name} </h1>;
}

Чтобы определить класс компонента React, необходимо расширить React.Component:

вы также можете использовать класс ES6 для определения компонента

class greeting extends React.Component {
 render() {
  return <h1> hello, {props.name} </h1>;
  }
}

преобразование функции в класс

Вы можете преобразовать функциональный компонент в класс за пять шагов:

Создайте класс ES6 с тем же именем, который расширяет React.Component.
Добавьте к нему один пустой метод с именем render().
Переместите тело функции в метод render().
Замените props на this.props в теле render().
Удалите оставшееся пустое объявление функции.

Реагировать советы и рекомендации

не путайте элементы с компонентами элементы — это то, из чего сделаны компоненты.

2. Чтобы отобразить элемент React в корневом узле DOM, передайте оба в ReactDOM.render():

const element = <h1> Brinda's React Blog</h1>;
ReactDOM.render(element, document.getElementById('root'));

3. Всегда начинайте имена компонентов с заглавной буквы.

4. React рассматривает компоненты, начинающиеся со строчных букв, как теги DOM. Например, <div /> представляет HTML-тег div, а <Brinda /> — компонент.

5. Независимо от того, объявляете ли вы компонент как функцию или класс, он никогда не должен изменять свои собственные реквизиты.

6. Элементы React неизменяемы. Создав элемент, вы не сможете изменить его дочерние элементы или атрибуты.

что такое реакция