useState <函数组件>

hook在class组件内部不起作用，但是他可以用来替代class

hook是什么

它可以让使用者钩入react的特性

使用场景

当在编写函数组件的时候，需要添加状态state，使用hook

使用hook声明state

import React, { useState } from 'react';

function App() {
    // 声明一个叫 “count” 的 state 变量
    const [count, setCount] = useState(0)

    // .....
}

执行useState做了啥

useState会返回一个数组, 上面使用了数组解构，获取了返回数组的第一个和第二个参数([count, setCount]),count值为useState的传入参数，setCount是用来修改count值的函数（并且会触发App函数重新执行）
App函数在执行完之后就退出了，如果不使用hook，里面的局部变量都不会被保存，当第二次执行的时候又会是初始值。
App函数中使用了hook所有这些变量都被保存下来了，下次在执行App函数，useState函数就会返回之前的count值，状态得到了保存。

useState需要哪些参数

参数就需要一个，类型Any。用来赋值给他返回数组的第一项。

useState 的返回值

返回值正如上面说的，返回一个数组

读取state

因为是函数内部的变量，所以在App内部直接读取就好

<!-- 只要是函数内部，任意位置都可以访问得到 -->
<p>count is {count}</p>

更新state

更新state只能使用上面提到的setCount函数，因为它能触发App函数再次执行，并且视图也会跟着更新

<!-- 只要是函数内部，任意位置都可以访问得到 -->
<p>count is {count}</p>

useState 返回的设置函数 const [count, setCount] = useState(0)

const [count, setCount] = useState(0)
setCount(2) // ok
//type SetStateAction<S> = S | ((prevState: S) => S);
setCount((c) => { 
    //《《《最新的》》》《《《最新的》》》《《《最新的》》》《《《最新的》》》
    //回调的参数c是count的上一个值，《《《最新的》》》。在某些时候会用到
    return c 
}) // ok