iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
0
自我挑戰組

為自己而寫,前端工程師之 30 天心得分享系列 第 28

[Day - 28] React Hooks useState 學習筆記

前言

這篇文章將會介紹 React Hooks,Hook 是 React 16.8 中增加的新功能。它讓我們不必寫 class Component 就能使用 state 以及其他 React 的功能。
下半部會列出本人目前在實際專案時,公司所提出的需求,哪針對這個需求,又是如何使用哪些 Hooks,來協助我們解決這些需求。

useState - 元件狀態管理

useState:使 Functional Component 能夠使用 state。
基本結構用法:const [state, setState] = useState(initialState)

  1. state 為我們要設置的狀態。
  2. setState 為更新 state 的方法,命名依照專案的需求而定。
  3. initialState 為初始的 state,可以是任意的資料型別,也可以是 callback Function,但要注意的是最後要 return 回一個值。
  4. 承上 3 點基本說明,以下是一個基礎範例說明。
import React, { useState } from 'react'

const Example = () => {
  // useState 採用 0 為初始值
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}
import React, { useState } from 'react'

const Example = () => {
  // useState 採用 callBack Function,必要 return 一個值
  const [count, setCount] = useState(() => {
    return 0
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

上一篇
[Day - 27] React Bootstrap 套件心得分享
下一篇
[Day - 29] React Hooks useEffect 學習筆記
系列文
為自己而寫,前端工程師之 30 天心得分享30

尚未有邦友留言

立即登入留言