React Hook useState 簡單範例

React Hook useState()簡單範例。

簡介

React的Function Component原本無法使用state，是stateless component（無狀態組件）；不過從React 16.8加入Hook特性後便能使用state了。

Hook專屬於Function Component，Class Compoennt中不能使用Hook，不過兩種Component可搭配使用。

範例

下面是使用Class Component的一個小功能，點選"Hello, John!"文字會變成Hello, Mary!"。

App.js

import React from 'react';
import './App.css';

function App() {
  return <Hello name="John" />
}

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: "John"}
  }

  render() {
    return (
      <h1 onClick={() => this.setState({name: "Mary"})}>
        Hello, {this.state.name}!
      </h1>
    )
  }
}

export default App;

下面改用Function Component搭配Hook的useState()來操作state，效果同上。

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

function App() {
  return <Hello name="John" />
}

function Hello(props) {
  // 宣告state變數name並設定初值"John"，回傳name及更新name的函式setName()
  const [name, setName] = useState("John") // useState is a 'Hook'

  // 點擊<h1>時呼叫setName()更新state變數name的值
  return <h1 onClick={() => setName("Mary")}>Hello, {name}!</h1>
}

export default App;

參考github。

• React - 使用 State Hook
• React - Hooks 常見問題
• React 建立組件 create component
• React Hook useEffect 簡單範例