1、Hooks的含义

“Hooks”的单词意思为“钩子”。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。而React Hooks 就是我们所说的“钩子”

2、Hooks的用法

2.1 useState：状态钩子

纯函数组件没有状态，useState()用于设置和使用组件的状态属性语法如下：

const [state, setState] = useState(initialValue);
// state：初始的状态属性，指向状态当前值，类似this.state
// setState：修改状态属性值的函数，用来更新状态，类似setState
// initialValue：状态的初始值，该值会赋给state

注意：setState的命名为：set+State(初始状态名)，并且采用小驼峰命名法。例如[count, setCount]、[name, setName]

import React, { useState } from "react";
export function ExampleState() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
          <hr/>
          <h1>count: {count}</h1>
          <button onClick={()=>{ setCount(count+1}}>点击</button>
        </div>
      )
}

2.2 useEffect：副作用钩子

useEffect()是副作用的钩子，可以实现特定的功能，如异步请求语法如下：

useEffect(() => {
    // 回调函数，其中是要进行的异步操作代码
}, [array])
// [array]：useEffect执行的依赖，当该数组的值发生改变时，回调函数中的代码就会被指向
// 如果[array]省略，则表示不依赖，在每次渲染时回调函数都会执行
// 如果[array]是空数组，即useEffect第二项为[]，表示只执行一次

useEffect 可以模拟三种生命周期

componentDidMount // 加载完成的
componentDidUpdate // 更新阶段
componentWillUnmount // 卸载阶段

useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组

用法

useEffect(() => {
    /** 执行逻辑 **/
},[])

2.3 useCallback()：记忆函数

useCallback()为记忆函数，它可以防止因为组件重新渲染，导致方法被重新创建，起到缓存作用。语法如下：

useCallback(() => {
    // 回调函数，当array改变后，该函数才会重新声明
}, [array])
// 如果[array]为空数组，那么就是第一次创建后就被缓存，如果后期array改变了，拿到的还是老的array
// 如果不传入第二个参数，每次都会重新声明一次，拿到的就是最新的array

使用useCallback()时，只需要将其写在整个函数外部即可，上面代码使用useCallback()后效果如下，每当依赖项改变时，该函数才会被重新创建，如果依赖项不变，则不会重新创建

        const UseCallback = function () {
            const handleChange1 = useCallback(
                () => {
                    // 具体代码
                }, [依赖项]
            )
            const handleChange2 = useCallback(
                () => {
                    // 具体代码
                }, [依赖项]
            )
            return (
                <div>
                    {/*具体代码*/}
                </div>
            )
        }

2.4 useMemo()：记忆组件

useCallback()的功能可以由useMemo()所替代，useMemo()也可以返回一个记忆函数，语法如下：

useMemo(() => fn, [])
// useCallback(fn, []) = useMemo(() => fn, [])

useCallback()与useMemo()的区别：

useMemo  缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
useCallback  缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降

常用hooks的使用