Убедитесь, что у вас есть необходимые базовые знания в следующих областях:
Базовые знания React
Node.js и npm
Чтобы начать работу с новым проектом React с использованием Vite, выполните следующие действия:
я. Откройте терминал и выполните следующую команду, чтобы создать новый проект:
npm create vite@latest my-react-app --template react
ii. Перейдите в каталог вашего проекта:
cd my-react-app
iii. Установите зависимости: Установите необходимые пакеты для вашего проекта:
npm install
iv. Запустите сервер разработки: Запустите сервер разработки:
npm run dev
Теперь ваше приложение React будет запущено, и вы сможете просмотреть его в своем браузере по адресу http://localhost:5173.
Перехватчики React — это специальные функции, которые позволяют вам использовать состояние и другие функции React в функциональных компонентах. Такие хуки, как useState и useEffect, необходимы для управления состоянием и побочными эффектами.
Пользовательские перехватчики можно описать как способ повторного использования логики в нескольких компонентах. Вместо повторения кода вы можете инкапсулировать его в собственный хук, что сделает ваши компоненты более чистыми и вашим кодом будет проще управлять. точно так же, как и перехватчики React, при использовании пользовательских перехватчиков убедитесь, что вы начинаете имя вашего компонента с (используйте, а затем имя, которое вы хотите дать компоненту, например, useFetchData). UseFetchData может быть пользовательским перехватчиком, который извлекает данные из API и возвращает их в ваш компонент.
Понимание хуков:
Такие хуки, как useState, useEffect и useContext, позволяют вам использовать состояние и другие функции React без написания класса. Они являются строительными блоками, которые позволяют вам модульно управлять логикой компонентов.
Пользовательские перехватчики позволяют повторно использовать логику с сохранением состояния в разных компонентах. Простым примером является компонент-счетчик, который имеет функции увеличения, уменьшения и сброса. Если вам нужна одна и та же логика в нескольких компонентах, эту логику можно переместить в пользовательский крючок. Другим часто используемым примером является компонент, который извлекает данные из API, и если вам нужна одна и та же логика в нескольких компонентах, вы можете переместить эту логику в собственный хук.
Пример: давайте создадим простое приложение-счетчик с перехватчиком React(useState).in app.jsx
import React, { useState } from "react"; import "./App.css"; function App() { // usestate hooks const [counterstate, setCounterstate] = useState(0); // function for increment,decrement and reset const increment = () => { setCounterstate((prev) => prev 1); }; const decrement = () => { setCounterstate((prev) => prev - 1); }; const reset = () => { setCounterstate(0); }; return (); } export default App;Counter App
{counterstate}
в приведенном выше коде многократно используемая логика включает в себя функции счетчика, начального состояния (o), приращения, уменьшения и сброса. приращение добавляет 1 к начальному состоянию, а декремент вычитает 1 из исходного состояния, а сброс сбрасывает в первое начальное состояние.
мы можем создать в папке src папку с именем Hooks, а затем файл с именем useCouter.jsx для пользовательского хука, как показано ниже.
import React, { useState } from "react"; const useCounter = (initialvalue) => { const [value, setValue] = useState(initialvalue); const increment = () => { setValue((prev) => prev 1); }; const decrement = () => { setValue((prev) => prev - 1); }; const reset = () => { setValue(initialvalue); }; return { value, increment, decrement, reset }; }; export default useCounter;
теперь давайте воспользуемся нашим специальным хуком в App.jsx.
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; function App() { const { value, increment, decrement, reset } = useCounter(0); return (); } export default App;Counter App
{value}
Давайте создадим собственный перехват useFetch для всех вызовов API.
import React, { useState, useEffect } from "react"; const useFetch = (url) => { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await fetch(url); const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, error, loading }; }; export default useFetch;
в App.jsx мы можем использовать этот специальный хук для получения имени пользователя из заполнителя JSON, как показано ниже;
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; import useFetch from "./Hooks/useFetch"; function App() { const { value, increment, decrement, reset } = useCounter(0); const { data, error, loading } = useFetch( "https://jsonplaceholder.typicode.com/users" ); return (); } export default App;Counter Appp
{value}
{loading &&Loading....} {error &&Error: {error.message}} {data && data.length > 0 && ()}Username: {data[0].username}
Одним из главных преимуществ является возможность повторного использования. Вы можете использовать один и тот же пользовательский хук в нескольких компонентах, уменьшая дублирование кода.
Пользовательские перехватчики помогут отделить логику от пользовательского интерфейса. Ваши компоненты сосредоточены на рендеринге, а пользовательские хуки обрабатывают логику.
Перенос сложной логики в специальные хуки делает ваши компоненты более простыми и понятными.
Пользовательские хуки должны начинаться со слова «использовать», чтобы соответствовать соглашению об именах React. Это также помогает быстро идентифицировать ловушки в вашем коде.
Пример: useFetch, useForm, useAuth.
При использовании таких перехватчиков, как useEffect, внутри пользовательского перехватчика, убедитесь, что зависимости обрабатываются правильно, чтобы избежать ошибок или ненужного повторного рендеринга.
Оптимизируйте свои пользовательские перехватчики, запоминая значения или используя такие перехватчики, как useCallback и useMemo, чтобы избежать повторного выполнения дорогостоящих вычислений или повторной выборки данных.
мы изучили концепцию пользовательских перехватчиков и их роль в упрощении и улучшении разработки приложений React. Создавая собственные перехватчики, вы можете инкапсулировать и повторно использовать логику с отслеживанием состояния, что помогает поддерживать чистоту и удобство обслуживания ваших компонентов.
Ознакомьтесь с проектом на GitHub: Мой репозиторий GitHub
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3