React Hooks 常用钩子

React Hooks

useState

const [count, setCount] = useState(0);
// 等价于
const _useState = useState(0);
const count = _useState[0];
const setCount = _useState[1];

useEffect

// 异步，处理副作用（即不是主逻辑，比如生命周期，接口请求等）
useEffect(() => {
    console.log('不传参相当于componentDidMount, componentDidUpdate');
});

useEffect(() => {
    console.log('不传参相当于componentDidMount, componentDidUpdate');
    return () => {
        console.log('componentWillUnMount');
    }; // return 返回一个函数相当于componentWillUnMount
}, []); // 传参空数组[]，只会在组件不使用的时候调用一次return返回的函数

useEffect(() => {
    console.log('不传参相当于componentDidMount, componentDidUpdate');
    return () => {
        console.log('componentWillUnMount');
    }; // return 返回一个函数相当于componentWillUnMount
}, [count]); // 传参监听count，每次count改变都会执行return返回的函数

useContext

// 组件间通信，共享状态
import React,{useState,createContext,useContext} from 'react'
function Child(){
// 在子组件中使用useContext进行接收父组件传递的上下文，这样值就能传递过来了
    const count1=useContext(CountContext)
    return (
        <h1>{count1}</h1>
    )
}
const CountContext=createContext()//首先创建一个上下文全局变量
function Example3(){
    const [count,setCount]=useState(0)

    function handleClick(){
        setCount(count+1)
    }
   
    return (
        <div>
            点击{count}
            <button onClick={handleClick}>clickme</button>
            {/* 作为父组件将值传递过去，Provider 相当于提供者，Child是子组件 */}
            <CountContext.Provider value={count}>
                <Child></Child>
            </CountContext.Provider>
        </div>
    )
}
export default Example3

useReducer

// 控制业务逻辑
// 两个参数，函数和默认值，state状态，action控制状态，count是返回的值，dispatch传递action，一般为对象
import React,{useReducer} from 'react'
export default function ReducerDemo() {
    const [count, dispath] = useReducer((state,action)=> {
       switch(action){
           case 'add':
                return state + 1;
            case 'sub':
                return state - 1;
            default:
                return state;
       }
    }, 0);
    return (
        <div>
            <h1 className="title">{count}</h1>
            <button onClick={()=> dispath('add')}>Increment</button>
            <button onClick={()=> dispath('sub')}>Decrement</button>
        </div>
    )
}

useMemo

// 缓存属性状态，相当于shouldComponentUpdate，解决子组件重复执行问题
const a = useMemo(()=>{}, []);

useCallback

// 缓存方法，解决子组件重复执行问题
const a = useCallback(()=>{}, []);

useRef

// 获取dom节点，保存dom上的状态
const dom = useRef()

自定义hooks

// 自定义hooks函数useSzie
function useSize() {
    const [size, setSize] = useState({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientWidth,
    })
    
    const onResize = useCallback(() => {
        setSize({
            width: document.documentElement.clientWidth,
        	height: document.documentElement.clientWidth, 
        })
    }, [])
    
    useEffect(() => {
        window.addEventListener('resize', onResize);
        return () => {
            window.removeEventListener('resize', onResize);
        }
    }, [])
    
    return size;
}