iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
5
Modern Web

在 React 生態圈內打滾的一年 feat. TypeScript系列 第 9

Day08 | Function Component 的 State 在哪裡

前言

本篇主要會說明,在 Hooks 讓 Function Component 具備 State 後,該如何使用及設置。


前置準備

  1. 文中的專案會以 Day05 的專案架構繼續講解,如果未跟到進度,可以從 GitHub 上 Clone 下來。
  2. 一顆擁有學習熱忱的心。

使用方法

useState

首先打開 src/index.jsx 中,裡面有先前設置的一個 Main Component:

這個 Main 目前是沒有 State 的 Component ,也就是上一篇提到的 Stateless Component。

接著要從 react 套件中,把 useStateimport 進檔案中:

import React, { useState } from 'react';

useState 在使用時會回傳一個陣列,陣列中的第一個值就是 State 的初始內容,第二個值是一個方法,能夠以它直接更新對應 State。

以下是幾個簡單的使用範例:

// 會回傳一個陣列, count 為 0 , setCount 用來設置 count
const [count, setCount] = useState(0);

// 更新 count 至 1
setCount(1)

// name 的初始值為 '神 Q 超人' , 用 setName 可以設置 name
const [name, setName] = useState('神 Q 超人');

// 更新 name 至 '小馬彬'
setName('小馬彬');

了解基本的使用方式後,下方逐步將 Main 變成一個簡單的計數器,就像上一篇的範例。

Step1 加入 useState

Step2 把 h1 的內容從 'Hi JSX!' 變成 Count

Step3 新增 button,點擊後用 setCount 讓 count+1

完成後便可使用指令 npm run start 執行專案,就能看到剛剛製作的畫面:

點擊按鈕會觸發 State 改變,畫面 Render 新 State 的結果:

與 Class 不同的部分除了 Component 更簡潔外,要注意取用 State 時不需以 this,更新時也不必用物件作更新:this.setState({ count: this.state.count + 1 ,}),因為每個 State 都由不同的 useState 建立,所以只需要呼叫各自的更新方法就好。

本文的原始碼內容會放置於 GitHub 上,歡迎各位參考使用。


結尾

本文提到的 useState 只是 Hooks 的一小部分而已,就像是當初我們翻著獵人,然後聽見小傑他爸說:「其實我們的世界還有外面,嵌合蟻只是外面世界的小部分。」,而嵌合蟻就像 useState,除了它以外,Hooks 也有很多有趣的功能,之後會再一一向大家介紹!

如果文章中有任何問題,或是不理解的地方,都可以留言告訴我!謝謝大家!


上一篇
Day07 | 從 Hooks 開始的 Component 新生活
下一篇
Day09 | 掌管 Lifecycle 和一切作用的 useEffect
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31

尚未有邦友留言

立即登入留言