iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
Modern Web

現在就學React.js 系列 第 10

第一個hook -useState - Day 10

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20240924/20159895m3CDr8OmwU.png

今日要來了解 狀態(state)的使用,為何會有state呢?
React提供了一個方法,來監控資料的變化,
當資料內容有變動時,畫面就會被更新。
我們要來學習第一個 React hoot - useState。

React State

Sate是一種用於儲存在組件內部的狀態或資料,
當State改變時,組件就會重新渲染,更新畫面。

基本寫法如下:

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

useState 函式會返回一個陣列,

通常使用 陣列解構 取出兩個元素

  1. 想要監控的資料- 用於存放變數的資料 。
  2. 更新資料的方法- 這是用於改變資料的方法,名稱可以自己取 (通常以 set 開頭)。

再看一個實作的範例:

import React, {useState} from 'react'

function Counter() {
  // 使用 useState 宣告一個名為 count 的 state 變數,初始值為 0
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>你點擊了 {count} 次</p>
      {/* 點擊按鈕時,呼叫 setCount 函式更新 count 的值 */}
      <button onClick={() => setCount(count + 1)}>點擊我</button>
    </div>
  )
}

export default Counter

useState 的運行

在上面的範例中,首先用 useState(0) 來定義
初始值是 0 的 state 變數 count
以及更新 countsetCount 函式。

當點擊到按鈕時,setCount 函式被觸發將 count 的值增加 1
state 的改變,React 會重新渲染元件(re-render),更新畫面來顯示最新的 count 值。
而 useState 是可以傳入各種型別的,如數字、字串、布林、陣列、物件

看下方的範例:

import React, { useState } from 'react';

// 數字計數器
function NumberCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>數字計數器</h2>
      <p>目前數字是 {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

// 字串顯示
function Greeting() {
  const [name, setName] = useState('Alice');

  return (
    <div>
      <h2>字串顯示</h2>
      <p>你好, {name}!</p>
      <button onClick={() => setName('Bob')}>變更名字</button>
    </div>
  );
}

// Bollean開關
function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <h2>Bollean開關</h2>
      <p>開關狀態: {isOn ? '開啟' : '關閉'}</p>
      <button onClick={() => setIsOn(!isOn)}>切換</button>
    </div>
  );
}

// 陣列任務清單
function TodoList() {
  const [todos, setTodos] = useState(['學習 React', '寫測試']);

  const addTodo = () => {
    setTodos([...todos, '新任務']);
  };

  return (
    <div>
      <h2>陣列任務清單</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>新增任務</button>
    </div>
  );
}

// 物件用戶資料
function UserProfile() {
  const [profile, setProfile] = useState({ name: 'Alice', age: 25 });

  const updateName = () => {
    setProfile({ ...profile, name: 'Bob' });
  };

  return (
    <div>
      <h2>物件用戶資料</h2>
      <p>名字: {profile.name}</p>
      <p>年齡: {profile.age}</p>
      <button onClick={updateName}>更改名字</button>
    </div>
  );
}

function App() {
  return (
    <>
      <NumberCounter />
      <Greeting />
      <Toggle />
      <TodoList />
      <UserProfile />
    </>
  );
}

export default App;

使用 Hook 的兩個重要規則

在學習使用 React Hook 時,有兩個非常重要的規則必須遵守,這樣才能確保程式的正常運作。

1. 只在最上層呼叫 Hook

  • 不要在迴圈、條件式或巢狀函式內呼叫 Hook。 Hook 應該在函式的「最上層」呼叫,而不是在任何條件判斷(如 if)或迴圈內呼叫。

  • 為什麼這麼做? 當 React 每次渲染你的元件時,Hook 都必須以相同的順序被呼叫。這樣 React 才能正確地追蹤每個 Hook 的狀態。如果你在迴圈或條件式內呼叫 Hook,這個順序可能會改變,導致 React 無法正常工作。

  • 簡單範例:

    // 正確:在函式的最上層呼叫 Hook
    function MyComponent() {
      const [count, setCount] = useState(0); // 正確
    
      if (count > 0) {
        // 錯誤:不要在條件判斷內呼叫 Hook
        // const [error, setError] = useState(null);
      }
    
      return <div>{count}</div>;
    }
    
    

2. 只在 React 元件或自定義 Hook 中呼叫 Hook

  • 不在一般的 JavaScript 函式中呼叫 Hook。 Hook 應該只在 React 元件的函式內部,或是在自定義 Hook 中被使用。

  • 為什麼這麼做? 這樣可以確保所有與狀態相關的邏輯都在 React 元件內處理,並且讓你的程式碼更加清晰可見。

  • 簡單範例:

    
    // 正確:在 React 元件中使用 Hook
    function MyComponent() {
      const [count, setCount] = useState(0); // 正確
      return <div>{count}</div>;
    }
    
    // 正確:在自定義 Hook 中使用 Hook
    function useCustomHook() {
      const [state, setState] = useState(0); // 正確
      return state;
    }
    
    //錯誤:在一般函式中使用 Hook
    function regularFunction() {
      // const [value, setValue] = useState(0); // 錯誤
    }
    
    

透過遵守這兩條規則,你可以確保在每次元件渲染時,
React 能正確地追蹤狀態和效果,讓應用程式運行更加順暢。

總結:

  • 狀態管理 是 React 核心的一部分,而 useState 則是最常用的 Hook,它讓你能夠在元件中輕鬆追蹤和更新狀態。
  • 遵循 React 的 Hook 規則,能避免常見的錯誤,並讓程式碼結構更清晰。
  • 無論是處理簡單數據還是複雜物件,useState 都能靈活應用,讓元件在資料改變時自動更新,從而提升使用者體驗。

參考資料:

後記

本文將會同步更新到我的部落格


上一篇
事件處理 -event handlers - Day09
下一篇
updater function 更新 state - Day11
系列文
現在就學React.js 31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言