前言
先简单说一下Hooks是什么，在写React组件时候，有两种写法，一种是类写法，一种就是函数写法，Hooks主要服务的对象还是函数组件，因为函数组件相对类组件有些功能确实不好实现，比如生命周期钩子，Hooks就是让函数组件具有类组件能力的一个东西，Hooks的出现会给我们带来另外一种组件实现思路，一直看到有些小伙伴们问Hooks会不会代替Redux，emmm...我觉得这应该不是一个概念吧，这些小伙伴不必担心。
Tips：按照惯例声明，笔者也是入门级选手，所写文章深度不会达到大佬的文章水平，只希望能对像我一样的入门级小伙伴有所帮助。
文字说明会很长，只有例子最明了
先来看一个可以管理状态的组件在React中怎样写
import React from 'react'
class Counter extends React.Component {
state = {
count: 0
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState({
count: this.state.count + 1
})
}, 1000);
}
componentWillUnmount() {
if(this.interval) {
clearInterval(this.interval)
}
}
render() {
return (
<div>count is : {this.state.count}</div>
)
}
}
export default Counter;
复制代码
以上代码写了一个简单的计数器组件，管理了一个count状态（就是一个名字叫count的数据），在组件加载完成后，执行定时器，将count状态每秒+1，在组件要被卸载之前清除定时器(不清除会一直占用内存，可能导致内存泄漏)。这里添加定时器和卸载定时器都是通过生命周期钩子来实现的，在Hooks引入之前，函数组件无法使用生命周期函数的，所以无法完成上述的状态管理功能。
引入Hooks，让函数组件也可以完成状态管理
先简单使用两个Hooks，下文还会详细介绍
import React, {useState, useEffect} from 'react'
function CounterFunc() {
const [count, setCount] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
setCount(c => c + 1)
},1000)
return () => clearInterval(interval)
},[])
return (
<div>count is : {count}</div>
)
}
export default CounterFunc;
复制代码
这里直接上了一段代码，在最开头引入了两个函数:useState和useEffect。
在函数组件CounterFunc中，通过useState(0)来设置count的值，这里useState(0)会返回一个数组，数组第一个元素就是被赋值为0的变量，第二个元素是可以对第一个元素重新设置值得函数。我们这里通过数组解构的方式，将这两个元素分别赋值给count和setCount，(如果不了解ES6的解构赋值，请先查阅阮一峰老师ES6书籍的相关部分)。
我们还用了useEffect()函数，在函数里定义了一个定时器，然后返回了一个函数，在返回的函数中清除了定时器，这个被返回的函数就相当于类组件中的componentWillUnmount()生命周子函数了。而这个useEffect()函数本身又相当于componentDidMount()生命周期函数。
至此我们也能很轻松理解useState其实就相当于类组件中设置state的部分，它返回的数组第二个元素setCount()是一个高阶函数，我们需要传入一个c => c + 1作为参数，这个高阶函数会将count传进c => c + 1并将计算后的值重新赋值给count。
State Hooks
useState()
对于状态管理的Hooks，上面已经介绍了
useState()，这里会再加一个useReducer(),useReducer才是基础的状态管理Hook
useState(0)
对useState传递的0只是对状态设置了一个默认值，状态改变后他就没用了。
它返回的两个元素我想大家应该也都清楚是什么东西了，但是这里要说的是第二个元素，它有两种用法
-
setCount( 100 )传递一个确定的值 -
setCount( c => c + 1)传递一个函数，我们上面使用的方式
这里说明一下我们上面为什么不用setCount( count + 1 )的方式，有兴趣的小伙伴可以试试，这样我们页面的结果始终都是1，而不是预期的1,2,3...... 为什么会发生这种事？这是由于闭包造成的，在state更新后，会重新执行我们创建的函数组件，这时候const [count, setCount] = useState(0)这段代码会重新执行一遍，count每次都会被重置为0，然后更新为1。
闭包插曲：
上面说到了闭包，本来不想单独说闭包，但是想了想，Hooks应该算是走函数式编程的道路吧，在学Hooks时候，我们会遇到很多奇怪的现象，导致小伙伴感觉很难，其实很大程度上跟没掌握好闭包有很大关系。这里就简单说一下。
Tips: 请注意，如果你看别的文章从未搞懂过闭包，别担心，这里我还是有信心让90%看我文章的人搞清楚什么是闭包。有基础的直接跳过！！！
要说闭包先说作用域
我们这里撇开let,const定义变量的方式，回归初心var 在JavaScript中，ES6出现之前是没有块级作用域的，但是它有个东西叫做函数作用域
var glob = '我是最外层定义的变量'
function func1() {
console.log(glob) // 这里可以引用上层的变量
var f1 = '我是func1中的变量'
function func1_1() {
var f1_1 = '我是函数func1_1中的变量'
console.log(glob)
console.log(f1) // 这里可以拿到上一层函数中定义的变量和最外层的变量
}
function func1_1() {
console.log(glob) // 这里可以拿到最外层的变量
console.log(f1_1) // 但是拿不到同一级别函数定义的变量
}
}
复制代码
上面这代码和注释相信能让大家看懂一点JavaScript中的作用域。一个函数，是不能拿到同级别函数里面定义的变量，但是能拿到父级，爷爷级，爷爷爷级函数定义的变量。我们可以利用这里特性对变量进行封装。
function func1(param) {
var f1 = '只让我的子孙拿到的变量‘
var f2 = param; // 这里把param赋值给f2，它也只能被自己子孙拿到
function func1_1() {
console.log(f1, f2) //都能拿到
}
return func1_1
}
console.log(f1, f2) //两个都拿不到，报错
var res1 = func1('hello') // 你猜他的结果是什么。
// 它的结果是一个函数，就是我们返回的func1_1这个函数，猜错的自己罚自己，给我点个赞，哈哈哈。
res1() // res1存放的就是返回的func1_1,所以再把它执行一遍
//打印出 `只让我的子孙拿到的变量hello`
复制代码
其实在我们执行func1('hello')之后，func1的生命周期就结束了，本来，它里面定义的f1,f2都应该在它生命周期结束后就再也访问不到了，但是幸运的是，func1_1替他保存下了这两个变量，使得func1还没有死透
这样封装变量就是闭包。
闭包插曲结束
继续上面的来说
我们可以通过setCount(c => c + 1)传入回调函数的方式避免闭包带来的奇怪现象。
useReducer
function countReducer(state, action) {
switch(action.type) {
case 'add':
return state + 1;
case 'minus':
return state - 1;
default:
return state
}
}
......
// const [count, setCount] = useState(0)
const [count, dispatchCount] = useReducer(countReducer,0);
......
// setCount(c => c + 1)
dispatchCount({ type: 'add' })
......
复制代码
首先我们先在CounterFunc外面定义一个reducer,然后更改count的定义，以及count的更新，这里useReducer的使用跟 redux中操作很像，后面会持续更新Redux的使用，请有需要的小伙伴关注一下，顺手给个赞。
要注意的是，useReducer(countReducer,0)的两个参数，第一个是定义的countReducer第二个是默认值。我们接收返回值的第二个元素固定写为dispach，或者这里写的dispachCount的格式。
小结
这里主要分享了5个知识点，一个是函数组件与类组件的区别，一个是useState, 再一个useEffect（后面会详细说）,然后介绍了闭包，最后说明了useReducer的使用，相信认真看到这里的小伙伴对于React的Hooks已经有了个初步了解，并且对闭包不熟悉的小伙伴也已经对闭包有了深入认识吧。
作者：king王一帅
链接：https://juejin.cn/post/6844903830841196552
