В этой статье мы попытаемся понять, что такое 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, но они накладывают два дополнительных правила:
- Не вызывайте хуки внутри циклов, условий или вложенных функций — вызывайте хуки только на верхнем уровне.
- Не вызывайте хуки из обычных функций JavaScript — вызывайте хуки только из функциональных компонентов React.
Другие крючки
Например, useContext
позволяет подписаться на контекст React без вложенности:
function Example() {
const locale = useContext(LocaleContext);
const theme = useContext(ThemeContext); // ...
}
А useReducer
позволяет управлять локальным состоянием сложных компонентов с помощью редуктора.
function Todos() {
const [todos, dispatch] = useReducer(todosReducer); // ...
}
Надеюсь, эта статья будет вам полезна. Спасибо за прочтение и продолжайте писать код!