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}
结果:
滑动开发者视口宽度跟随变化