理解state-hook

React-hook可以使用state-hook来管理state

如何使用呢？

1. useState是异步方法
2. 可以使用回调函数获取同步结果 setCount((count) => {return count})
3. 对于变量不可以使用 ++，-- 因为会直接更改变量
4. 更改对象的属性时需要使用回调函数处理
5. 变量值不改变不会任何变化，变量改变后整个组件也会更新

 import { useState } from 'react'
 
 export default () => {
     // 初始化数据
     const [count, setCount] = useState(0)
     const [state, setState] = useState({name: 'll', age: 10})
     
     const onChange = () => {
         // setCount(count + 1) // 点击让count加1
         // console.log(count)  // 0 先打印再加1，setCount是异步方法
         
         // setCount(count++) // error  count++等于count=count+1，相当于直接更改count
         
         // setCount(count) // 不会引发任何变化
         
         setCount((count) => { // 同步获取count，可以使用回调函数
            count++
            console.log(count) // 同步打印
            return count
         })
         
         setState((prevState) => { // 更改对象数据，因为react不会对属性合并，要通过回调函数处理
             return {
                 ...prevState, // 解构属性
                 age: prevState.age + 1 // 要更改的属性
             }
         })
     }
     
     return (
         <div>
             <p> {count} </p>
             <button onCLick={() => onChange}> change </button>
         </div>
     )
 }