hooks学习笔记—hooks的典型案例

àì夳堔傛蜴生んèń 2023-07-21 11:23 34阅读 0赞

### 清除 effect ###

通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，`useEffect` 函数需返回一个清除函数。也就是说，要想在组件销毁的时候搞一些事情，需要`useEffect 末尾返回一个函数，在这个函数里面可以写具体销毁的内容。`

`看下面的例子，在当前页面里面，页面的标题是'`测试title'，当切换到其他页面时，页面的标题变成‘前端精读’

import React, { useEffect } from 'react';
    
    function useDocumentTitle(title) {
      useEffect(() => {
        document.title = title;
        return () => {
          console.log('销毁1————————————————');
          document.title = '前端精读';
        };
      }, [title]);
    }
    
    export default function CheckboxDemo() {
      useDocumentTitle('测试title');
    
      return <div />;
    }

### 监听页面大小变化，网络是否断开 ###

效果：在组件调用 `useWindowSize` 时，可以拿到页面大小，并且在浏览器缩放时自动触发组件更新。

import React, { useEffect, useState } from 'react';
    
    function getSize() {
      return {
        innerHeight: window.innerHeight,
        innerWidth: window.innerWidth,
        outerHeight: window.outerHeight,
        outerWidth: window.outerWidth,
      };
    }
    
    function useWindowSize() {
      const [windowSize, setWindowSize] = useState(getSize());
    
      function handleResize() {
        setWindowSize(getSize());
      }
    
      useEffect(() => {
        window.addEventListener('resize', handleResize);
    
        return () => {
          window.removeEventListener('resize', handleResize);
        };
      }, []);
      return windowSize;
    }
    
    export default function Demo() {
      const windowSize = useWindowSize();
      return <div>页面宽度{windowSize.innerWidth}</div>;
    }

## 动态注入 css ##

效果：在页面注入一段 class，并且当组件销毁时，移除这个 class。

const className = useCss({
      color: "red"
    });
    
    return <div className={className}>Text.</div>;

实现：可以看到，Hooks 方便的地方是在组件销毁时移除副作用，所以我们可以安心的利用 Hooks 做一些副作用。注入 css 自然不必说了，而销毁 css 只要找到注入的那段引用进行销毁即可，具体可以看这个 [代码片段][Link 1]。

> DOM 副作用修改 / 监听场景有一些现成的库了，从名字上就能看出来用法： [document-visibility][]、 [network-status][]、 [online-status][]、 [window-scroll-position][]、 [window-size][]、 [document-title][]。

## 组件辅助 ##

Hooks 还可以增强组件能力，比如拿到并监听组件运行时宽高等。

## 获取组件宽高 ##

效果：通过调用 `useComponentSize` 拿到某个组件 ref 实例的宽高，并且在宽高变化时，rerender 并拿到最新的宽高。

import React, { useLayoutEffect, useState, useRef } from 'react';
    
    function getSize(el) {
      if (!el) {
        return {};
      }
    
      return {
        width: el.offsetWidth,
        height: el.offsetHeight,
      };
    }
    
    function useComponentSize(ref) {
      const [ComponentSize, setComponentSize] = useState(getSize(ref.current));
    
      function handleResize() {
        if (ref && ref.current) {
          setComponentSize(getSize(ref.current));
        }
      }
    
      useLayoutEffect(() => {
        handleResize();
    
        let resizeObserver = new ResizeObserver(() => handleResize());
        resizeObserver.observe(ref.current);
    
        return () => {
          resizeObserver.disconnect(ref.current);
          resizeObserver = null;
        };
      }, []);
      return ComponentSize;
    }
    
    export default function Demo() {
      const ref = useRef(null);
      const componentSize = useComponentSize(ref);
      return (
        <>
          {componentSize.width}
          <textarea ref={ref} />
        </>
      );
    }

### 拿到组件 onChange 抛出的值  ###

效果：通过 `useInputValue()` 拿到 Input 框当前用户输入的值，而不是手动监听 onChange 再腾一个 `otherInputValue` 和一个回调函数把这一堆逻辑写在无关的地方。

import React, { useState, useCallback } from 'react';
    
    function useInputValue(initialValue) {
      const [value, setValue] = useState(initialValue);
      const onChange = useCallback(function(e) {
        setValue(e.currentTarget.value);
      }, []);
      return {
        value,
        onChange,
      };
    }
    
    export default function Demo() {
      const name = useInputValue('jjsun');
      return (
        <>
          {name.value}
          <input {...name} />
        </>
      );
    }

## 暂时写这么多吧，其他看这篇文章吧！ ##

[Link 1]: https://link.zhihu.com/?target=https%3A//github.com/streamich/nano-css/blob/c21413ddbed233777886f7c9aa1375af8a221f7b/addon/pipe.js%23L51
[document-visibility]: https://link.zhihu.com/?target=https%3A//github.com/rehooks/document-visibility
[network-status]: https://link.zhihu.com/?target=https%3A//github.com/rehooks/network-status
[online-status]: https://link.zhihu.com/?target=https%3A//github.com/rehooks/online-status
[window-scroll-position]: https://link.zhihu.com/?target=https%3A//github.com/rehooks/window-scroll-position
[window-size]: https://link.zhihu.com/?target=https%3A//github.com/rehooks/window-size
[document-title]: https://link.zhihu.com/?target=https%3A//github.com/rehooks/document-title