В этой статье. мы увидим, как функциональные сегменты можно использовать с перехватчиками React, чтобы уменьшить длину кода, используемого при написании компонентов на основе классов, и в то же время получить все их функции.
Мы собираемся использовать TypeScript для этого урока, чтобы наш код оставался на 100% безопасным для типов, и я должен сказать, что если вы делаете большой проект, Typescript является обязательной функцией, с которой нужно работать, чтобы поддерживать код в чистоте.
Оболочка
xxxxxxxxxx
1
npx create-react-app codersera-hooks-tutorial --template typescript
2
# or
3
yarn create react-app codersera-hooks-tutorial --template typescript
Приведенная выше команда сгенерирует проект с именем «codersera-hooks-tutorial». Как только он закончится, перейдите в каталог и либо npm startили yarn startдадите толчок проекту.
В этом уроке мы будем использовать пряжу для поддержания единообразия.
Теперь мы собираемся интегрировать antd (библиотеку дизайна под названием ant design), которую мы будем использовать, чтобы иметь некоторые стандартные компоненты пользовательского интерфейса. (Обратите внимание, это не имеет ничего общего с хуками или React в целом.)
Вам также может понравиться:
Мышление в React Hooks: Создание приложения со встроенной аналитикой .
Интеграция antd в React Вт Ith Крючки
Добавить antd в качестве зависимости
Машинопись
xxxxxxxxxx
1
yarn add antd
Добавьте
antd CSS для загрузки стилей.
Машинопись
xxxxxxxxxx
1
# src/index.tsx
2
3
.
4
import 'antd/dist/antd.css';
5
..
После этого у нас теперь есть полная установка TypeScript из React с интегрированной библиотекой дизайна antd .
Использование состояния с хуками в React (React.useState)
Давайте посмотрим, как работать с крючками. Для этого мы собираемся создать один сегмент формы, который будет отображать его значение в поле ввода после отправки формы.
Создать StateHooksComponent . TSX файл внутри SRC / компоненты каталога (Создание каталога папки , если она еще не существует.)
Теперь создайте функцию StateHooksComponentи импортируйте компонент в приложение . TSX файл.
Машинопись
xxxxxxxxxx
1
#src/components/StateHooksComponent.tsx
2
3
import React from "react";
4
interface Props {
5
}
6
7
const StateHooksComponent: React.FC<Props> = ({}) => {
8
9
return (
10
<div>
11
State Hooks component
12
</div>
13
)
14
}
15
16
export default StateHooksComponent;
После этого App.tsx будет выглядеть так:
Машинопись
xxxxxxxxxx
1
import React from 'react';
2
import './App.css';
3
import StateHooksComponent from './components/StateHooksComponent';
4
5
const App: React.FC = () => {
6
return (
7
<div className="App">
8
<StateHooksComponent/>
9
</div>
10
);
11
}
12
13
export default App;
Теперь давайте добавим кнопку, поле ввода и представление вывода в нашем StateHooksComponents.
Машинопись
xxxxxxxxxx
1
const [name, setName] = useState<string>('');
useState Функция возвращает две вещи, состояние переменной, а диспетчер , чтобы установить состояние. Мы можем применить любую форму именования, но ясно использовать следующий синтаксис:
[xxx, setXxx]
handler Обозначается с функцией стрелки. Например, есть два обработчика: handleSubmit и onChangeEvent.
Машинопись
xxxxxxxxxx
1
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
2
e.preventDefault();
3
};
4
5
const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
6
setName(e.target.value);
7
};
После внесения необходимых изменений ваш компонент будет выглядеть примерно так:
Машинопись
xxxxxxxxxx
1
import React, {ChangeEvent, FormEvent, useState} from "react";
2
import {Form, Input, Button} from "antd";
3
4
interface Props {
5
}
6
7
const StateHooksComponent: React.FC<Props> = ({}) => {
8
9
const [name, setName] = useState<string>('');
10
11
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
12
e.preventDefault();
13
console.log(name);
14
};
15
16
const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
17
setName(e.target.value);
18
};
19
20
return (
21
<Form layout="inline" onSubmit={handleSubmit}>
22
<Form.Item>
23
<Input type="text" placeholder="name" value={name} onChange={onNameChange} />
24
<Button htmlType="submit" type="primary"> Submit </Button>
25
</Form.Item>
26
</Form>
27
)
28
}
29
30
export default StateHooksComponent;
Вот результат, который вы должны ожидать после записи некоторого содержимого в поле и нажатия на поле
Использование эффектов / жизненного цикла с крючками (React.useEffect)
useEffectпредоставляет возможности componentWillUpdate, componentWillMountи componentWillUnmount в одной функции.
Машинопись
xxxxxxxxxx
1
useEffect(() => {
2
console.log('Component mounted');
3
return () => {
4
console.log('Component will be unmount')
5
}
6
}, []); # notice the empty array here, this is optional
Теперь приведенный выше код является примером универсального useEffect, обратите внимание на пустой массив выше. Существует три способа useEffect использования:
- Если массив пуст, функция будет выполнена один раз во время монтирования сегментов, а функция возврата будет выполнена во время демонтажа. Например, это можно использовать для инициирования вызовов API для извлечения данных, которые должны отображаться в пользовательском интерфейсе.
- Если массив не указан, функция будет выполняться до и после каждого рендера. Это используется для записи количества раз рендеринга.
- Если в массиве есть какая-либо переменная состояния, то функция выполняется один раз при монтировании компонента, а затем при каждом изменении состояния вызывается функция.
Машинопись
xxxxxxxxxx
1
.
2
const [name, setName] = useState<string>('');
3
const [options, setOptions] = useState<Array<string>>([]);
4
useEffect(()=> {
5
if(name){
6
// fetch auto suggest options from backend,
7
setOptions(data);
8
}
9
}, [name])
10
.
Теперь каждый раз, когда пользователь вводит какой-либо символ в поле ввода, которому назначены параметры автоматического предложения, данные будут выбираться с сервера и обновляться до состояния параметров, которое можно использовать для отображения параметров автоматического предложения.
Ниже приведен блок кода, показывающий, как будет вызываться эффект использования:
Машинопись
xxxxxxxxxx
1
import React, {ChangeEvent, FormEvent, useState, useEffect} from "react";
2
import {Form, Input, Button} from "antd";
3
4
interface Props {
5
}
6
7
const StateHooksComponent: React.FC<Props> = ({}) => {
8
9
const [name, setName] = useState<string>('');
10
const [address, setAddress] = useState<string>('');
11
12
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
13
e.preventDefault();
14
console.log(name);
15
};
16
17
const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
18
setName(e.target.value);
19
};
20
21
const onAddressChange = (e: ChangeEvent<HTMLInputElement>) => {
22
setAddress(e.target.value);
23
};
24
25
useEffect(() => {
26
console.log('Component mounted');
27
return () => {
28
console.log('Component will be unmount');
29
}
30
}, []);
31
32
useEffect(() => {
33
console.log(`Any state changed Name: ${name}, Address: ${address}`);
34
});
35
36
useEffect(() => {
37
console.log(`Name changed: ${name}`);
38
}, [name]);
39
40
return (
41
<Form layout="inline" onSubmit={handleSubmit}>
42
<Form.Item>
43
<Input type="text" placeholder="name" value={name} onChange={onNameChange}/>
44
<Input type="text" placeholder="address" value={address} onChange={onAddressChange} />
45
<Button htmlType="submit" type="primary"> Submit </Button>
46
</Form.Item>
47
</Form>
48
)
49
};
50
51
export default StateHooksComponent;
Приведенный выше код создаст следующее изображение
на основе классов и при этом использовать все функции, которые вы могли использовать с методами жизненного цикла класса.