1.17 什么是组件的状态及useState函数

一、组件的状态

1. 随时间变化的数据被称为状态(state)，状态是可以进行数据驱动视图的，而普通变量是不行的

   function App() {
     let count: number = 0
     const handleClick = () => {
       count++
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>点击</button>
         {count}
       </>
     )
   }
   
   export default App
   

   状态不可以直接修改！！！

   于是上述代码并未实现++操作

二、useState函数

1. 上述代码并未实现点击按钮实现数字的自加操作

2. useState可创建状态和修改状态的方法

3. 使用React自带的useState函数进行改造：

   import { useState } from 'react'
   
   function App() {
     // 定义count，通过setCount来操作，通过useState(0)赋予初始值为0
     const [count, setCount] = useState(0)
     const handleClick = () => {
       setCount(count + 1)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>点击</button>
         {count}
       </>
     )
   }
   
   export default App