React进阶 会使用Hook吗？
紫棋的一句想要我帮你唱hook吗？让hook红了一把！
做为一个开发，尤其是前端开发，在电视上听到这个词还是有点小兴奋的（虽然彼hook非此hook）。玩够这个梗，是不是也要了解一下自己的react hook？
一、why hook
使用react有一段时间了，组件化编程也早已成为习惯。常用的两种编写组件的方式就是就是class组件和函数组件。
class组件：通过继承React.Component来构建组件，虽然提供了state状态和完备的生命周期函数，但是也有很多不方便的地方。
- 很多事件需要在挂载期componentDidMount和更新期componentDidUpdate重复书写。有些副作用还需要在卸载期componentWillUnmount卸载。代码重复度很高，而且难以理解，一旦忘记了就会引起不少bug。
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
ChatAPI.subscribeToFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
componentWillUnmount() {
ChatAPI.unsubscribeFromFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}- 通过class书写自然会碰到 this 的问题，要想使用this函数不能忘记绑定。代码十分冗余。
函数组件：通过函数直接书写的组件，看起来是简洁了许多，但是不能使用state，也没有生命周期函数、更不能使用react的一些其他特性。只能通过父组件传递进来，任人鱼肉，只能惨淡的沦为展示组件。
那么，函数组件就只能沦为展示的花瓶吗？能结合class组件能使用react特性的优点和函数组件简洁优雅的特性吗？好在react hook来了，函数组件的春天来了。
React 16.8 新增Hook特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
二、 what's hook
是不是感觉hook挺神奇的？hook是什么？怎么使用？不用惊讶，hook就是一个钩子函数，钩着react的一些api供给函数组件使用。
先看一个官方的useState例子：
import React, { useState } from 'react';
function Example() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}引入一个hook（useState函数），传入一个初始值0，然后函数返回了一个数组，通过数组的结构赋值，取得state， count = 0和修改count值的函数setCount。当button发生点击事件时，触发setCount函数，并且传入新的count值完成对state值的修改，并展示到页面上。代码转换成class组件如下：
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}看明白了吗？
Hook概念
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等（context、refs）特性的函数。
React 内置了一些像 useState 这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。
hook使用规则
一个组件中可以使用多个hook，每个hook会独立存在，内部状态不会共用。每次更新组件时，hook会按顺序从上到下执行。
function Form() {
// 1. Use the name state variable
const [name, setName] = useState('Mary');
// 2. Use the age state variable
const [age, setAge] = useState('12');
// 3. Use the surname state variable
const [surname, setSurname] = useState('Poppins');
// ...
}
第一次执行结果：
设置状态name Mary；
设置状态age 12；
设置状态surname Poppins；
第二次执行结果：
设置状态name Mary；
设置状态age 12；
设置状态surname Poppins；那么，react是如何知道哪个 state 对应 哪一个useState？很简单， React 靠的是 Hook 调用的顺序。
react hook 使用，要遵循下面两个规则：
只在最顶层使用 Hook
react依靠hook调用顺序来对应state，所以调用顺序不能变。function Form() { // 1. Use the name state variable const [name, setName] = useState('Mary'); // 2. Use the age state variable if(!name){ const [age, setAge] = useState('12'); } // 3. Use the surname state variable const [surname, setSurname] = useState('Poppins'); // ... } 第一次执行结果： 设置状态name Mary； 设置状态age 12； 设置状态surname Poppins； 第二次执行结果： 设置状态name Mary； 设置状态age 12；//判断后会被忽略 设置状态surname 12；//此时设置为12，与需求已不符也就是说只能在顶层使用hook。
- 只在 React 函数中调用 Hook
在class组件中是无法使用hook函数的，只能在函数组件中使用。
在自定义hook中也可以使用。
内置Hook
上面使用的useState Hook是一种可以让你在函数组件内使用state的内置hook，除此之外react还提供了许多内置hook：
基础 Hook
useState useEffect useContext
额外的 Hook
useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue
下面看一下 useState、useEffect两个常用的hook，其他的使用频率较低，使用方法也都基本一致其他hook
三、state Hook
我们想在函数组件里加入state，点击+，完成数字累加功能：
import React , {useState} from 'react'
function Item(){
const [count,setCount] = useState({name:'tom',age:11})
return <>
{`${count.name}已经${count.age}岁了`}
<div onClick={()=>{setCount({name:'janny',age:count.age+1})}}>+</div>
</>
}
export default Item;从上面代码可以看出来，useState hook提供了在函数组件里使用state的能力。十分简洁。
首先，通过react引入useState钩子函数；
接着，在函数组件内调用useState，并传入state的初始值，可以是个值，也可以是对象。useState函数的返回值个数组，这里通过数组的结构赋值取得count（变量名可以随意定义）和修改count的方法setCount（函数名也可以随意定义）。
取值state：可以通过变量count直接取值
修改state：通过给setCount函数传递值来修改
是不是很简单？以后终于可以在函数组件里使用state了，拥有控制自己主权的能力了！除了使用state，还有一种场景也是我们经常碰到的，那就是函数组件没有生命周期，一些副作用的操作没法完成！别着急，react又内置了极好的effect hook！
四、effect Hook
当我们点击+时，不仅想完成数字累加，而且想要在title里显示我们的修改，如果在class组件里，我们可以在componentDidMount生命周期里通过setState完成，但是函数组件里没法完成，即使现在有useState Hook也没有生命周期函数，没法完成！那就在来一个hook吧，引入effect Hook。
useEffect hook不仅提供了生命周期，而且useEffect Hook可以看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。也就是在这一个钩子函数里可以完成很多事！
1.无需清除的副作用
import React , {useState,useEffect} from 'react'
function Item(){
const [count,setCount] = useState({name:'tom',age:11})
useEffect(()=>{
document.title = count.age
})
return <>
{`${count.name}已经${count.age}岁了`}
<div onClick={()=>{setCount({name:'tom',age:count.age+1})}}>+</div>
</>
}
export default Item;好好感受一下！useEffect就像是一个生命周期函数。这个功能在 class 组件中，需要在两个生命周期函数（componentDidMount、componentDidUpdate）中编写重复的代码。在函数useEffect内进行副作用操作就行了。因为每次挂载、更新后useEffect都会执行。
在 React 组件中有两种常见副作用操作：需要清除的和不需要清除的。上面这种就是不需要清除的副作用。
2.需要清除的副作用
假如，我们觉得只用手指点击太累了，想弄个计时器帮我们执行。
let timer = null;
function Item(){
const [count,setCount] = useState({name:'tom',age:11})
useEffect(()=>{
clearInterval(timer)；//清除
timer = setInterval(()=>{
console.log(1)
setCount({name:'tom',age:count.age+1})
},1000)
document.title = count.age
})
return <>
{`${count.name}已经${count.age}岁了`}
<div onClick={()=>{setCount({name:'tom',age:count.age+1})}}>+</div>
</>
}这样就很棒，换上自动挡就很舒服！但是当我们切换路由，移除这个组件后，出去看看风景回来！发现定时器没有停，自己玩的很嗨...哎呦喂！
这就是需要清除的副作用，class组件里我们可以通过在componentWillUnmount生命周期函数里清除，所以这里我们也要清除这些需要清除的副作用！
function Item(){
const [count,setCount] = useState({name:'tom',age:11})
useEffect(()=>{
clearInterval(timer)
timer = setInterval(()=>{
console.log(1)
setCount({name:'tom',age:count.age+1})
},1000)
document.title = count.age;
return function(){//add
clearInterval(timer)
}
})
return <>
{`${count.name}已经${count.age}岁了`}
<div onClick={()=>{setCount({name:'tom',age:count.age+1})}}>+</div>
</>
}useEffect清除副作用的方式也很简单，return 一个函数，在函数里清除就可以了。
3.优化 useEffect
上面说了useEffect hook在每次挂载、更新后都会执行。这不就是跟setState在性能方面造成的问题一样严重吗？class组件 通过在 componentDidUpdate 进行优化，useEffect怎么优化！
可以通过useEffect函数的第二个参数进行优化。
1.传递空数组，表示函数只执行一次！这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。effect 内部的 props 和 state 就会一直拥有其初始值。更接近大家熟悉的 componentDidMount 。
useEffect(()=>{
...
},[])2.传递包含state的数组
会通过===比较count的前一次渲染的值与这一次要渲染的值，如果全等则React 会跳过这个 effect，这就实现了性能的优化。一定要将所有需要比较的state都放进数组，否则将不会进行比较，也就会直接跳过！
useEffect(()=>{
...
},[count])五、自定义Hook
react内置了多hook，我们也可以对这些hook进行业务方面的封装，写出属于自己的hook！我们将上面的叠加计时封装成一个自定义hook：数字每秒叠加，并且修改显示在title上。
import React , {useState,useEffect} from 'react'
function useTitle(){//自定义hook
let timer = null;
const [count,setCount] = useState({name:'tom',age:11})
useEffect(()=>{
clearInterval(timer)
timer = setInterval(()=>{
setCount({name:'tom',age:count.age+1})
},1000)
document.title = count.age;
return function(){
clearInterval(timer)
}
},[count])
return count；//返回一个对象
}
function Item(){//自定义hook使用
const count = useTitle()
return <>
{`${count.name}已经${count.age}岁了`}
</>
}将一些公共代码提取出来，最后返回需要在页面显示的数据就成了
六、总结
到这里，react hook已经有所了解了吧！就是让函数组件能够像class组件一样自由自在的使用react的特性的函数。可以不影响之前任何业务，在项目中完全可选、100%向后兼容的react新特性！快在项目中用起来吧！
如有不妥！欢迎指正