Реактивные хуки работают. Вот ваше введение
Классы могут быть большим препятствием для изучения React, говорит Реактивная команда. Они не очень хорошо минимизируются и делают горячую перезагрузку ненадежной. С React Hooks вам не нужно преобразовывать функциональный компонент в компонент класса. Вы можете использовать методы состояния и жизненного цикла в функциональном компоненте.
Хорошо, но что такое крючки на самом деле?
Это функции, которые позволяют «зацепиться» за React внутреннее состояние и особенности жизненного цикла из функциональных компонентов
Большой! Как я могу это сделать?
Во-первых, обновите зависимость React и React DOM в своем проекте. Хуки недавно выпущены в React 16.8.0 сегодня!
npm install --save react@^16.8.0 react-dom@^16.8.0
Теперь давайте взглянем на useState крюк. Вот демо:
useState крюк
Нам нужен простой компонент класса с состоянием для сравнения. Самый простой пример, который я могу себе представить, это форма ввода:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = event => {
this.setState({ value: event.target.value });
};
render() {
return (
<form>
<label>
Name:
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Теперь давайте перепишем его, используя useState крюк. Мы будем импортировать его из react пакет, поэтому нам не нужно писать React.useState все время.
import React, { useState } from 'react';
Теперь измените наш NameForm в функциональный компонент
function NameForm(props) {}
useState hook принимает один аргумент, являющийся начальным состоянием, и возвращает два значения: текущее состояние и функцию, которую можно использовать для обновления состояния. Вы можете заменить инициализацию состояния в конструкторе:
this.state = { value: '' };
в это:
function NameForm(props) {
const [value, setValue] = useState('');
}
Обратите внимание на использование квадратных скобок при объявлении переменной состояния. Это ЕС6″деструктуризация массива«, и это означает, что мы присваиваем первое значение, возвращенное useState, для value и второе значение для setValue.
Итак, это означает, что у нас есть состояние с именем value и мы можем обновить его, позвонив setValue функция. Давайте используем его в нашем методе рендеринга:
function NameForm(props) {
const [value, setValue] = useState('');
return (
<form>
<label>
Name:
<input
type="text"
value={value}
onChange={event => setValue(event.target.value)}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
Onchange реквизит больше не вызывает handleChange метод, вместо этого у нас есть функция стрелки, которая будет вызывать setValue функция, которая обновляет наш state. О, и в отличие this.setState в компоненте класса обновление переменной состояния с помощью хуков всегда заменяйте его, а не объединяйте
Наличие нескольких состояний?
Тогда звоните useState столько раз, сколько вам нужно.
function SimpleForm(props) {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [age, setAge] = useState('');
return (
<form>
<label>
First Name:
<input
type="text"
value={firstName}
onChange={event => setFirstName(event.target.value)}
/>
</label>
<label>
Last Name:
<input
type="text"
value={lastName}
onChange={event => setLastName(event.target.value)}
/>
</label>
<label>
Age:
<input
type="number"
value={age}
onChange={event => setAge(event.target.value)}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
И это все с useState крючок, правда!
Установка начального состояния из реквизита
О, это так просто!
function SimpleForm(props) {
const [firstName, setFirstName] = useState(props.firstName);
const [lastName, setLastName] = useState(props.lastName);
const [age, setAge] = useState(props.age);
}
ReactDOM.render(
<SimpleForm firstName="JOHN" lastName="Edward" age={30} />,
document.getElementById('root')
);
Могу ли я использовать объект в состоянии?
Конечно! Просто как класс state может принимать объект или массив, useState можно и их иметь. Но чтобы это заработало, давайте добавим свойства имени к вашим элементам ввода. Мы также используем распространять свойства для обновления нашего состояния.
function SimpleForm(props) {
const [form, setForm] = useState({
FirstName: '',
LastName: '',
age: '',
});
const handleChange = event => {
setForm({
...form,
[event.target.name]: event.target.value,
});
};
return (
<form>
<label>
First Name:
<input
type="text"
name="firstName"
value={form.firstName}
onChange={handleChange}
/>
</label>
<label>
Last Name:
<input
type="text"
name="lastName"
value={form.lastName}
onChange={handleChange}
/>
</label>
<label>
Age:
<input
type="number"
name="age"
value={form.age}
onChange={handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
Что с массивом?
Это немного необычно, но да, как в классе state. Мы будем использовать concat при обновлении массива.
function SampleArrayState(props) {
const [nameArray, setNameArray] = useState(['Carl']);
const updateArray = () => {
setNameArray(nameArray.concat('John'));
};
return (
<React.Fragment>
<button onClick={updateArray}>Click me!</button>
<div>{nameArray.toString()}</div>
</React.Fragment>
);
}
А булева?
Понял вас здесь:
function SampleBooleanState(props) {
const [show, setShow] = useState(true);
const visibility = show ? 'visible' : 'hidden';
return (
<React.Fragment>
<h1 style={{ visibility }}>useState Hook is awesome!</h1>
<button
onClick={() => { setShow(!show) }}
>{`${show ? 'Hide' : 'Show'} the Header!`}</button>
</React.Fragment>
);
}
Правила крючков
Важно помнить, что хуки не работают в компоненте класса. Они сделаны для функциональных компонентов.
- Не вызывайте хуки внутри вложенных функций, циклов или условий.
- Не вызывайте хуки из обычной функции JavaScript.
- Этот
Вывод
useState hook позволяет функциональным компонентам получать доступ к внутреннему состоянию React и обновлять его. Состояние может быть любого типа данных: строка, число, логическое значение, массив или объект. useState принимает один аргумент: начальные данные и возвращает массив из двух значений: текущее значение состояния и функцию/метод, которые можно использовать для обновления состояния.
Есть больше, чем просто useState крючок, но давайте рассмотрим каждый крючок в отдельном посте.
Вот список всех встроенные крючки (да, вы можете написать собственный хук!) Доступно на момент написания этой статьи. Я расскажу о них в следующих постах!
Кроме того, я пишу книгу о правильном изучении React без стресса. Вы можете проверить это здесь.
До скорого!
