自定义Hooks

/**
 * 自定义Hooks
 * 自定义 Hooks 函数偏向于功能，而组件偏向于界面和业务逻辑。
 * 它与纯函数的区别是：输入输出的区别
 */
 import React, { useRef ,useState ,useEffect ,useCallback } from 'react';

 function useWinSize(){
     const [size,setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
     })
     const onResize = useCallback(()=>{
         setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
         })
     },[]) 
     useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])

    return size;
 }
 
//封装自定义hook：获取上一个值
const usePrevious = state =>{
    const ref = useRef();

    useEffect(()=>{
        ref.current = state;
    })
    return ref.current;
}
 //调用自定义函数
 function App(){
    const [count,setCount] = useState(0);
    const size = useWinSize();
    const prevCount = usePrevious(count);

    return (

        <div>
            页面Size:{size.width}x{size.height}
            
            <button onClick={()=>setCount(count+1)}>+</button>
            <button onClick={()=>setCount(count-1)}>-</button>
            <p>Now:{count},before:{prevCount}</p>
        </div>
    )
}

export default App