【解读 ahooks 源码系列】DOM篇（三）

向右看齐 2023-09-25 00:29 264阅读 0赞

### 前言 ###

本文是 ahooks 源码系列的第四篇，往期文章：

*  [【解读 ahooks 源码系列】DOM篇（一）][ahooks _DOM]：useEventListener、useClickAway、useDocumentVisibility、useDrop、useDrag
 *  [【解读 ahooks 源码系列】DOM篇（二）][ahooks _DOM 1]：useEventTarget、useExternal、useTitle、useFavicon、useFullscreen、useHover

本文主要解读 `useMutationObserver`、`useInViewport`、`useKeyPress`、`useLongPress` 源码实现

### useMutationObserver ###

一个监听指定的 DOM 树发生变化的 Hook

[官方文档][Link 1]

#### MutationObserver API ####

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。利用 MutationObserver API 我们可以监视 DOM 的变化，比如节点的增加、减少、属性的变动、文本内容的变动等等。

可参考学习：

*  [MutationObserver][]
 *  [你不知道的 MutationObserver][MutationObserver 1]

#### 基本用法 ####

[官方在线 Demo][Link 1]

点击按钮，改变 width，触发 div 的 width 属性变更，打印的 mutationsList 如下：

![format_png][]

import { useMutationObserver } from 'ahooks';
    import React, { useRef, useState } from 'react';
    
    const App: React.FC = () => {
      const [width, setWidth] = useState(200);
      const [count, setCount] = useState(0);
    
      const ref = useRef<HTMLDivElement>(null);
    
      useMutationObserver(
        (mutationsList) => {
          mutationsList.forEach(() => setCount((c) => c + 1));
        },
        ref,
        { attributes: true },
      );
    
      return (
        <div>
          <div ref={ref} style={
      
       { width, padding: 12, border: '1px solid #000', marginBottom: 8 }}>
            current width：{width}
          </div>
          <button onClick={() => setWidth((w) => w + 10)}>widening</button>
          <p>Mutation count {count}</p>
        </div>
      );
    };
    复制代码

#### 核心实现 ####

这个实现比较简单，主要还是理解 MutationObserver API：

useMutationObserver(
      callback: MutationCallback, // 触发的回调函数
      target: Target,
      options?: MutationObserverInit, // 设置项：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#parameters
    );
    复制代码

[完整源码][Link 2]

### useInViewport ###

观察元素是否在可见区域，以及元素可见比例。

[官方文档][Link 3]

#### 基本用法 ####

[官方在线 Demo][Demo]

import React, { useRef } from 'react';
    import { useInViewport } from 'ahooks';
    
    export default () => {
      const ref = useRef(null);
      const [inViewport] = useInViewport(ref);
      return (
        <div>
          <div style={
      
       { width: 300, height: 300, overflow: 'scroll', border: '1px solid' }}>
            scroll here
            <div style={
      
       { height: 800 }}>
              <div
                ref={ref}
                style={
      
       {
                  border: '1px solid',
                  height: 100,
                  width: 100,
                  textAlign: 'center',
                  marginTop: 80,
                }}
              >
                observer dom
              </div>
            </div>
          </div>
          <div style={
      
       { marginTop: 16, color: inViewport ? '#87d068' : '#f50' }}>
            inViewport: {inViewport ? 'visible' : 'hidden'}

[ahooks _DOM]: https://juejin.cn/post/7202254039215800375
[ahooks _DOM 1]: https://juejin.cn/post/7202633255043465271
[Link 1]: https://link.juejin.cn?target=https%3A%2F%2Fahooks.js.org%2Fzh-CN%2Fhooks%2Fuse-mutation-observer
[MutationObserver]: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FMutationObserver
[MutationObserver 1]: https://link.juejin.cn?target=http%3A%2F%2Fwww.semlinker.com%2Fyou-dont-know-mutation-observer%2F
[format_png]: https://img-blog.csdnimg.cn/img_convert/54c27d4a78760219067dd9af142de9a0.webp?x-oss-process=image/format,png
[Link 2]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Falibaba%2Fhooks%2Fblob%2Fv3.7.4%2Fpackages%2Fhooks%2Fsrc%2FuseMutationObserver%2Findex.ts
[Link 3]: https://link.juejin.cn?target=https%3A%2F%2Fahooks.js.org%2Fzh-CN%2Fhooks%2Fuse-in-viewport
[Demo]: https://link.juejin.cn?target=https%3A%2F%2Fahooks.js.org%2F~demos%2Fuseinviewport-demo1%2F