что такое react hooks
React Hooks - это новое API, добавленное в React 16.8, которое позволяет использовать состояние и другие возможности React без использования классовых компонентов. Вместо этого, они позволяют функциональным компонентам иметь состояние и дополнительные функциональные возможности.
Существует множество встроенных хуков в React, таких как useState
, useEffect
, useContext
, useReducer
, useCallback
, useMemo
, useRef
, useImperativeHandle
, useLayoutEffect
и другие.
Пример использования хука useState
:
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
В этом примере мы создали функциональй компонент Example
, который имеет начальное состояние count
равное 0
, а также функцию setCount
, которая обновляет состояние count
. При нажатии на кнопку, вызывается функция setCount
, которая увеличивает значение count
на 1, и компонент перерисовывается с новым значением.
React Hooks позволяют существенно упростить код и улучшить его читаемость. Например, вместо использования классов и жизненного цикла мы можем использовать хуки useEffect
и useReducer
. Также они позволяют избежать проблем, связанных с использованием this
, и делают код более функциональным.