React-hooks

什么是hooks

可以理解为通过 Hooks 为函数组件钩入 class 组件的特性，有了 Hooks 以后，不能再把函数组件称为无状态组件了，因为 Hooks 为函数组件提供了状态

useState基本使用

作用：

为函数组件提供状态（state）

import { useState } from 'react'

// 参数：状态初始值
// num代表定义的值，setnum修改值得方法
const {num, setnum} = useState(0)

例如：

import { useState } from 'react'

// 参数：状态初始值
// num代表定义的值，setnum修改值得方法
const {num, setnum} = useState(0)
num为0
setnum(1) // num为1

useState 等 Hook 的使用规则：

• React Hooks 只能直接出现在 函数组件 中
• React Hooks不能嵌套在 if/for/其他函数 中
• useState Hook 多次调用返回的 [state, setState]，相互之间，互不影响

---

useEffect

执行时机：

该 effect 会在组件第一次渲染以及每次组件更新后执行（componentDidMount + componentDidUpdate）

作用：

处理副作用（在计算机科学中，如果一个函数或其他操作修改了其局部环境之外的状态变量值，那么它就被称为有副作用用）
常见的副作用（side effect）：数据（Ajax）请求、手动修改 DOM、localStorage、console.log 操作等

基本使用-语法总结

// 1
// 触发时机：1 第一次渲染会执行 2 每次组件重新渲染都会再次执行
// componentDidMount + ComponentDidUpdate
useEffect(() => {})

// 2（使用频率最高）
// 触发时机：只在组件第一次渲染时执行
// componentDidMount
useEffect(() => {}, [])

// 3（使用频率最高）
// 触发时机：1 第一次渲染会执行 2 当 count 变化时会再次执行
// componentDidMount + componentDidUpdate（判断 count 有没有改变）
useEffect(() => {}, [count])

// 4
useEffect(() => {
  // 返回值函数的执行时机：组件卸载时
  // 在返回的函数中，清理工作
  return () => {
  	// 相当于 componentWillUnmount
  }
}, [])

useEffect(() => {
  
  // 返回值函数的执行时机：1 组件卸载时 2 count 变化时
  // 在返回的函数中，清理工作
  return () => {}
}, [count])

useEffect第二个参数（可选，也可以传一个数组，数组中的元素可以成为依赖项（deps） ）

useEffect(() => {
    document.title = `当前已点击 ${count} 次`
  }, [count]) //只有count改变才会引起useEffect执行

useEffect 的第二个参数，还可以是一个空数组（[]），表示只在组件第一次渲染后执行 effect
使用场景：
1 事件绑定
2 发送请求获取数据 等
该 effect 只会在组件第一次渲染后执行，因此，可以执行像事件绑定等只需要执行一次的操作

useEffect-清理工作

effect 的返回值是可选的，可省略。也可以返回一个清理函数，用来执行事件解绑等清理操作

清理函数的执行时机：

• 清理函数会在组件卸载时以及下一次副作用回调函数调用的时候执行，用于清除上一次的副作用。
• 如果依赖项为空数组，那么会在组件卸载时会执行。相当于组件的componetWillUnmount

useEffect(() => {
  const handleResize = () => {}
  window.addEventListener('resize', handleResize)
  
  // 这个返回的函数，会在该组件卸载时来执行
  // 因此，可以去执行一些清理操作，比如，解绑 window 的事件、清理定时器 等
  return () => window.removeEventListener('resize', handleResize)
}, [])