React Hooks
Hooks 在 React 16.8 版本中被新增。
Hooks 允許函式元件訪問 state 和其他 React 功能。因此，類元件通常不再需要。
儘管 Hooks 通常會取代類元件，但 React 沒有移除類的計劃。
什麼是 Hook？
Hooks 允許我們“鉤入” React 功能，如 state 和生命週期方法。
示例
這是一個 Hook 的示例。如果它不明白，請不要擔心。我們將在 下一節 中進行更詳細的介紹。
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);你必須從 react import Hooks。
這裡我們使用 useState Hook 來跟蹤應用程式狀態。
State 通常指的是需要跟蹤的應用程式資料或屬性。
Hook 規則
Hooks 有 3 條規則
- Hooks 只能在 React 函式元件內呼叫。
- Hooks 只能在元件的頂層呼叫。
- Hooks 不能是條件性的
注意： Hooks 在 React 類元件中將無法工作。
自定義 Hooks
如果你有需要在多個元件中重用的狀態邏輯，你可以構建自己的自定義 Hooks。
我們將在 自定義 Hooks 部分 中提供更多詳細資訊。
