ReactJS - 使用 React Hooks 管理组件生命周期

您好，有志青年开发者們！今天，我們將踏上一段令人興奮的ReactJS之旅，聚焦於使用React Hooks來管理组件的生命周期。別擔心如果您是編程新手——我會一步步指導您，並提供清晰的解釋和大量的範例。那麼，我們一起來深入探討吧！

React Hooks 的介紹

在我們深入组件生命周期之前，讓我們先了解什麼是React Hooks。想像Hooks是特殊的工具，它們讓您能在不寫類的情況下使用狀態和其他React功能。它們就像是魔杖，賦予您功能性组件超能力！

Why Hooks？

在過去的日子裡（嗯，其實並不是那麼久遠，但在技術年華中），我們必須使用類组件來管理狀態和副作用。但類型可能會讓人感到困惑，特別是對初學者來說。Hooks簡化了這個過程，使我們的代碼更乾淨、更可重用。

组件的生命周期

就像我們人類一樣，React组件也有其生命周期。它們誕生（挂载），成長和變化（更新），最終不再需要（卸载）。理解這個生命周期對於創建高效的React應用程序至關重要。

组件生命的三個階段

1. 挂载：组件正在被添加到DOM中。
2. 更新：组件因為props或狀態的變化而重新渲染。
3. 卸载：组件正在從DOM中移除。

現在，讓我們看看如何使用Hooks來管理這些階段！

useState：管理组件狀態

useState Hook是您在功能性组件中添加狀態的首選工具。讓我們看一個範例：

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>您點擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
點擊我
</button>
</div>
);
}

在這個範例中，useState(0)初始化了一個狀態變量count，其值為0。setCount函數讓我們能夠更新這個狀態。每次點擊按鈕時，setCount(count + 1)被調用，增加計數並導致组件重新渲染。

useEffect：處理副作用

useEffect Hook就像是瑞士軍刀，用於在您的组件中管理副作用。它結合了類组件中多個生命週期方法的功能。

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
const [data, setData] = useState(null);

useEffect(() => {
// 這個副作用在每次渲染後運行
console.log('组件渲染了');

// 模擬API調用
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};

fetchData();

// 清理函數
return () => {
console.log('组件將卸载或重新渲染');
};
}, []); // 空的依賴數組意味著這個副作用只在挂载時運行一次

return (
<div>
{data ? <p>{data}</p> : <p>加載中...</p>}
</div>
);
}

這個範例演示了幾個關鍵概念：

1. 副作用在组件渲染後運行。
2. 我們正在模擬一個API調用以獲取數據。
3. 清理函數（由副作用返回）在组件卸载或副作用重新運行之前運行。
4. 空的依賴數組[]意味著這個副作用只在组件挂载時運行一次。

自定義Hooks：創建可重用邏輯

Hooks最强大的功能之一就是能夠創建自定義Hooks。這讓您能夠將组件邏輯提取到可重用的函數中。讓我們創建一個用於處理表單輸入的自定義Hook：

import { useState } from 'react';

function useInput(initialValue) {
const [value, setValue] = useState(initialValue);

const handleChange = (event) => {
setValue(event.target.value);
};

return [value, handleChange];
}

// 使用自定義Hook
function LoginForm() {
const [username, handleUsernameChange] = useInput('');
const [password, handlePasswordChange] = useInput('');

const handleSubmit = (event) => {
event.preventDefault();
console.log(`使用 ${username} 和 ${password} 進行登錄`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={handleUsernameChange}
placeholder="用戶名"
/>
<input
type="password"
value={password}
onChange={handlePasswordChange}
placeholder="密碼"
/>
<button type="submit">登錄</button>
</form>
);
}

這個自定義的useInput Hook封装了處理表單輸入的邏輯，使我們的LoginForm组件更加乾淨和可重用。

React 子组件屬性（包含）

React中的children屬性讓您能夠將组件作為數據傳遞給其他组件，提供了一種創建包裹组件的方式。這個概念通常被稱為“包含”。

function Panel({ children, title }) {
return (
<div className="panel">
<h2>{title}</h2>
{children}
</div>
);
}

function App() {
return (
<Panel title="歡迎">
<p>這是面板內容。</p>
<button>點擊我！</button>
</Panel>
);
}

在這個範例中，Panel组件可以包裹傳遞給它的任何子內容，使其高度可重用。

結論

我們今天涵蓋了很多內容！從理解React Hooks的基本知識到探索组件生命周期，甚至創建自定義Hooks。記住，熟練來自練習，所以不要害怕在您自己的項目中嘗試這些概念。

這裡是一個我們討論過的Hooks快速參考表：

Hook	用途	範例
useState	管理组件狀態	const [count, setCount] = useState(0);
useEffect	處理副作用	useEffect(() => { /* effect */ }, []);
自定義Hooks	創建可重用邏輯	const [value, handleChange] = useInput('');

快樂編程，願Hooks與您同在！

Credits: Image by storyset