Автор оригинала: Damien Cosset.
Вступление
Крючки были введены в React 16.8. Эта функция полностью изменила способ написания наших компонентов. Как вы можете знать, перед крючками вы не можете использовать состояние в функциональных компонентах. Всякий раз, когда вам нужно добавить состояние в функциональный компонент, вам нужно было повторно написать этот компонент как класс … раздражает. Государственный крюк наконец решает эту проблему.
Как это использовать
Государственный крючок используется как следует следующее:
import React, {useState} from 'react';
const CreateDebate = () => {
// We declare a state variable, called debateName
const [debateName, setDebateName] = useState("");
return (
Enter a debate name:
setDebateName(e.target.value)}>
)
}
У нас здесь очень простой кусок кода. Мы создаем функциональный компонент под названием СТАТУРАБАЙТЕБАЕТ Отказ Этот компонент оказывает Div элемент. Внутри этого элемента мы найдем абзац с входом. Мы используем состояние крюка, с Уместите , добавить состояние в этот компонент. Мы подробно посмотрим на то, как это работает, но на данный момент, давайте сравним это с той же функциональностью с классовым компонентом.
import React from "react";
export default class CreateDebateClass extends React.Component {
constructor() {
this.state = {
debateName: ""
};
}
render() {
return (
Enter a debate name:
this.setState({ debateName: e.target.value })}
/>
);
}
}
Функциональные компоненты
Реактивные крючки не работают с классами. Они работают только с функциями. В качестве напоминания компоненты функции могут быть написаны по-разному:
function MyFunctionComponent() {
//Hooks go here
return ;
}
const MyFunctionComponent = () => {
//Hooks go here
return ;
};
Команда Ract рекомендует термин Функциональные компоненты говорить об этих функциях. Перед крючками, вы можете знать их как Компоненты без гражданства или Функциональные компоненты Отказ
Подробный крючок
Что именно крючком? Крючок – это специальная функция. Это позволяет использовать определенные функции реагирования. Наш первый пример подробно описывается гостевой крючок. При использовании этого крюка мы можем использовать функцию состояния, которую вы используете, чтобы увидеть в компонентах класса.
Чтобы использовать этот конкретный крюк, сначала нужно импортировать его.
import React, { useState } from "react";
const StatefulFunction = () => {
// Your code...
};
Раньше, когда вам пришлось использовать состояние внутри компонента, этот компонент должен был быть классом Отказ Теперь мы можем просто импортировать Уместите Функция для этого!
Для тех, кто не знает, или вспоминает, Государство это функция реагирования. Это позволяет поддерживать значения переменных между вызовами функций. Обычно, когда функция выполняется со своей работой, переменные исчезнуть Отказ Что приведет к вам какую-то проблему каждый раз, когда нам нужно обновить наш интерфейс и перенаправлять наши компоненты. С государством мы можем сохранить и обновлять переменные вовремя, не теряя наших прогресс Отказ
const Example = () => {
const [firstName, setFirstName] = useState("Damien");
return ;
};
Уместите Функция объявляет новую переменную состояния. Функция – это новый способ использования Это Вы нашли в классах. Как вы можете видеть выше, Уместите принимает один аргумент. Этот аргумент представляет исходное состояние. В классе это будет сделано в конструкторе. Однако в классе это первоначальное состояние должно быть объектом, даже если у вас есть только одна строка или целое число в вашем штате.
class Example extends React.Component {
constructor() {
this.state = {
firstName: "Damien"
};
}
render() {
//...
}
}
С Уместите это может быть все, что вы хотите. Здесь я хочу, чтобы мое начальное состояние было строкой.
Что это возвращает? Что случилось с этим синтаксисом?
const [firstName, setFirstName] = useState("Damien");
Уместите Функция возвращает два значения. Первое значение – это текущее состояние, второй – это функция, которая обновляет это состояние. В нашем случае Имя это текущее состояние, а setfirstname это функция, которая позволит мне изменить значение состояния.
Синтаксис может показаться немного странным, если вы не привыкли к этому. Это то, что мы называем Раскрытие массива , прохладный маленький синтаксис, мы получили от JavaScript ES6. Этот синтаксис позволяет назначить первый элемент в массиве в переменной, здесь называемый Имя и второй элемент массива назначен переменной, который мы позвонили setfirstname Отказ Обратите внимание, что эти имена полностью произвольны и не являются частью библиотеки RACT. Выберите любые переменные правильно для вашего кода.
Синтаксис разрушения массива, используемый для stestate, такой же, как следующий код:
let firstNameVariables = useState("Damien"); // This is an array with two values
let firstName = firstNameVariables[0]; // First item
let setFirstName = firstNameVariables[1]; // Second item
Этот способ доступа к значениям – это немного многословным и запутанным. Поэтому функция разрушения массива – хороший способ написать Уместите крюк.
Читать состояние
В компоненте класса вы бы читали из this.state.debateName :
The debate name is {this.state.debateName}.
С государственным крюком мы можем теперь просто использовать debateName :
The debate name is {debateName}.
ПОМНИТЕ: Имя переменной имеется тот, который вы даете в качестве первого элемента Уместите Функция возврата.
Обновление состояния
Чтобы обновить состояние в компоненте класса, вы будете использовать SetState :
this.setState({ debateName: e.target.value })}
/>
С государственным крюком вы будете использовать функцию, предоставляемую Уместите второй товар возвращается:
setDebateName(e.target.value)} />
В моем примере я назвал эту функцию SetDebateName Отказ Помните, что это имя не является частью API RACT. Я выбрал имя этой функции, поэтому сделайте их как можно более четкими. Обратите внимание, что нам также не нужно это потому что мы уже объявили debateName и SetDebateName Отказ
Реконструировать
Давайте повторимся, как мы можем использовать гостевой крюк:
import React, { useState } from "react";
const DebateNameInput = () => {
const [debateName, setDebateName] = useState("");
return (
setDebateName(e.target.value)} />
The debate name is {debateName}.
);
};
- На первой строке мы обязательно импортируем Уместите функция от реагирования.
- Мы создаем функцию, используя синтаксис стрелки и дать ему имя
DebateNameInputОтказ - Мы называем Уместите функция. Он возвращает массив с двумя значениями, текущим состоянием и функцией, которая действует как установка. Благодаря синтаксису разрушающейся массива мы можем назначить эти значения в одной строке. Мы называем первым
debateNameа второйSetDebateNameОтказ Уместите Функция принимает один параметр, который представляет исходное состояние. В нашем примере пустая строка. - Наша функция возвращает некоторые JSX. Вход принимает текущее состояние как его значение. Мы дали ему имя
debateNameОтказ Всякий раз, когда этот вход регистрирует событие изменения, мы называемSetDebateNameс новым значением ввода в качестве параметра. Эта функция затем заменит текущийdebateNameзначение с новым. - Реагирование повторно отображает компонент с этим новым значением состояния.
Использование нескольких переменных состояний
До сих пор мы работали только с одной переменной состояния одновременно. Конечно, у вас, скорее всего, у вас будет более одной переменной состояния в вашем компоненте. Вы можете использовать несколько Уместите Функции, если хотите:
function fruitBasket = () => {
const [numberOfBananas, setNumberOfBananas] = useState(0)
const [numberOfApples, setNumberOfApples] = useState(3)
const [numberOfPeaches, setNumberOfPeaches] = useState(2)
//... rest of your code
}
Здесь мы используем три разных Уместите Функции для объявления трех государственных переменных и их 3 разных поселенцев.
Вы не надо Используйте несколько переменных состояний. Уместите Может также проводить объекты и массивы, так что это возможно:
function fruitBasket = () => {
const [numberOfFruits, setNumberOfFruits] = useState({bananas: 0, apples: 3, peaches: 2})
//... rest of your code
}
Одна вещь, чтобы узнать: обновление вариабельной переменной Коллисфыfuits отличается от this.setState в классах. В государственном крюке функция сеттера заменяет пока SetState Функция сливается Отказ Это означает, чтобы правильно обновлять Коллисфыfuits вам нужно:
setNumberOfFruits({ ...numberOfFruits, bananas: 2 });
setNumberOfFruits({ ...numberOfFruits, apples: 3 });
Используя оператор по распространению ( ... ), мы сохраняем текущее состояние и только заменяет переменные, которые необходимо изменить. Первый вызов функции заменит количество бананов на 2, вторая заменит количество яблок к 3.