介紹完後從外部傳入的Props後，我們來講React的第二種資料模組 - state
系列中會主要以Functional Component的功能為主。

在先前，React只能在Class Component中使用state存放資料，但在React 16.8 之後增加了Hook！ 之中增加的新功能，讓Functional component使用原本不能使用的 state 以及生命週期功能，讓Functional component的運用方式更加多元。

useState

Hook中的useState中提供了的類似於Class Component的state功能，讓Functional元件裡能有獨立的資料模組，不會和其他元件資料互相影響。

如何使用useState

需要在一開始引入useState

import React, { useState } from 'react';

useState放置的位置，在Functional Component函式中的return之前

function App() {

	//可以在這宣告變數使用useState()

  return //省略...
}

宣告變數分別對應useState()回傳值的陣列中的值：

• text：宣告名為text的state變數 -可以在 useState()中的傳入的參數作為text這個state變數資料的預設值。
• setText ：更改state變數的函式名稱，text這個state只能透過setText()去變動資料，通常命名使用set+State變數名的小駝峰寫法。

const [text, setText]= useState('預設文字');

將useState()使用在component裡面看看

import React, { useState } from 'react';
import './App.css';

function App() {

  const [text, setText]= useState('預設文字'); //宣告變數使用useState
  

  return(
    <div className="App">
      <p>輸入文字：<span>{text}</span></p>
      <input  onChange={(event)=> setText(event.target.value)} />
    </div>
  );
}

export default App;

在input裡面在onChange中，把輸入的value透過{ }中使用我們自訂的setText()回傳變動的文字。

state未更改前的預設資料畫面

在input輸入"text文字改變囉！"來改變state，顯示在中

成功更改state囉～