了解react-hook以及State Hook

react更新到16.8版本后最主要的内容就是增加了hook这个特性，它的主要作用可以理解为对react的函数组件进行了一次升级，使react的函数组件拥有了和react类组件一样的功能（关于以前版本react的组件的介绍可以移步到这里观看：react创建组件的几种方法，以及区别）。

---

Hook是什么：

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。
React 内置了一些像 useState 这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。

---

首先我们来学习第一个hook

useState()

import React, { useState } from 'react'

export default function Main() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )
}

使用步骤：

1. 首先引入从’react’中引入useState。
2. 在return之前定义一个数组，数组里面有俩个参数，第一个相当于类组件当中的this.state.xxx，而第二个参数就是一个方法，改变前一个参数值的方法。赋值为上面导入的useState()括号里面设置初始值，传递多个参数无用，只会找到你的第一个参数然后解构给你的数组第一个值。我们控制台输出一下useState()会更直观一些。

console.log(useState())
console.log(useState(1))
console.log(useState('12',55))

输出结果如下：

可以看到，我们如果不给初始值的话就是undefined，如果给多个值的话会忽略后面的值。PS：定义初始值的时候要注意数据类型哦。
第二个参数的方法就是用来改变这个值的。

<button onClick={() => setCount(count + 1)}>
  Click me
</button>

此例子在button按钮每次被点击的时候就会使count+1。

在一个组件内部可以创建多个State变量。

const [count, setCount] = useState(0);
const [age, setAge] = useState(16);
const [name, setName] = useState('吴小迪');

注意点：
state变量名或者函数名是不可以重复的哦，需要保证每一个都是唯一的。否则就会报错！

const [count, setCount] = useState(0);
const [count, setCount] = useState(0);