react封装hook

React的Hook是React 16.8版本新增的特性，它使得我们可以在函数组件中使用状态和生命周期等React特性，而不需要使用类组件。Hook可以让我们更加方便地编写React组件，并且提高了代码的可读性和可维护性。

下面是一个自定义React Hook的简单封装示例：

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

export default useWindowWidth;

这个自定义Hook可以用来获取窗口的宽度，并且在窗口大小改变时自动更新宽度值。它使用了React提供的useState和useEffect Hook来管理状态和生命周期。

我们可以在组件中使用这个自定义Hook来获取窗口的宽度：

import useWindowWidth from './useWindowWidth';

function MyComponent() {
  const width = useWindowWidth();

  return <div>Window width: {width}</div>;
}

通过使用自定义Hook，我们可以将组件内部的逻辑抽离出来，使得组件本身更加简单和易于理解。同时，自定义Hook的可复用性也很高，可以在多个组件中使用。