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

React предоставляет вам 10 крючков, но только 2 из этих крючков будут использоваться очень часто при написании компонентов функции. Они USESTATE и Использоватьэффект крючки Давайте узнаем о USESTATE первый.

USESTATE Hook – это функция, которая принимает один аргумент, который является начальным состоянием, и возвращает два значения: текущее состояние и функцию, которую можно использовать для обновления состояния. Вот крюк в действии:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')
}

Обратите внимание на использование квадратных кронштейнов, когда будет объявлена переменная состояния. Это ES6 Синтаксис деструкции массива , и это означает, что мы присваиваем первый элемент массива, возвращенного USESTATE TO название и второй элемент к setName переменная.

Так что это означает, что у нас есть государство по имени имя И мы можем обновить его, позвонив в setName () функция Давайте использовать его в операторе возврата:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  return 
 Hello World! My name is {name} 
}

Поскольку функциональные компоненты не имеют setState () Функция, вам нужно использовать setName () функция для обновления. Вот как вы меняете имя с «Джона» на «Люк»:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  if(name === "John"){
    setName("Luke")
  }

  return 
 Hello World! My name is {name} 
}

Когда у вас есть несколько состояний, вы можете позвонить в USESTATE зацепите столько раз, сколько вам нужно. Крюк получает все действительные типы данных JavaScript, такие как строка, номер, логический, массив и объект:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('Jack')
  const [age, setAge] = useState(10)
  const [isLegal, setLegal] = useState(false)
  const [friends, setFriends] = useState(["John", "Luke"])

  return 
 Hello World! My name is {name} 
}

И это все, что нужно. USESTATE Крюк в основном позволяет функциональным компонентам иметь свое собственное внутреннее состояние.

Крюк с использованием

Использоватьэффект Крюк – это комбинация ComponentDidMount , ComponentDidupdate и ComponentWillunMount Методы жизненного цикла класса. Этот крючок является идеальным местом для настройки слушателей, получения данных из API и удаления слушателей до того, как компонент будет удален из DOM.

Давайте посмотрим на пример использования эффекта по сравнению с методами жизненного цикла класса. Обычно в компоненте класса мы пишем этот вид кода:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Nathan',
    };
  }

  componentDidMount() {
    console.log(
      `didMount triggered: Hello I'm ${this.state.name}`
    );
  }

  componentDidUpdate() {
    console.log(
      `didUpdate triggered: Hello I'm ${this.state.name}`
    );
  }

  render() {
    return (
      

        
{`Hello I'm ${this.state.name}`}
        
            this.setState({ name: 'Gary'})
          }
        >
          Change me
        
      
    );
  }
}

С тех пор ComponentDidMount Запускается только один раз, когда компонент вставлен в структуру дерева DOM, последующий рендеринг больше не запускает метод. Чтобы запустить что -то на каждом рендеринге, вам нужно использовать ComponentDidupdate метод

Используя Использоватьэффект Крюк как иметь оба ComponentDidMount и ComponentDidupdate В одном методе, поскольку использование эффективного запуска на каждом рендеринге. Он принимает два аргумента:

• (обязательное) Функция для запуска на каждом рендере
• (Необязательно) Массив переменных состояния для наблюдения за изменениями. Использоватьэффект будет пропущен, если ни одна из переменных не будет обновлена.

Переписывание вышеупомянутого класса в функциональный компонент будет выглядеть так:

const Example = props => {
  const [name, setName] = useState('Nathan');

  useEffect(() => {
    console.log(`Hello I'm ${name}`);
  });

  return (
    

      
{`Hello I'm ${name}`}
       {
          setName('Gary')
          }}>
        Change me
      
    
  )
}

Функциональный компонент выше будет выполнять функцию внутри Использоватьэффект функция на каждом рендере. Теперь это не оптимально, потому что состояние не будет обновлено после первого щелчка. Вот где Использовать Второй аргумент вступает в игру.

useEffect(() => {
    console.log(`Hello I'm ${name} and I'm a ${role}`);
  }, 
  [name]);

Второй аргумент Использоватьэффект Функция называется «массивом зависимостей». Когда переменная, включенная внутри массива, не изменилась, функция, выполненная как первый аргумент, не будет выполнен.

ComponentWillunMount эффект

Если у вас есть код, который должен работать, когда компонент будет удален из дерева DOM, вам необходимо указать ComponentWillunMount Эффект, написав возврат утверждение в первую функцию аргумента. Вот пример:

useEffect(() => {
    console.log(`useEffect function`);

    return () => { console.log("componentWillUnmount effect"); }
  }, [name] );

Запуск использования только один раз

Запустить Использоватьэффект Крюк только один раз, как ComponentDidMount функция, вы можете передать пустой массив во второй аргумент:

useEffect(
  () => {
    console.log(`useEffect function`);
  }, 
  [] );

Пустой массив указывает, что эффект не имеет никаких зависимостей для наблюдения за изменениями, и без триггера он не будет запущен после установки компонента.

Выровняйте свой навык реагирования сегодня!

Получите мою последнюю книгу и создайте четыре проекта, используя React. Вы получаете скидку 40% с моей сделкой в Черную пятницу! Поднимите копию сегодня!

Оригинал: “https://dev.to/nsebhastian/understanding-react-usestate-and-useeffect-hooks-1bl”