hooks使用之useState

useState is a React Hook that lets you add a state variable to your component.

useState 是一个react hook 他可以在你的组中定义状态

Call useState at the top level of your component to declare a state variable.

他这个意思再整个作用域的最顶层不是代码书写的最顶层

不要把 statehook 写到块级作用域中, 如果你给useState 传递的初始化的值是一个函数 那么他必须是一个纯函数

纯函数: 就是如果我的参数永远一致, 那么我的返回值永远一致, 换句话说就是函数的执行不会依赖任何其他外部因素

function add(a,b) {
    return a+b
}
add(1,2)
add(1,2)
add(1,2)
add(1,2)

不仅要是纯函数 还得是没有参数 [因为react再调用你的合格initializer-function的时候是不会给你传参数]

const [state, setState] = useState(() => return 1)

The set function returned by useState lets you update the state to a different value and trigger a re-render.

UseState返回的set函数允许您将状态更新为不同的值并触发重新呈现。

function App() {
    const [obj, setObj] = useState({
        a:1,
        b:2
    })

    const updateObjVal = () => {
        // 如果是更新引用值的状态 , 我们必须传递一个新的引用
        // immutable state 不可变状态  就是你每一次给状态传递的值都是不可变化的 也就是意味着这个值是一次性的 
        // 如果你想要便跟状态  则要传递一个新的值进去
        setObj(prev => {
            return {...prev,b:3}
        })
    }
    return (
        <div onClick={updateObjVal}>
            a: {obj.a}
            b: {obj.b}
        </div>
    )
}