Day12 Functional Component的state - useState

介绍完後从外部传入的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未更改前的预设资料画面