Hooks是在React16.8新增的功能，以往要使用都需要靠class來做，以下舉個在React Conf 2018展示hooks的例子

// Class Component
import React, { useState } from 'react'

export default class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Mark'
        }
        this.handleNameChange = this.handleNameChange.bind(this)
    }

    handleNameChange(e) {
        this.setState({
            name: e.target.value
        })
    }

    render() {
        return (
            <div style={{ alignItems: 'center' }}>
                input:<input
                    value={this.state.name}
                    onChange={this.handleNameChange}
                />
                <p>{this.state.name}</p>
            </div>
        )
    }
}

// Functional Component
import React, { useState } from 'react'

export default function Greeting2(props) {
    const [name, setName] = useState('Mark2')

    function handleNameChange(e) {
        setName(e.target.value)
    }

    return (
        <div style={{ alignItems: 'center' }}>
            <input
                value={name}
                onChange={handleNameChange}
            />
            <p>{name}</p>
        </div>
    )
}

以上兩個範例就可明顯看出使用hook是很方便的一件事情，要使用hook首先要引入才能使用，這裡使用array解構賦值語法，useState 在使用時會回傳一個陣列，陣列中的第一個值就是 State 的初始內容，第二個值是一個方法，能夠以它直接更新對應 State，並要注意只能使用setState做更改，只要state改變就會重新render。

參考資料：

第一個 hook – useState、React Hooks 新手筆記、React官網、Function Component 的 State