React-React State Hook

state Hook

State Hook用于在函数组件中声明变量。在函数组件中，可以使用useState进行变量声明，通过const [count, setCount] = useState(0);进行声明，等价于class组件中的this.state = {count:0}，在读取时可以直接通过{count}进行读取。

声明state变量

调用 useState 方法的时候做了什么?
定义了state变量，因为useState其实相当于封装了this.state={}，二者功能是完全相同的；
useState需要哪些参数？
useState() 方法里面唯一的参数就是初始 state，在class组件中我们需要设置初始值的话必须将一个对象赋值给this.state，但是useState中只需要将要设置的值作为它的参数即可；

useState方法返回什么？
返回值为：当前 state 以及更新 state 的函数。这也是写成 const [count, setCount] = useState() 的原因，这与 class 里面 this.state.count 和 this.setState 类似，唯一区别就是你需要成对的获取它们；

  import React, { useState } from 'react';
  function Example() {
      const [count, setCount] = useState(0); // 设置初始值，解构赋值
      return (
          <div>
              <p>You clicked {count} times</p>
                 // 通过setCount直接改变state中count的值 
                 <button onClick={() => setCount(count + 1)}>
                 Click me
                </button>
              </div>
          );
      }

读取state

class组件
在使用class组件时获取state需要使用this.state.xxx即可，如
```javascript
You clicked {this.state.count} times

```

Hook组件
但是在hook中，因为使用了useState定义了state变了，则可以直接使用即可，如
```javascript
const [xxx, setXxx] = useState(0);
You clicked {xxx} times

```

更新state

class组件
在使用class组件时更新state需要使用this.setState({xxx: 111})即可，如

 <button onClick={() => this.setState({ xxx: this.state.xxx + 1 })}>
   Click me
 </button>

Hook组件
但是在hook中，使用useState定义的setXxx即可修改state值，如

   const [xxx, setXxx] = useState(0);
   <button onClick={() => setXxx(xxx + 1)}>
       Click me
   </button>

[]的作用

     const [xxx, setXxx] = useState(0);

在使用useState时，其实是同时创建两个变量，一个xxx，一个setXxx，并通过解构形式解构出来，等同于

     const data = useState('banana'); // 返回一个有两个元素的数组，初始化为banana
     const xxx = data[0]; // 数组里的第一个值, 即banana
     const setXxx = data[1]; // 数组里的第二个值，即setXxx函数

使用多个state变量

class组件
在class组件中，如果定义多个state变量，则需要

   this.state = {
       aaa: 111,
       bbb: 222,
       ccc: 333
   };

在需要更新state时，使用setState
 ```javascript
    this.setState({
        aaa: 444,
        bbb: 555,
        ccc: 666
    })
 ```

Hook组件
而在hook中，定义多个state变量，则通过多个useState进行定义即可
javascript const [aaa, setAaa] = useState(111); const [bbb, setAaa] = useState(222); const [ccc, setAaa] = useState(333);
在进行更新state时则需要通过每个单独的set方式进行更新
javascript setAaa(444) setBbb(555) setCcc(666)