Хуки - определенно лучшая вещь, и это новая функция, представленная в версии React 16.8, я всегда предпочитаю использовать функциональный компонент вместо компонента класса.
Одно можно сказать наверняка, если вы используете компонент класса, хуки там не используются.
Когда использовать хуки?
Ответ: Если вы хотите добавить состояние к функциональному компоненту. Раньше вы делали это в компоненте класса таким образом (this.state = {…} внутри конструктора)
Но теперь вы можете сделать это внутри существующего компонента fn.
Предварительные требования для React Hooks и установки
Откройте репозиторий проекта и запустите cmd:
$ npm install [email protected] - сохраните
$ npm установить [email protected] - сохранить
Вышеупомянутые команды установят последнюю реакцию и зависимости для использования хуков (useState и useEffect)
useState Hook:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
импортировать React, {useState} из «react»;
функция countClick () {
const [count, setCount] = useState (0);
return (
‹div›
‹p› Я нажал {count} раз ‹/p›
‹кнопку onClick = {() =› setCount (count + 1)} ›
Щелкните меня, пожалуйста
‹/button›
‹/div›
);
}
экспорт по умолчанию countClick;
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Это было довольно просто и понятно. Вам не нужно писать (this.setState ({…})). Мне нравится использовать useState :)
Объяснение: В приведенном выше примере мы использовали useState из «react», чтобы установить состояние события click внутри компонента fn. useState принимает 2 параметра: первый элемент - это текущее значение состояния, а второй - функция, которая позволяет нам обновлять его значение.
Идентичный код без хуков выглядит следующим образом (с использованием setState):
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
импортировать React, {useState} из response;
класс countClick расширяет React.Component {
constructor (props) {
super (props);
this.state = {
count: 0
};
}
render () {
return (
‹div›
‹p› ‹b› Я нажал {this.state.count} раз ‹/b› ‹/P›
‹button onClick = {() =› this.setState ({count: this.state.count + 1})} ›
Щелкните меня, пожалуйста,
‹/button›
‹/div›
);
}
}
экспорт countClick по умолчанию;
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Определенно подключитесь к функциональному компоненту, оптимизируйте код и уменьшите количество строк кода.
Обработка эффекта:
Когда использовать: любой запрос API, манипулирование DOM с использованием функций таймера (setTimeout ()).
Когда я изо всех сил пытался использовать внутри функции setTimeout (), и это возникло.
Хук useEffect () принимает 2 аргумента:
- callback [, dependencies])
Обратный вызов использует логику побочных эффектов, а зависимости имеют массив, который не является обязательным.
Добавьте логику побочного эффекта в функцию обратного вызова, а затем используйте аргумент dependencies для управления, когда вы хотите запустить побочный эффект.
Это основная роль useEffect ().
Если нет зависимости:
- - - - - - - - - - - - - - - - - - - - - - - -
import {useEffect} from 'react';
function MyComponent () {
useEffect (() = ›{
// Он будет запускаться после каждого рендеринга.
});
}
- - - - - - - - - - - - - - - - - - - - - - - -
Любой пустой массив в зависимостях:
- - - - - - - - - - - - - - - - - - - - - - - -
import {useEffect} from 'react';
function MyComponent () {
useEffect (() = ›{
// Он запустится один раз после первоначального рендеринга.
}, []);
}
- - - - - - - - - - - - - - - - - - - - - - - - -
Любые реквизиты или значения состояния в зависимостях:
импортировать {useEffect, useState} из «реакции»;
function MyComponent ({prop}) {
const [state, setState] = useState ('');
useEffect (() = ›{
// Он будет запущен один раз после первоначального рендеринга.
// и после каждого рендеринга ТОЛЬКО ЕСЛИ изменяется `prop` или` state`
}, [prop, state]);
}
Представьте, что useEffect Hook представляет собой сочетание componentDidMount, componentDidUpdate и componentWillUnmount (компонент класса и его метод жизненного цикла).
Пример:
импортировать {useState, useEffect} из «реакции»;
let delay = 1;
функция экспорта по умолчанию EffectApp () {
const [show, setShow] = useState (false);
useEffect (
() = ›{
let timer1 = setTimeout (() =› setShow (true), delay * 1000);
return () = ›{
// Функция возврата внутри useEffect - это то, что мы называем очисткой побочных эффектов (Отмена подписки / Очистка тайм-аута и т. Д.)
clearTimeout (timer1);
};
}, []);
возвращение шоу? (
‹div› {delay} секунд ‹/div›
): (
‹div› wait {delay} секунды ‹/div›
);
}
Наконец, useEffect - это ловушка, которая управляет побочными эффектами функциональных компонентов. Он вызывает обратный вызов после первоначального рендеринга или монтирования компонента, если какое-либо значение было изменено (передано как зависимости либо как состояние, либо как свойства).
Спасибо.. !! Наслаждайся чтением :)
