React--自定义hooks

最新推荐文章于 2025-02-15 08:51:38 发布

Meskjei

最新推荐文章于 2025-02-15 08:51:38 发布

阅读量4.4k

点赞数

分类专栏：前端 React 文章标签： React 自定义 hooks

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/102597191

版权

前端同时被 2 个专栏收录

70 篇文章

订阅专栏

React

18 篇文章

订阅专栏

React自定义Hooks解决了函数组件的复用性问题，避免了传统组件复用方式的复杂性和层级过多。自定义Hooks允许在其中使用内置Hooks，并通过返回函数确保事件监听的正确移除。它们可以返回对象或JSX，类似于函数组件但更具灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React内置的hooks函数解决了函数组件无法使用state以及在传统写法中生命周期函数混乱和this指向的问题。

而hooks所带来的组件复用性的提升则是由自定义hooks来体现的。

传统的组件复用多是渲染属性或者是高阶组件这两种方式，缺点除了写起来会相对复杂，还会造成组件层级过多。

先来看一个自定义hooks的例子：

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

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

值得注意的是，onResize这个回调函数是通过useCallback返回的，这是为了保证最终移除监听事件的时候传给removeEventListener的onResize和刚开始监听时传给addEventListener的onResize句柄一致。

最后返回size对象。

这样看起来自定义hooks函数实际上很像是一个函数组件，只是返回的内容不一样。

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

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

上面这个自定义hooks函数就使用了之前定义的useSize，然后返回了一段JSX，这就跟函数组件一样了。