reactHook

在函数组件里面模拟生命周期和状态state
useState使用状态
概述：useState使用状态state 模拟class组件的state。

//导入
import { useState} from 'react'
function App() {
    // 定义一个num设置num的方法  从useState 默认值是10
    const [num, setNum] = useState(10);
 

useEffect模拟生命周期
概述：useEffect使用副作用（模拟生命周期）组件已经挂载，组件已经更新
第一个参数回调函数：模拟组件已经挂载完毕
第一个参数的返回值：模拟组件将要=卸载
第二个参数：依赖数据

//导入
import {  useEffect } from 'react'
useEffect(function () {
        console.log("组件已经更新，组件已经挂载")
    })

useRef使用DOM引用

//导入
import {useRef } from 'react'
const inpRef=useRef()
<input ref={inputRef}/>
inpRef.current.value

useCallback使用
useCallback的真正目的是在于缓存了每次渲染时inline callback的实例，这样方便配合上子组件的shouldComponentUpdate或者React.memo起到减少不必要的渲染作用。

// 模拟状态
import {  useCallback} from "react";
  // 获取窗口的默认宽高
    const [winSize, setWinSize] = useState({ w: window.innerWidth, h: window.innerHeight })
   const onResize = useCallback(() => {
       // 更新winSize
      setWinSize({ w: window.innerWidth, h: window.innerHeight })
    },[winSize])

使用场景

// 模拟状态
import { useState, useEffect, useCallback, useMemo } from "react";
// useCallback返回一个缓存的函数
// useMemo是返回一个缓存的函数（根据值去重新计算）
// 定义使用窗口大小的方法
function useWinSize() {
    // 获取窗口的默认宽高
    const [winSize, setWinSize] = useState({ w: window.innerWidth, h: window.innerHeight })

     const onResize = useCallback(() => {
       // 更新winSize
       setWinSize({ w: window.innerWidth, h: window.innerHeight })
    // },[winSize])
    const onResize = useMemo(() => () => {
        setWinSize({ w: window.innerWidth, h: window.innerHeight })
    }, [])
    useEffect(() => {
        // 组件挂载监听resize事件
        window.addEventListener("resize", onResize);
        //    组件卸载 移除事件
        return () => window.removeEventListener("resize", onResize)
    }, [])
    return winSize;
}
// 导出方法
export { useWinSize }