React--自定义hooks

构建自己的Hook可以将组件逻辑提取到可重用的函数中。

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

  return size;
}

上面useSize就是一个自定义的hooks函数，而在自定义的hooks一样是可以使用React内置的hooks函数的。

const size = useSize();

自定义hooks也是可以返回一段JSX的：

function useSizeMonitor(){
    const size = useSize();
    
    return (
        <div>{size.width}x{size.height}</div>
    );}