網頁

2021/7/23

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



沒有留言:

張貼留言