React Hooks

一、为什么会有Hooks

       介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件。

并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。

       也就是说组件的最佳写法应该是函数，而不是类。 但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点：

• 纯函数组件没有状态
• 纯函数组件没有生命周期
• 纯函数组件没有this

       这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件。为了解决类组件功能齐全却很重，纯函数很轻便却有上文几点重大限制,React团队设计了React Hooks。React Hooks就是加强版的函数组件，我们可以完全不使用class，就能写出一个全功能的组件。

二、Hooks的含义

       Hooks的单词意思为“钩子”。
       React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。而React Hooks 就是我们所说的“钩子”。
       下面是React Hooks为我们提供的默认的四种最常用钩子：

• useState()
• useContext()
• useReducer()
• useEffect()
• useRef()

三、React Hooks用法

1、useState()

       纯函数组件没有状态，useState()用于为函数组件引入状态。 在useState()中，它接受状态的初始值作为参数，其中数组第一项为一个变量，指向状态的当前值，类似this.state；第二项是一个函数，用来更新状态,类似setState。该函数的命名，约定为set前缀加状态的变量名。

示例—计数器：

import React,{
    useState } from "react";

const NewCount = ()=> {
   
    const [ count,setCount ] = useState(0)
    const addCount= ()=> {
   
        let newCount = count;
        setCount(newCount +=1)
    }
   return (
       <>
           <p> {
    count }</p>
           <button onClick={
    addCount }>Count++</button>
       </>
   )
}
export default NewCount;

通过 setXxx 设置新值，但是如果新值和当前值完全一样，那么会引发React重新渲染吗？

通过React官方文档可以知道，当使用 setXxx，赋值时，Hook会使用Object.is()来对比当前值和新值，结果为true则不渲染，结果为false就会重新渲染。

2、useContext()

       共享状态钩子作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。

示例—共享状态：

import React, {
    useContext } from "react";
const HookTest = ()=> {
   
    const AppContext = React.createContext({
   });
    const A = ()=> {
   
        const {
    name } = useContext(AppContext)
        return (
            <p>
                我是A组件,名字是：{
    name }；
            </p