React Hooks学习之路【1】

想学习的心终于到达了极点，对照着中英文档、以及一些优质博客对React Hooks进行学习和延伸。
从内置的Hook到自定义Hook。主要是看英文文档，如果有理解错误的地方欢迎指正~

这一篇主要是介绍React Hook是什么、使用规则、以及useState、useEffect的用法、运行机制、自定义组件的用法。

1. 什么是React Hooks，它解决了什么？

A Hook is a special function that lets you “hook into” React features.there names always start with 'use'

React Hooks是16.8的新特性，允许我们不写class组件也可以使用state和其他React特性，hook本质是一个function

2.使用规则

需满足可使用插件自动执行这些规则

• 在function component里使用
• 在自定义Hook中使用
• 不能在循环、条件、嵌套语句里使用hook。如此是为了保证hook每次render的调用执行顺序不变【如果想，可以在钩子内部使用】
• 在function component最顶层调用确保hook在每一次渲染中都按照同样的顺序被调用，这让react能够在多次useState、useEffect调用之间保持hook状态的正确【其实这里刚开始看并不能理解，需要多看看解释和代码】

两个插件约束此规则

npm install eslint-plugin-react-hooks --save-dev

// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

3. 基础的Hooks用法

useState

是一个可以让我们在函数组件里添加React state的钩子， 什么时候可以使用Hook呢？如果有一个function component并且它也需要一些自己的state去维护，之前的写法是抽象出来一个class component，但是现在我们直接可以在function component里使用useState钩子。
useState的用法如下方代码，注释是在控制台打出的，可以类比React的state来理解。

const [count, setCount] = useState(0);
//  在控制台打印出useState(0)的值，是一个数组  [0, ƒ] ，第一个元素是传入的初始值 可以是基本类型 / 引用类型，
//  第二个是函数  a function that updates it.  
//  []是数组的解构赋值
//  值的更新   s