Если вы работали с реагированием, вы уже должны знать, что компоненты являются строительными блоками реагирования. С React V0.13.0 Выпуск Компоненты позволяют нам разделить UI в многоразовые и независимые кусочки с использованием классов ES6.
“Я уже знаю, что. Реагировать потрясающе!
import React from 'react';
import AnotherCompoment from './components/AnotherComponent';
// A React class component
export default class MyComponent extends React.Component {
contructor(props) {
super(props);
this.state = {
...
};
}
render() {
...
Хорошо! Позже с React V0.14.0 Выпуск , команда RACT ввела другой способ создания компонентов, названных функциональных компонентов. Используя функцию стрелки ES6 (или простой) функцию, мы теперь можем создать без гражданства Актуальный компонент.
“Я говорил тебе. Реагировать потрясающий! Я много использую функциональные компоненты ».
Эти функциональные компоненты имеют Нет штата , Нет методов жизненного цикла , но они легко написать Отказ Количество кода, которое вам нужно для записи, довольно мало по сравнению с компонентом класса.
import React from 'react';
export default const MyComponent = ({ name = "" }) => {
return Hello {name}!
};
Это отличное подходящее для компонентов, которые просто нужно сделать некоторые пользовательские интерфейсы.
Однако, если наш компонент нуждается в состоянии или необходимо использовать метод жизненного цикла реагирования, мы должны были использовать класс. Это отстой, верно? Что если мы хотим воспользоваться концепциями состояния реагирования и жизненного цикла без необходимости использовать класс 🧐? Любой?
” Э-э … позвольте мне подумать об этом … “
Опять же, команда Ract пришла к спасению с Rect V16.8 Выпуск Отказ Они ввели Лучшая концепция до библиотеки RACT: Реактивные крюки 🔥🚀!
” Но подожди … что это? “
Какой? Вы еще не слышали о реактивных крючках? Это нормально, давайте погрузимся в это вместе.
В двух словах React Cloks являются функциями, которые позволяют нам использовать состояние и другие функции реагирования внутри наших функциональных компонентов. Ни один класс не нужен! Разве это не замечательно?
“Функция? Это то, что вы называете лучшим концепцией React? »
Подумай об этом. Теперь вы можете написать простые и читаемые компоненты функций и все еще используйте React Concepts. Нет больше создания класса. Нет больше конструктора. Нет больше обязательного. Нет более дублирующей логики. Нет больше хлопот при делях не визуальной логики между компонентами. Больше не надо…
“Ждать. Ждать. Это слишком много для меня. Мне нужны несколько примеров ».
Я понял. Давайте представимся, что мы хотели бы создать форму входа в систему, чтобы наши пользователи могли аутентифицироваться в наше приложение, используя их электронную почту и пароль. Давайте посмотрим, как создать пользовательскую систему для входа в систему, используя только функциональный компонент и реагировать крюки.
Для простоты мы не будем нырять в логику аутентификации, которая является совершенно другой темой.
Хорошо. Во-первых, нам нужно создать наш функциональный компонент. Легко, верно?
import React from 'react';
export default const LoginForm = (props) => {
return (
Login Form
);
}
Теперь давайте создадим саму форму, написав несколько JSX для полей ввода и кнопку «Отправить».
Чтобы обрабатывать представление формы и иметь доступ к данным, которые пользователь входит в него, мы должны преобразовать нашу форму формы на Управляемый компонент Отказ Это то, что мы привыкли к компонентам класса и состоянию реагирования. Однако, поскольку мы больше не используем класс, нам нужен новый способ добавления и управления состоянием внутри нашего функционального компонента.
«Вы говорили о реактивных крючках. Я верю, что есть крючок для этого, верно?
Точно так же, как в Rection V16.8.0 реагирование дает нам возможность управлять состоянием внутри функциональных компонентов через Уместите метод.
import React, { useState } from 'react';
Уместите Метод, как и любые другие реактивные крюки, должны использоваться внутри функционального компонента. Уместите принимает в одном аргументе, начальное значение для состояния. Он возвращает массив с первым элементом, являющимся значением состояния, а второй элемент является функцией для обновления этого состояния.
В нашем случае нам нужны 2 значения состояния для обработки пользовательских входов. Один для адреса электронной почты и один для пароля. Давайте начать эти с пустой строкой.
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
Мы будем использовать состояния и функции обновления для управления входами формы.
... setEmail(e.target.value)} /> ... setPassword(e.target.value)} /> ...
SeteMail и setwassword Функции используются для обновления каждого соответствующего состояния. Они принимают новую государственную ценность и восстанавливают рендеринг компонента.
“WAW! Это восхитительно.”
Теперь у нас есть контролируемый компонент, построенный с простой функцией и крючком реакции. Мы, наконец, можем создать функцию для обработки представления формы как обычно.
import React, { useState } from 'react';
export default const LoginForm = (props) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
// Authenticate user
...
};
return (
Login Form
);
}
“Еще кое-что. Как я могу положить фокус на ввод электронной почты? У меня больше нет доступа к методу ComponentDidMount, я? »
Хороший вопрос. У нас нет доступа к методам ComponentDIDMount, ComponentDidupdate и компонентами компонентов внутри наших функциональных компонентов. Но теперь у нас есть эффективный крючок, Useffect Отказ Этот крюк позволяет нам выполнять «Побочные эффекты» от функционального компонента.
import React, { useEffect } from 'react';
Другими словами, именно здесь мы обрабатываем такие вещи, как привлечение данных, настроив подписки или ручное манипулирование DOM. Useffect Принимает функцию, которая будет запущена путем реагирования после каждого визуализации.
useEffect(() => {
...
})
Давайте вернемся к нашему примеру. Благодаря Useffect Крюк Мы можем установить фокус на наше поле ввода электронной почты, когда наш компонент отображается. Для этого нам также нужен способ получить доступ к узлу DOM. И угадайте, что? React имеет крючок, чтобы сделать это, УСЭРЕФ .
import React, { useRef } from 'react';
“Ждать! Я думал, что у нас уже есть способ получить доступ к узлам DOM с React.Createref (). В чем разница с крюком УСЭЭФ?
Ты прав. Чтобы получить доступ к узлу DOM в компоненте класса, мы бы использовали Rect.Createref метод. Однако этот метод всегда создает новый Ref на каждом визуализации. Чтобы преодолеть это, мы, как правило, мы будем поместить ссылку в свойство экземпляра внутри конструктора класса. Но у нас нет этой опции в функциональном компоненте.
Вот почему нам нужно использовать УСЭРЕФ крючок в функциональном компоненте. Действительно, УСЭРЕФ вернет один и тот же REF каждый раз в течение полной жизни компонента.
“Хорошо. Я понял. Можете ли вы показать мне, как это использовать? »
export default const LoginForm = (props) => {
...
const emailEl = useRef(null);
...
return (
...
setEmail(e.target.value)}
/>
...
);
Теперь, когда у нас есть доступ к узлу DOM нашего почтового ввода, давайте поместим фокус на нем, используя эффективный крюк.
useEffect(() => {
emailEl.current.focus();
});
Я сказал вам, прежде чем реагировать на нашу функцию эффекта после каждого визуализации по умолчанию. Это дело с нашей текущей реализацией. Таким образом, каждый раз, когда пользователь введет значение в одном из полей ввода, состояние будет обновлено, и компонент будет отображаться. Затем наша функция эффекта будет запущена, и фокус снова будет помещен на ввод электронной почты. Это не то, что мы хотим.
К счастью, мы можем настроить это поведение, передав второй аргумент для Useffect Крюк, массив зависимостей. В нашем случае мы можем пройти пустой массив, чтобы сообщить реагированию, что ему никогда не нужно запускать нашу функцию эффекта.
useEffect(() => {
emailEl.current.focus();
}, []);
Это люди! У нас есть форма входа в систему, построенная с функциональным компонентом, и только в реактивных крючках. Вот полный исходный код на случай, если вам это нужно:
import React, { useState, useEffect, useRef } from 'react';
export default const LoginForm = (props) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const emailEl = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
// Authenticate user
...
};
useEffect(() => {
emailEl.current.focus();
}, []);
return (
Login Form
);
}
Оригинал: “https://dev.to/alterclass/the-best-react-concept-no-class-needed-p4”