React Hooks 徹底改變了 React 元件的狀態管理和函數重複使用，讓函數元件擁有類別元件的功能。
useState是React中最基本的Hook，它允許我們為功能元件新增狀態。 useState 是 React 提供的內建 Hook，用於新增本機狀態。它接受初始值作為參數並傳回一個陣列。陣列的第一個元素是目前狀態，第二個元素是更新狀態的函數。
import React, { useState } from 'react';
function Example() {
// Initialization status 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傳回的setCount函數用於更新狀態。每次呼叫 setCount 時，React 都會重新渲染元件並根據新的狀態值重新產生虛擬 DOM，然後執行高效的 DOM diff，最後更新實際 DOM。
useState 的工作原理、狀態更新的非同步性及其對效能的影響。
狀態更新是非同步的，這表示如果在相同事件循環中多次呼叫 setCount，React 將只使用最後一個值。
useState 不支援複雜物件的淺層比較。如果需要依照先前的狀態更新狀態，可以使用setCount的函數形式，如setCount(prevCount => prevCount 1).
結合useEffect來處理副作用，例如資料擷取和清理。
import React, { useState, useEffect } from 'react';
function Example() {
// Initialization state
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Data acquisition function
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch('https://api.example.com/data');
const json = await response.json();
setData(json);
setError(null);
} catch (err) {
setError(err.message);
setData(null);
} finally {
setLoading(false);
}
};
// useEffect monitors data changes and executes when rendering for the first time
useEffect(() => {
fetchData();
}, []);
// Rendering the UI
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
<h1>Data Retrieved Successfully</h1>
<pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
程式碼範例解讀：首先我們使用useState建立三個狀態變數：data儲存取得的數據，loading表示資料是否正在加載，error儲存任何可能的錯誤訊息。
然後，我們定義一個fetchData函數用於非同步資料取得。此函數包含錯誤處理和狀態更新邏輯。
接下來，我們使用useEffect來進行資料收集。 useEffect 的第二個參數是依賴數組。這裡傳遞空數組表示元件掛載後只執行一次，也就是第一次渲染時取得資料。這確保了在元件載入時獲取數據，而不是每次更新狀態時重新獲取數據。
在useEffect的回呼函數中，我們呼叫了fetchData函數。由於fetchData改變了data、loading、error的值，所以不需要將這些狀態變數加入到依賴數組中，因為它們的改變會觸發元件的重新渲染，從而自動執行新的資料擷取。
useContext 用於跨元件傳遞數據，無需明確傳遞 props。
首先，我們需要建立一個上下文：
import React, { useState } from 'react';
function Example() {
// Initialization status 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>
);
}
然後在元件中使用useContext：
從 'react' 匯入 React, { useContext };
從'./ThemeContext'導入{ThemeContext}；
函數按鈕（）{
const 主題 = useContext(ThemeContext);
返回 （
<h4>
深入了解
</h4>
結合useState和useContext，我們可以建立一個具有主題切換功能的計數器應用程式：
從 'react' 匯入 React, { createContext, useState, useContext };
// 建立主題上下文
const ThemeContext = createContext('light');
函數 ThemeProvider({ 兒童 }) {
const [主題，setTheme] = useState('light');
返回 （
<themecontext.provider value="{主題}">
{孩子}
setTheme(主題 === 'light' ? 'dark' : 'light')}>
切換主題
按鈕>
</themecontext.provider>
）；
}
函數計數器() {
const 主題 = useContext(ThemeContext);
const [count, setCount] = useState(0);
返回 （
<div>
<p>程式碼範例解釋：ThemeProvider使用useState管理主題狀態，Counter元件透過useContext訂閱主題並使用useState管理計數器狀態。當主題切換時，Counter 會重新渲染，顯示對應主題的顏色。 </p>
</div>
以上是React Hooks 實踐：從 useState 到 useContext 的深入分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
