09.超简单的自定义hooks方法

自定义hook是一个函数，本质上它是代码逻辑的一个提取，在该函数的内部，可以使用其他的hook。该函数必须以use开头，它就像一个正常的函数，参数和返回值都由我们来决定。

代码实例

下面的自定义hook方法会监听浏览器的窗口大小

  //useResize.js
  import React, { useState, useEffect, useCallback } from 'react';
  
  //自定义hooks方法必须是usexxx
  function useResize() {
  
    const [size, setSize] = useState({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    })
    
    //useCallback会缓存这个方法，节约性能
    const onResize = useCallback(() => {
      {
        setSize({
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        })
      }
    },[]);
    
    //第一次进入是开启这个方法，离开时销毁这个方法
    useEffect(() => {
      window.addEventListener('resize', onResize);
      return () => {
        window.removeEventListener('resize', onResize);
      }
    }, []);
    
    return size;
  }
  
  export default useResize;
  
  
  //App.js中使用
  import React from 'react';
  import useResize from './useResize';
  function App(){
    const size = useResize();

    return (
      <div>
        浏览器宽高：{size.width}x{size.height}
      </div>
    )
  }
  export default App;