在 React 中,Hooks 是特殊函數,可讓您在功能元件中使用狀態和其他 React 功能,而無需將它們轉換為類別元件。 React 16.8 中引入的鉤子使元件之間的邏輯重用、處理狀態管理以及管理資料獲取或訂閱等副作用變得更加容易,所有這些都在功能組件內進行。
useState 鉤子是管理功能元件狀態的基礎。您可以使用此鉤子無縫管理狀態,而不是透過 this.setState() 使用類別元件。
文法:
const [state, setState] = useState(initialState);
例如) 在此範例中,它使用值 0 初始化 count,並在按一下按鈕時使用 setCount 函數更新它。
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
useEffect 掛鉤可讓您處理元件中的副作用,例如取得資料、更新 DOM 或訂閱事件。
文法:
useEffect(() => { // Side effect logic return () => { // Cleanup }; }, [dependencies]);
例如) 在此範例中,useEffect 在元件安裝時從 API 取得資料。空數組 [] 作為第二個參數確保效果只會運行一次(如 componentDidMount)。
import React, { useState, useEffect } from 'react'; function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data)); }, []); return ( <div> {data ? <p>{data.title}</p> : <p>Loading...</p>} </div> ); }
當你的狀態邏輯變得更加複雜時,請考慮使用 useReducer 而不是 useState。它與 Redux 類似,但在組件層級。您可以使用它來管理基於操作類型的狀態轉換。
文法:
const [state, dispatch] = useReducer(reducer, initialState);
例如) 在此範例中,useReducer 處理兩個操作:遞增和遞減。您可以使用調度來根據這些操作觸發狀態更新。
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: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </div> ); }
useRef 鉤子提供了一種直接存取和操作 DOM 元素或跨渲染儲存可變值的方法,而不會導致重新渲染。
文法:
const myRef = useRef(initialValue);
例如) 在此範例中,useRef 允許直接存取輸入字段,從而能夠在單擊按鈕時以編程方式將其聚焦。
import React, { useRef } from 'react'; function InputFocus() { const inputRef = useRef(null); const handleFocus = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" /> <button onClick={handleFocus}>Focus Input</button> </div> ); }
鉤子的強大功能之一是您可以建立自訂鉤子來封裝和重複使用跨元件的邏輯。自訂鉤子從使用開始,只是可以使用其他鉤子的常規 JavaScript 函數。
例如) 在此範例中,useFetch 鉤子處理資料取得邏輯,並且可以在多個元件中重複使用。
import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch(url) .then(response => response.json()) .then(data => { setData(data); setLoading(false); }); }, [url]); return { data, loading }; } function App() { const { data, loading } = useFetch('https://api.example.com/data'); return <div>{loading ? <p>Loading...</p> : <p>{data.title}</p>}</div>; }
dispatch 方法可以與 useReducer 結合使用來建立切換狀態,這有助於處理模態、下拉清單或切換主題等元件。
例如) 調度方法中的切換操作在 true 和 false 之間切換 isVisible 狀態,從而切換內容的可見性。
import React, { useReducer } from 'react'; const initialState = { isVisible: false }; function reducer(state, action) { switch (action.type) { case 'toggle': return { isVisible: !state.isVisible }; default: return state; } } function ToggleComponent() { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <button onClick={() => dispatch({ type: 'toggle' })}> {state.isVisible ? 'Hide' : 'Show'} Details </button> {state.isVisible && <p>Here are the details...</p>} </div> ); }
如果您有興趣深入研究 Hooks 或為您的專案探索有用的自訂 Hooks,我強烈建議您查看 UseHooks.com。這是一個很棒的資源,有大量實用的自訂掛鉤可供您使用和學習。
以上是React Hooks 重點的詳細內容。更多資訊請關注PHP中文網其他相關文章!