Реактивные хуки работают. Вот ваше введение

Классы могут быть большим препятствием для изучения React, говорит Реактивная команда. Они не очень хорошо минимизируются и делают горячую перезагрузку ненадежной. С React Hooks вам не нужно преобразовывать функциональный компонент в компонент класса. Вы можете использовать методы состояния и жизненного цикла в функциональном компоненте.

Хорошо, но что такое крючки на самом деле?

Это функции, которые позволяют «зацепиться» за React внутреннее состояние и особенности жизненного цикла из функциональных компонентов

Большой! Как я могу это сделать?

Во-первых, обновите зависимость React и React DOM в своем проекте. Хуки недавно выпущены в React 16.8.0 сегодня!

npm install --save react@^16.8.0 react-dom@^16.8.0

Теперь давайте взглянем на useState крюк. Вот демо:

React перехватывает 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>
  );
}

Правила крючков

Важно помнить, что хуки не работают в компоненте класса. Они сделаны для функциональных компонентов.

  1. Не вызывайте хуки внутри вложенных функций, циклов или условий.
  2. Не вызывайте хуки из обычной функции JavaScript.
  3. Этот без рефакторинга

Вывод

useState hook позволяет функциональным компонентам получать доступ к внутреннему состоянию React и обновлять его. Состояние может быть любого типа данных: строка, число, логическое значение, массив или объект. useState принимает один аргумент: начальные данные и возвращает массив из двух значений: текущее значение состояния и функцию/метод, которые можно использовать для обновления состояния.

Есть больше, чем просто useState крючок, но давайте рассмотрим каждый крючок в отдельном посте.

Вот список всех встроенные крючки (да, вы можете написать собственный хук!) Доступно на момент написания этой статьи. Я расскажу о них в следующих постах!

Кроме того, я пишу книгу о правильном изучении React без стресса. Вы можете проверить это здесь.

До скорого!
cta-react-distilled.jpg

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *