В этой статье мы попытаемся понять, что такое React Hooks и правила, которым мы должны следовать при их использовании.

Что такое хуки? Когда использовать?

Крюки – это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса.

Перехватчики React — это функции, которые позволяют нам подключаться к функциям состояния и жизненного цикла React из функциональных компонентов.

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

Государственный крюк

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Здесь useState – это ловушка. Вы можете вызвать эту функцию из обработчика событий или из другого места. Это похоже на this.setState в классе, за исключением того, что оно не объединяет старое и новое состояние вместе.

Вы можете использовать State Hook более одного раза в одном компоненте:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(18);
  const [code, setCode] = useState('javascript');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Хук Эффекта

Хук эффектов, useEffect, добавляет возможность выполнять побочные эффекты из функционального компонента. Он служит той же цели, что и componentDidMount, componentDidUpdate и componentWillUnmount в классах React, но объединен в единый API.

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => { 
   
     // Update the document title using the browser API    
     document.title = `You clicked ${count} times`;  
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Правила хуков

Хуки — это функции JavaScript, но они накладывают два дополнительных правила:

  1. Не вызывайте хуки внутри циклов, условий или вложенных функций — вызывайте хуки только на верхнем уровне.
  2. Не вызывайте хуки из обычных функций JavaScript — вызывайте хуки только из функциональных компонентов React.

Другие крючки

Например, useContext позволяет подписаться на контекст React без вложенности:

function Example() {
  const locale = useContext(LocaleContext);  
  const theme =   useContext(ThemeContext);  // ...
}

А useReducer позволяет управлять локальным состоянием сложных компонентов с помощью редуктора.

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);  // ...
}

Надеюсь, эта статья будет вам полезна. Спасибо за прочтение и продолжайте писать код!