iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

白話JavaScript系列 第 21

Day21-State

前言

昨日我們學會了Props,而Props是由外傳進來的資料,進而改變組件。而組件本身的狀態我們稱為State。

另外昨日忘記說明React對於Props是唯讀的,跟Vue可以傳遞資料給父組件有些微差異。

State

不同於Props是唯讀,State是可以進行操作改變資料。

而在React中,沒錯!!!,聰明如你應該想到React中的State = 資料,但我們通常會稱為狀態(State)。

以下對話:
A: 這個組件的狀態怎麼有點奇怪
B: 你先把狀態設為預設值看有沒有變化

那要如何使用State???

useState

在function component中如果要使用State,我們必須從React中引入useState

import {useState} from 'react'

我們把useState打印出來看看

  const a = useState()
  console.log(a);

https://ithelp.ithome.com.tw/upload/images/20210919/20130419EblsK8EHEi.png

可以看到useState是個array,並且useState[0]為初始值,useState[1]為修改值的函式。

當我們把useState初始值設為100,即代表當前組件的State為100

  const a = useState(100)
  console.log(a);

https://ithelp.ithome.com.tw/upload/images/20210919/20130419FP7nyNkeQY.png

但你想喔,如果我們每次使用State都要用useState[0]、useState[1]操作我們的狀態,是不是很麻煩???

我們可以使用解構賦值來取用陣列,並且修改函式我們會使用駝峰寫法並且set為前綴。

import {useState} from 'react'

function App() {
  const [number, setNumber] = useState(100)
  return (
    <div className="App">
      {number} //100
    </div>
  );
}
export default App;

setState

我們新增一個Change的button並且綁定onClick事件。

這邊注意一下在React中的事件通常為駝峰寫法!!!

並且每按一次我們都會使number + 1。

import {useState} from 'react'

function App() {
  const [number, setNumber] = useState(100)
  const changFN = () => {
    setNumber(number + 1)
  }
  return (
    <div className="App">
      {number}
      <button onClick={changFN}>Change</button>
    </div>
  );
}
export default App;

各位可以實際操作一次,並且打開開發者檢查。

你會發現,當我們每次更改number的數值,只會有number的element做更動,這也是Virtual DOM能夠使性能優化更好。

/images/emoticon/emoticon01.gif


上一篇
Day20-Props
下一篇
Day22-生命週期
系列文
白話JavaScript28

尚未有邦友留言

立即登入留言