收集了几个React自定义hooks

1. 获取上一轮的props或者state

function usePrevious(value){
    const ref = React.useRef();
    useEffect(()=>{
        ref.current = value
    },[value])
    return ref.current; // 利用了useEffect会在视图渲染后运行的特性，先返回了上一次的值，当前传入的值会在组件的下一次渲染中才会返回，以此达到了获取上一轮值的目的
}

2. 获取窗口大小

function useWinSize(){
    const [size,setSize] = useState({
        width:window.innerWidth,
        height:window.innerHeight
    })
    const onResize = function() {
        setSize({
            width:window.innerWidth,
            height:window.innerHeight
        })
    }
    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize);
        }
    },[])
    return size; // 在需要使用的地方直接运行取值即可，let postion = useMouse();
}

3. 获取鼠标位置

    // 用起来真的非常像直接封装了一个可重复调用的方法一样
    function useMouse(){
        const [position,setPosition] = useState({x:0,y:0});
        const update = function(e) {
            setPosition({x:e.pageX,y:e.pageY});
        }
        useEffect(()=>{
            document.addEventListener('mousemove',update);
            return ()=>{
                document.removeEventListener('mousemove',upadte);
            }
        },[])
        return position; // 同上
    }

4. 跳过useEffect首次更新

    function useDidUpdateEffect() {
        const didMountRef = useRef(false);
        useEffect(()=>{
            if(!didMountRef.current) {
                didMountRef.current = true;
            }
        },[])
        return didMountRef.current; // 使用方法直接引入需要的组件中，在需要判断条件当判断条件就好了
    }
    // 这个是原文章写的，他封装的更彻底些
    function useDidUpdateEffect(fn, inputs) { 
        const didMountRef = useRef(false); 
        useEffect(() => { 
            if (didMountRef.current) { 
                return fn();
            } 
            didMountRef.current = true; 
        }, inputs); 
    }