Руководство для начинающих по хукам React и их использованию
23 января 2023 г.Что такое React Hooks и чем они полезны?
React Hooks — это новая функция в React 16.8, которая позволяет вам использовать состояние и другие функции React без написания класса. Это упрощает совместное использование логики с отслеживанием состояния между компонентами и помогает сделать ваш код более пригодным для повторного использования и более понятным. Хуки также полезны, потому что они позволяют разбивать код на более мелкие, повторно используемые части, что упрощает управление и тестирование.
Различия между React Hooks и компонентами на основе классов
Некоторые ключевые различия между React Hooks и компонентами на основе классов включают:
- Хуки позволяют использовать состояние и другие функции React в функциональных компонентах. До появления хуков только компоненты на основе классов могли иметь состояние и использовать другие функции React, такие как методы жизненного цикла. С помощью хуков вы можете добавлять состояние и другие функции React к функциональным компонентам, делая их более универсальными и пригодными для повторного использования.
2. Перехватчики делают ваш код более кратким и читабельным: Компоненты на основе классов могут стать длинными и сложными, особенно если вам приходится управлять большим количеством методов состояния или жизненного цикла. С помощью хуков вы можете использовать простые целенаправленные функции для обработки отдельных частей состояния и логики, что может сделать ваш код более читабельным и понятным.
3. Перехватчики позволяют повторно использовать логику с отслеживанием состояния. С помощью перехватчиков вы можете извлекать логику с отслеживанием состояния из компонента и совместно использовать ее между несколькими компонентами, что делает ваш код более пригодным для повторного использования и более простым в обслуживании. Это особенно полезно, если у вас есть сложный компонент с большим количеством логики с отслеживанием состояния, и вы хотите извлечь часть этой логики в повторно используемые функции.
Основные хуки React
useState()
Хук useState — это функция в React, которая позволяет добавлять состояние к функциональным компонентам. Состояние — это набор значений, которые определяют поведение компонента и отображают информацию для пользователя. Хук useState принимает один аргумент, который является начальным состоянием, и возвращает массив с двумя элементами.
Первый элемент — это текущее значение состояния, а второй элемент — это функция, которую можно использовать для обновления состояния. Вот пример того, как вы можете использовать хук useState в функциональном компоненте:
import React, { useState } from 'react';
const myComponent = () => {
// Declare a new state variable, which we'll call "count"
// The initial value of count is 0
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times.</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
В этом примере хук useState используется для добавления части состояния, называемой count, к функциональному компоненту MyComponent. Начальное значение count равно 0, а функция setCount используется для обновления значения count при нажатии кнопки. При каждом нажатии кнопки значение count будет увеличиваться на 1, и компонент будет повторно отображаться с обновленным значением.
использовать эффект()
useEffect — это хук в React, который позволяет выполнять побочные эффекты в функциональных компонентах. Это может включать в себя такие вещи, как настройка подписок, изменение модели DOM и взаимодействие с внешними API.
Он вызывается внутри компонента и будет выполняться каждый раз, когда компонент отрисовывается.
Вот пример того, как его использовать:
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
// Perform some side effect, like subscribing to a data source
const subscription = someDataSource.subscribe(data => {
// Update state with the data from the subscription
setState({ data });
});
// Clean up the subscription when the component unmounts
return () => subscription.unsubscribe();
});
// Render the component
return (
<div>
{/* Use the data from the state in the render method */}
Data: {state.data}
</div>
);
}
n В этом примере хук useEffect используется для настройки подписки на источник данных и обновления состояния компонента данными из подписки. Он также включает функцию очистки, которая будет вызываться при размонтировании компонента, чтобы обеспечить правильную очистку подписки и избежать утечек памяти.
использоватьконтекст()
useContext — это хук в React, который позволяет вам получить доступ к значению контекста из функционального компонента. Контекст предоставляет способ передачи данных через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне.
Вот пример использования useContext:
import React, { useContext } from 'react';
// Create a context with a default value
const MyContext = React.createContext('defaultValue');
function MyComponent() {
// Use the useContext hook to access the value of the context
const value = useContext(MyContext);
return (
<div>
{/* Use the value from the context in the render method */}
Value from context: {value}
</div>
);
}
В этом примере хук useContext используется для доступа к значению контекста MyContext в функциональном компоненте MyComponent. Затем значение контекста можно использовать в методе рендеринга.
Важно отметить, что значение контекста будет обновляться только в компонентах, где используется контекст, если обновляется поставщик, предоставляющий значение контекста. Это означает, что любые изменения значения контекста будут отражены в компонентах, которые используют контекст, только если поставщик повторно отображается с обновленным значением.
Расширенные хуки React
useReducer()
useReducer — это хук в React, который используется для управления состоянием в приложении React. Он похож на хук useState, но позволяет управлять более сложными объектами состояния и предоставляет способ обработки действий в функции-редюсере.
Вот пример использования useReducer в компоненте React:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
</>
);
}
n В этом примере хук useReducer используется для управления состоянием простого компонента счетчика. Хук вызывается с функцией редуктора и начальным состоянием и возвращает текущее состояние и функцию отправки, которую можно использовать для отправки действий редюсеру. В этом случае у компонента есть две кнопки, которые отправляют действия «увеличение» и «уменьшение» редьюсеру, который соответствующим образом обновляет счетчик в состоянии.
использоватьMemo()
useMemo — это хук в React, который позволяет оптимизировать производительность компонента, запоминая его результат. Он принимает функцию и массив зависимостей в качестве аргументов и возвращает запомненный результат функции.
<цитата>Мемоизация – это просто метод оптимизации, используемый для повышения скорости и эффективности приложения. он делает это, сохраняя результаты вычислений и возвращая кэшированный результат, когда те же входные данные появляются снова.
Массив зависимостей сообщает React, когда повторно запускать запомненную функцию. Каждый раз, когда одна из зависимостей в массиве изменяется, мемоизированная функция будет запускаться повторно. Это может быть полезно для оптимизации производительности в больших или сложных компонентах, где повторное вычисление результата функции каждый раз при отрисовке компонента может быть дорогостоящим.
использоватьСсылку()
В React хук useRef используется для создания ссылки на элемент DOM или экземпляр компонента React. Затем эту ссылку можно использовать для доступа к свойствам элемента, таким как его значение или проверенное состояние, или для вызова функций элемента, таких как фокус или щелчок.
Вот пример того, как можно использовать useRef для фокусировки элемента ввода при нажатии кнопки:
import { useRef } from 'react';
function MyInput() {
const inputRef = useRef(null);
function handleClick() {
// Use the `current` property of the ref to access the DOM element
inputRef.current.focus();
}
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</div>
);
}
n В этом примере переменная inputRef создается путем вызова useRef и передачи null в качестве начального значения для ссылки. Затем эта ссылка прикрепляется к элементу ввода путем установки для атрибута ref значения inputRef.
Когда вызывается функция handleClick, она использует текущее свойство inputRef для доступа к элементу ввода и вызывает свой метод focus, который перемещает фокус на элемент ввода.
Обратите внимание, что useRef не следует использовать для хранения состояния в вашем компоненте. Вместо этого используйте для этой цели хук useState. useRef предназначен для хранения ссылок на значения, не относящиеся к React, такие как элементы DOM.
Распространенные варианты использования React Hooks
- Управление состоянием простых и сложных компонентов
- Выполнение побочных эффектов, таких как вызовы API и подписки
- Оптимизация производительности с помощью мемоизации
- Создание ссылок на элементы для использования в анимации и взаимодействиях.
Заключение
И в заключение, хуки React предлагают несколько преимуществ по сравнению с традиционными компонентами на основе классов. Такие как простота, возможность повторного использования, компонуемость (то есть возможность объединять несколько логических элементов в одну функцию) и повышенная производительность.
Я бы посоветовал вам ознакомиться с основами React Hooks и попробовать применить их в своем следующем проекте.
н
Оригинал