useState是怎麼回事？

這是我參與8月更文挑戰的第26天，活動詳情檢視： 8月更文挑戰

Hooks意為鈎子，React Hooks就是一堆鈎子函數，React通過這些鈎子函數對函數型元件進行增強，不同的鈎子函數提供了不同的功能。鈎子函數有一個特點，都是以use開頭。

為函數元件提供狀态

useState函數的内部是使用閉包來實作函數儲存狀态資料的。

useState的傳回值是什麼？

傳回值是一個數組，數組的第一項是狀态資料，第二項是設定狀态資料的方法，關于這個第二項的命名，我們一般采用set+狀态資料名的方法，請看下面的例子。

const [count,setCount] = useState(0);
複制代碼      

useState的細節

1. 接收唯一的參數即狀态初始值，初始值可以是任意資料類型。
2. 傳回值為數組，數組中存儲狀态值和更改狀态值的方法，方法名稱約定以set開頭，後面加上狀态名稱。
3. 方法可以被調用多次，用以儲存不同的狀态值。
4. 參數可以是一個函數，函數傳回什麼，初始狀态就是什麼，函數隻會被調用一次，用在初始值是動态值的情況。

function App(props) {
    const [count,setCount] = useState(() => {
        return props.count || 10;
    });
    const [person,setPerson] = useState({name: 'justin'})
    return (
        <div>
            <span>{count},{person.name}</span>
            <br />
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => setPerson({name: '國家'})}>點選切換name</button>
        </div>
    )
}
複制代碼      

useState更新狀态時是異步的

function App(props) {
    const [count,setCount] = useState(0);
    const [person,setPerson] = useState({name: 'justin'})
    function handleCount() {
        setCount(() => {
            return count + 1;
        })
        console.log(count);   // 列印的是0，說明是異步的
    }
    return (
        <div>
            <span>{count},{person.name}</span>
            <br />
            <button onClick={handleCount}>+1</button>
            <button onClick={() => setPerson({name: '國家'})}>點選切換name</button>
        </div>
    )
}
複制代碼      

讀取state

在class的寫法中，讀取state需要使用this.state，但是在hook寫法中，隻需要直接使用狀态的變量名即可。

為什麼叫useState而不叫createState?

因為Create一詞并不是很準确，因為state隻在元件首次渲染的時候被建立，在下一次重新渲染的時候，useState傳回給我們目前的state。