React 中 hooks 的使用

一、Hooks

• Hooks 只能在函数组件中使用

• 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

二、函数式组件

1. 函数本身比较简单，更好的胜任根据状态来渲染UI这件事

2. hooks让函数组件内部有了维护状态的能力

3. hooks带来了组件的逻辑复用能力

三、useState----认识第一个hooks

        当你想要在函数组件中，使用组件状态时，就要使用 useState 这个Hook 了

        返回值：数组，包含两个值：1 状态值（state） 2 修改该状态的函数（setState）

1、导入useState

import { useState } from 'react'

2、调用 useState 函数，传入初始值，返回状态和修改状态的函数

  // 0 是初始值
  // 返回值是一个数组
  const stateArray = useState(0)

  // 状态值 -> 0
  const state = stateArray[0]
  // 修改状态的函数
  const setState = stateArray[1]

 3、使用

• 在 JSX 中展示状态
• 特定的时机调用修改状态的函数来改状态

{/* 展示状态值 */}
<h1>useState Hook -> {state}</h1>
{/* 点击按钮，让状态值 +1 */}
<button onClick={() => setState(state + 1)}>+1</button>

4、使用数组解构简化 useState 的使用

// 解构出来的名称可以是任意名称

const [state, setState] = useState(0)

四、useEffect----副作用

        事物的主要作用之外的，就是副作用。

        数据（Ajax）请求、手动修改 DOM、开启定时器，清空定时器，添加事件监听，删除事件, localStorage 操作等都可以称之为副作用 

1、导入

// 1. 导入useEffect
import { useEffect } from 'react'

 2、使用

// 2. 使用useEffect
useEffect(() => {
	console.log('useEffect 1 执行了,可以做副作用')
})
useEffect(() => {
	console.log('useEffect 2 执行了,可以做副作用')
})

• render工作完成之后，执行Effect；
• 如果定义了多个，则顺序执行；

3、设置依赖

useEffect有两个参数：

• 参数1： 副作用函数。
• 参数2：执行副作用函数的依赖项：它决定了什么时机执行参数1（副作用函数）

1：不带第二个参数，每次更新之后都要执行

2：带第二个参数，参数是空数组，只执行第一次

useEffect(() => {
  // 副作用函数的内容
}, [])

3：带第二个参数（数组格式），并指定了依赖项。那么在初始执行一次 ，当依赖项的值变化了，再执行一次

useEffect(() => {
  // 副作用函数的内容
}, [依赖项1,依赖项2,....])

五、倒计时小例子

import { useEffect, useRef, useState } from 'react'
export default function useCountDown (initCount = 10, callBack) {
  // 存入到useRef中
  const refTimer = useRef()
  /* 用户可以定义：
     1.倒计时的时间
     2.倒计时结束的动作
     3.何时开始倒计时
     */
  // 1. 初始化倒计时的时间
  const [count, setCount] = useState(initCount)
  // 2.开启定时器
  const start = () => {
    setCount(initCount)
    refTimer.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  // 2.倒计时结束做的事情
  useEffect(
    () => {
      if (count === 0) {
        clearInterval(refTimer.current)
        callBack()
      }
    },
    [count]
  )
  // 3.组件销毁之前清掉定时器
  useEffect(() => {
    return () => {
      clearInterval(refTimer.current)
    }
  }, [])
  //  3.最后会返回给用户一个倒计时的时间和何时开始倒计时
  return {
    count,
    start
  }
}