React Hook

Hook是什么

定义：Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。
作用：让无状态组件拥有一些模拟state能力，模拟生命周期的能力

注意，使用之前要先导入要使用的那个钩子
例：

import {useState} from 'react'

useState使用状态

作用：模拟状态

// 声明状态
const [ count , setCount ] = useState(0);

// 使用状态
p>You clicked {count} times</p>
button onClick={()=>{setCount(count+1)}}>click me</button>

useEffect使用副作用

作用：模拟生命周期

useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
    })

React首次渲染和之后的每次渲染都会调用一遍useEffect函数 而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)

useReducer 实现类似Redux的功能

作用：做全局状态管理

reducer是什么 ？
答：reducer就是一个函数，这个函数接收两个参数，一个是状态，一个用来控制业务逻辑的判断参数。

function countReducer(state, action) {
    switch(action.type) {
        case 'add':
            return state + 1;
        case 'sub':
            return state - 1;
        default: 
            return state;
    }
}

useRef使用dom引用

const inputEl = useRef(null)
const onButtonClick=()=>{ 
      inputEl.current.value="Hello ,useRef"
      console.log(inputEl)
  }
<input ref={inputEl} type="text"/>
<button onClick = {onButtonClick}>在input上展示文字</button>

createContext 创建上下文

作用：实现组件的跨层传参

let ColorContext.Provider = createContext()

<ColorContext.Provider value={{color,setColor}}>
     //需要获取value的组件
</ColorContext.Provider>

//获取
let colorData = useContext(ColorContext)
colorData.color
colorData.setColor('red')

useCallback使用回调函数

作用：缓存

const onResize = useCallback(()=>{
  setWin({})
})

useMemo使用缓存

const onResize = useMemo(()=>()=>{
  setWin({})
})

自定义函数

自定义Hooks函数获取窗口大小

App.js

import {useWinSize} from './utils.js'
// 获取窗口的宽高
function App(){
    const winSize = useWinSize();
    return <div>
        <h1>hook</h1>
        <p>w:{winSize.w} h:{winSize.h}</p>
    </div>
}
export default App;

utils.js

// 模拟状态
import { useState,useEffect,useMemo } from "react";

// 定义使用窗口大小的方法
function useWinSize(){
    // 获取窗口的默认宽高
    const [winSize,setWinSize] = useState({w:window.innerWidth,h:window.innerHeight})
    // useCallback缓存函数
    // const onResize = useCallback(()=>{
    //     // 更新winsize
    //     setWinSize({w:window.innerWidth,h:window.innerHeight})
    // },[winSize])
    const onResize = useMemo(()=>()=>{
        // 更新winsize
        setWinSize({w:window.innerWidth,h:window.innerHeight})
    },[])
    useEffect(()=>{
        // 组件挂载监听resize事件
        window.addEventListener("resize",onResize);
        // 组件卸载 移除事件
        return ()=>window.removeEventListener("resize",onResize)
    },[])
    return winSize;
}
export {useWinSize} 

结果：
滑动开发者视口宽度跟随变化