Как быстро понять хук useEffect в React
год назад·2 мин. на чтение
В этой статье углубимся в хук useEffect. Это важный инструмент при работе с React. Понимание различных способов использования useEffect позволит вам с уверенностью справляться с побочными эффектами и управлять жизненными циклами компонентов.
React компоненты в процессе своего существования проходят разные стадии, это называется жизненным циклом компонентов. Эти этапы можно разделить на три основных этапа:
1.
Когда вы передаете пустой массив зависимостей в
2.
Когда вы предоставляете массив зависимостей с определенными значениями, эффект выполняется, когда компонент монтируется и когда эти значения изменяются. Это позволяет выборочно реагировать на изменения в пропсах или состоянии компонента.
Примером использования для этого может быть функция поиска.
3.
Когда вы используете хук
- Монтирование: компонент создается и вставляется в модель DOM
- Обновление: компонент повторно визуализируется из-за изменений в его пропсах или состоянии.
- Размонтирование: компонент удаляется из модели DOM
useEffect
: с пустым массивом зависимостей, с массивом зависимостей со значениями и без массива зависимостей. Давайте начнем!
1. useEffect
с пустым массивом зависимостей
Когда вы передаете пустой массив зависимостей в useEffect
, это означает, что эффект запускается только один раз, когда компонент монтируется. Это полезно для выполнения одноразовых инициализаций или подписки на события, которые не изменяются со временем.
Вариантом использования для этого может быть получение данных из API.
В этом примере хукimport { useEffect, useState } from "react"; export default function App() { const [data, setData] = useState(null); useEffect(() => { fetch("https://mock-api.com") .then((response) => response.json()) .then((apiData) => { setData(apiData); }); }, []); return ( <div> {data && data.message} </div> ); }
useEffect
используется для получения данных из API, затем данные сохраняются в состоянии с помощью функции setData
. Так как массив зависимостей пуст, этот фрагмент кода будет выполняться только один раз при монтировании компонента.
2. useEffect
со значениями в массиве зависимостей
Когда вы предоставляете массив зависимостей с определенными значениями, эффект выполняется, когда компонент монтируется и когда эти значения изменяются. Это позволяет выборочно реагировать на изменения в пропсах или состоянии компонента.
Примером использования для этого может быть функция поиска.
В этом примере хукimport React, { useState, useEffect } from 'react'; function FilterableList({ items }) { const [filter, setFilter] = useState(''); const [filteredItems, setFilteredItems] = useState(items); useEffect(() => { const filtered = items.filter(item => item.toLowerCase().includes(filter.toLowerCase())); setFilteredItems(filtered.length !== 0 ? filteredItems : items); }, [filter, items]); return ( <div> <input type="text" value={filter} onChange={e => setFilter(e.target.value)} /> <ul> {filteredItems.map(item => <li key={item}>{item}</li>)} </ul> </div> ); }
useEffect
фильтрует список элементов на основе вводимых пользователем данных. Эффект запускается при каждом изменении значений фильтра или элементов, обеспечивая соответствующее обновление отфильтрованного списка.
3. useEffect
без массива зависимостей
Когда вы используете хук useEffect
без предоставления массива зависимостей (не пустого массива, а вообще без массива), это означает, что эффект будет выполняться после каждого рендеринга, то есть при монтировании и при каждом обновлении компонента из-за изменений в его пропсах или состоянии. Это может привести к проблемам с производительностью и неожиданному поведению, особенно если вы обновляете состояние в эффекте.
Честно говоря, сложно придумать хороший пример из реальной жизни, когда это использовать.
Итоги
- Если вы используете пустой массив зависимостей, блок кода будет выполнен только один раз, во время монтирования компонента.
- Если вы передаете значения в массив зависимостей, это вызовет эффект при монтировании компонента и при изменении конкретных значений в массиве зависимостей.
- Если вы используете
useEffect
без массива зависимостей, он будет выполнять код после каждого рендеринга.
useEffect
, вы сможете эффективно справляться с побочными эффектами и жизненными циклами компонентов. Не забывайте использовать эти знания с умом и адаптировать их к потребностям ваших проектов.Хук useContext - как использовать контекст в React?
2 года назад·4 мин. на чтение
useContext - это React хук, который позволяет вам читать и подписываться на контекст из вашего компонента.
API хука useContext
const value = useContext(SomeContext)
useContext(SomeContext)
ВызовитеuseContext
на верхнем уровне вашего компонента для чтения и подписки на контекст.
import { useContext } from 'react'; function MyComponent() { const theme = useContext(ThemeContext); // ...
Параметры
SomeContext
: Контекст, который вы ранее создали с помощьюcreateContext
. Сам контекст не содержит информации, он только представляет тип информации, которую вы можете предоставить или прочитать из компонентов.
Что возвращает useContext
?
useContext
возвращает значение контекста для вызывающего компонента. Оно определяется как значение, переданное ближайшему SomeContext.Provider
, расположенному выше вызывающего компонента в дереве. Если такого провайдера нет, то возвращаемое значение будет значением по умолчанию (defaultValue
), которое вы передали в createContext
для данного контекста. React автоматически перерисовывает компоненты, которые читают некоторый контекст, если он изменяется.
Использование контекста
Передача данных вглубь дерева
ВызовитеuseContext
на верхнем уровне вашего компонента для чтения и подписки на контекст.
import { useContext } from 'react'; function Button() { const theme = useContext(ThemeContext); // ...
useContext
возвращает значение контекста для переданного вами контекста. Чтобы определить значение контекста, React просматривает дерево компонентов и находит ближайший вышеуказанный провайдер контекста для данного контекста.
Чтобы передать контекст кнопке, оберните ее или один из ее родительских компонентов в соответствующий провайдер контекста:
Не имеет значения, сколько слоев компонентов находится между провайдером и кнопкой. Когда кнопка в любом месте формы вызываетfunction MyPage() { return ( <ThemeContext.Provider value="dark"> <Form /> </ThemeContext.Provider> ); } function Form() { // ... отрисовывает кнопки внутри себя ... }
useContext(ThemeContext)
, она получит значение "dark"
.
import { createContext, useContext } from 'react'; const ThemeContext = createContext(null); export default function MyApp() { return ( <ThemeContext.Provider value="dark"> <Form /> </ThemeContext.Provider> ) } function Form() { return ( <Panel title="Welcome"> <Button>Sign up</Button> <Button>Log in</Button> </Panel> ); } function Panel({ title, children }) { const theme = useContext(ThemeContext); const className = 'panel-' + theme; return ( <section className={className}> <h1>{title}</h1> {children} </section> ) } function Button({ children }) { const theme = useContext(ThemeContext); const className = 'button-' + theme; return ( <button className={className}> {children} </button> ); }
Обновление данных, переданных через контекст
Часто бывает необходимо, чтобы контекст менялся с течением времени. Чтобы обновить контекст, вам нужно объединить его с состоянием. Объявите переменную state в родительском компоненте и передайте текущее состояние в качестве значения контекста провайдеру.Теперь любая кнопка внутри провайдера будет получать текущее значение темы. Если вы вызоветеunction MyPage() { const [theme, setTheme] = useState('dark'); return ( <ThemeContext.Provider value={theme}> <Form /> <Button onClick={() => { setTheme('light'); }}> Switch to light theme </Button> </ThemeContext.Provider> ); }
setTheme
для обновления значения темы, которое вы передаете провайдеру, все компоненты Button
будут заново отображаться с новым значением "light"
.
Указание значения по умолчанию
Если React не может найти ни одного провайдера данного контекста в родительском дереве, значение контекста, возвращаемое функциейuseContext()
, будет равно значению по умолчанию, которое вы указали при создании контекста:
Значение по умолчанию никогда не изменяется. Если вы хотите обновить контекст, используйте его вместе с состоянием, как описано выше. Часто вместоconst ThemeContext = createContext(null);
null
можно использовать какое-то более значимое значение по умолчанию, например:
Таким образом, если вы случайно отобразите какой-то компонент без соответствующего провайдера, он не сломается. Это также поможет вашим компонентам хорошо работать в тестовой среде без установки большого количества провайдеров в тестах. В приведенном ниже примере кнопка "Toggle theme" всегда светлая, потому что она находится вне любого провайдера контекста темы, а значение контекстной темы по умолчанию -const ThemeContext = createContext('light');
'light'
.
import { createContext, useContext, useState } from 'react'; const ThemeContext = createContext('light'); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> <ThemeContext.Provider value={theme}> <Form /> </ThemeContext.Provider> <Button onClick={() => { setTheme(theme === 'dark' ? 'light' : 'dark'); }}> Toggle theme </Button> </> ) } function Form({ children }) { return ( <Panel title="Welcome"> <Button>Sign up</Button> <Button>Log in</Button> </Panel> ); } function Panel({ title, children }) { const theme = useContext(ThemeContext); const className = 'panel-' + theme; return ( <section className={className}> <h1>{title}</h1> {children} </section> ) } function Button({ children, onClick }) { const theme = useContext(ThemeContext); const className = 'button-' + theme; return ( <button className={className} onClick={onClick}> {children} </button> ); }
Переопределение контекста для части дерева
Вы можете переопределить контекст для части дерева, обернув эту часть в провайдер с другим значением.Вы можете вложить и переопределить провайдеров столько раз, сколько вам нужно.<ThemeContext.Provider value="dark"> ... <ThemeContext.Provider value="light"> <Footer /> </ThemeContext.Provider> ... </ThemeContext.Provider>
Оптимизация повторных рендерингов при передаче объектов и функций
Вы можете передавать любые значения через контекст, включая объекты и функции.Здесь значение контекста - это JavaScript объект с двумя свойствами, одно из которых - функция. Всякий раз, когдаfunction MyApp() { const [currentUser, setCurrentUser] = useState(null); function login(response) { storeCredentials(response.credentials); setCurrentUser(response.user); } return ( <AuthContext.Provider value={{ currentUser, login }}> <Page /> </AuthContext.Provider> ); }
MyApp
ререндерится (например, при обновлении маршрута), это будет другой объект, указывающий на другую функцию, поэтому React также придется перерендерить все компоненты в глубине дерева, которые вызывают useContext(AuthContext)
.
В небольших приложениях это не является проблемой. Однако нет необходимости перерисовывать их, если базовые данные, такие как currentUser
, не изменились. Чтобы помочь React воспользоваться этим фактом, вы можете обернуть функцию входа в систему в useCallback
и обернуть создание объекта в useMemo
.
В результате этого изменения, даже еслиimport { useCallback, useMemo } from 'react'; function MyApp() { const [currentUser, setCurrentUser] = useState(null); const login = useCallback((response) => { storeCredentials(response.credentials); setCurrentUser(response.user); }, []); const contextValue = useMemo(() => ({ currentUser, login }), [currentUser, login]); return ( <AuthContext.Provider value={contextValue}> <Page /> </AuthContext.Provider> ); }
MyApp
потребуется повторный рендеринг, компонентам, вызывающим useContext(AuthContext)
, не потребуется повторный рендеринг, если только currentUser
не изменился.