從零開始的React (3) - useState 和 useEffect

前言

本篇要介紹的是如何在react設定變數和Hook，由於最近在玩AI，所以利用AI產生了本篇文章，看看效果如何。

介紹

React Hooks 是 React 16.8 引入的一個功能，讓你在不編寫 class 的情況下使用 state 和其他 React 特性。useState 和 useEffect 是兩個最常用的 Hooks。

useState

useState 是一個 Hook，它允許你在函數組件中添加 state。它返回一個包含當前 state 和更新 state 的函數的數組。

使用方法 useState

javascript
1import React, { useState } from 'react';
2
3const Example = () => {
4  // 宣告一個新的 state 變量，叫做 "count"
5  const [count, setCount] = useState(0);
6
7  return (
8    <div>
9      <p>你點擊了 {count} 次</p>
10      <button onClick={() => setCount(count + 1)}>
11        點擊我
12      </button>
13    </div>
14  );
15};

詳細說明 useState

• 初始化 state：useState 的參數是 state 的初始值。在這個例子中，count 的初始值是 0。
• 讀取 state：你可以直接使用 count 來讀取當前的 state 值。
• 更新 state：使用 setCount 函數來更新 state。每次調用 setCount，React 都會重新渲染組件並顯示最新的 state 值。

useEffect

useEffect 是一個 Hook，它允許你在函數組件中執行副作用操作。副作用操作包括數據獲取、訂閱、手動更改 DOM 等。

使用方法 useEffect

javascript
1import React, { useState, useEffect } from 'react';
2
3const Example = () => {
4  const [count, setCount] = useState(0);
5
6  // 相當於 componentDidMount 和 componentDidUpdate:
7  useEffect(() => {
8    // 使用瀏覽器 API 更新文檔標題
9    document.title = `你點擊了 ${count} 次`;
10  });
11
12  return (
13    <div>
14      <p>你點擊了 {count} 次</p>
15      <button onClick={() => setCount(count + 1)}>
16        點擊我
17      </button>
18    </div>
19  );
20};

詳細說明 useEffect

• 執行副作用：useEffect 接受一個函數作為參數，這個函數會在組件渲染後執行。每次渲染後，useEffect 都會執行這個函數。
• 清理副作用：如果你的副作用需要清理（例如訂閱或計時器），可以在 useEffect 函數中返回一個清理函數。

javascript
1useEffect(() => {
2  const timer = setInterval(() => {
3    console.log('計時器運行中');
4  }, 1000);
5
6  // 清理計時器
7  return () => clearInterval(timer);
8}, []);

• 依賴陣列：你可以傳遞一個依賴陣列作為 useEffect 的第二個參數，只有當依賴陣列中的值發生變化時，useEffect 才會執行。

javascript
1useEffect(() => {
2  document.title = `你點擊了 ${count} 次`;
3}, [count]); // 只有當 count 改變時才會重新執行

最後

就上述來看，使用AI來產生教學文章的效果還是不錯的，但這裡我要要提醒一下，雖然AI可以幫助我們省去收尋和創造文章的時間，但說到底還是要自身學會後這項技術才真正屬於你。