react-HOOK---一篇搞定react-hook，既生react，何生hook，深挖hook中常用的四个API

本文链接：https://blog.csdn.net/fesfsefgs/article/details/107050153

为什么会有Hooks？

介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。。

但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点，简单列举几条

纯函数组件没有状态
纯函数组件没有生命周期
纯函数组件没有this
只能是纯函数

这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件或者redux，但我们知道类组件的也是有缺点的，比如，遇到简单的页面，你的代码会显得很重，并且每创建一个类组件，都要去继承一个React实例，至于Redux,更不用多说，很久之前Redux的作者就说过，“能用React解决的问题就不用Redux”,等等一系列的话。关于React类组件redux的作者又有话说

大型组件很难拆分和重构，也很难测试。
业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
组件类引入了复杂的编程模式，比如 render props 和高阶组件。

下面我们用类组件做一个简单的计数器

import React from 'react'
class AddCount extends React.PureComponent {
   
  constructor(props){
   
    super(props)
    this.state={
   
      count: 0
    }
  }
  addcount = () => {
   
    let newCount = this.state.count
    this.setState({
   
      count: newCount +=1
  })
  }
  render(){
   
    return (
      <>
        <p>{
   this.state.count}</p>
        <button onClick={
   this.addcount}>count++</button>
      </>
    )
  }
}
export default AddCount

可以看出来，上面的代码确实很重。
为了解决这种，类组件功能齐全却很重，纯函数很轻便却有上文几点重大限制，React团队设计了React Hooks,React Hooks就是加强版的函数组件，我们可以完全不使用 class，就能写出一个全功能的组件

什么是Hook：

Hook是react 16.7新增的一个特性，主要是用来让无状态组件(函数式组件)可以使用状态，以前为了进行状态管理，需要使用类组件或者redux等来管理,相当于类组件中的state，只不过用useState去代替了，useState() = this.state()，setVal() = this.setState()

Hooks’的单词意思为“钩子”。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。而React Hooks 就是我们所说的“钩子”。那么Hooks要怎么用呢？“你需要写什么功能，就用什么钩子”。对于常见的功能，React为我们提供了一些常用的钩子，当然有特殊需要，我们也可以写自己的钩子。

下面是React为我们提供的默认的四种最常用钩子

useState()
useContext()
useReducer()
useEffect()

不同的钩子为函数引入不同的外部功能，我们发现上面四种钩子都带有`use前缀`，
React约定，钩子一律使用 use前缀命名。所以，`你自己定义的钩子都要命名为useXXX`。

React Hooks的用法:

`深挖hook中常用的四个API`

useState():

useState 是用来定义一个状态的，相当于类组件中的state，只不过用useState去代替了，它与类组件的状态不同，函数组件的状态可以是对象也可以是基础类型数据，
useState返回的是一个数组，第一个是当前的状态值，第二个是对象，表明用于更改状态的函数（类似于setState）

import React,{
   useState} from 'react';
import './App.css';

function App() {
   
  // useState创造1个状态，赋值一个初始值，当前赋值的初始值为0
  // 数组的第一个是一个变量，此变量指向当前状态的值，相当于this.state
  // 数组的第二个是一个函数，次函数可以修改状态的值,相当于this.setState
  const [count,setCount] = useState(0);
  const addCount = ()=>{
   
   
    setCount(count+10);
  }
  return (