最佳答案
引言
React Hooks 是 React 16.8 版本引入的一項重要特點，它容許在函數組件中利用狀況（state）跟其他 React 特點，而不須要利用類組件。Hooks 使得函數組件可能擁有類組件的一些特點，如狀況管理跟生命周期方法。本文將深刻剖析 React 中常用的多少個 Hooks 函數，幫助讀者輕鬆控制狀況管理與反感化處理。
useState：狀況管理的基本
useState 是 React 最常用的 Hook，它容許你在函數組件中增加跟管理外部狀況。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
關鍵點：
useState接收一個初始值，並前去一個包含以後狀況跟更新狀況的函數的數組。- 數組的第一個元素是狀況的值，第二個元素是用於更新狀況的函數。
useEffect：處理反感化
useEffect 用於在函數組件中履行反感化操縱，如數據獲取、訂閱或手動變動 DOM。
import React, { useState, useEffect } from 'react';
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => setData(data));
}, []); // 空依附數組表示只在組件掛載時履行一次
return (
<div>
<h1>Fetched Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
關鍵點：
useEffect接收一個回調函數，該函數會在組件襯著後履行。- 可選的第二個參數是一個依附數組，當依附數組中的值產生變更時，回調函數會重新履行。
useContext：拜訪 React 高低文
useContext 容許在函數組件中拜訪 React 高低文（context）東西。
import React, { useContext } from 'react';
import MyContext from './MyContext';
function MyComponent() {
const theme = useContext(MyContext);
return <div>{theme}</div>;
}
關鍵點：
useContext接收一個 context 東西。- 前去以後 context 的值。
useRef：獲取 DOM 元素的引用
useRef 用於獲取 DOM 元素的引用，或保存可變值。
import React, { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus the input</button>
</div>
);
}
關鍵點：
useRef前去一個可變的 ref 東西。- 該東西的
.current屬性被初始化為轉達的參數（初始值）。
總結
React Hooks 為函數組件帶來了富強的功能，使得狀況管理跟反感化處理變得愈加簡單。經由過程利用 useState、useEffect、useContext 跟 useRef 等常用 Hooks，開辟者可能輕鬆構建複雜的 React 利用順序。盼望本文能幫助讀者更好地懂得跟利用 React Hooks。