突变行为
#javascript #react #mutationobserver

什么是突变观察者？

mutationObserver 是JavaScript API，它允许开发人员聆听DOM中特定元素或节点的更改（文档对象模型）。它提供了一种观察和响应DOM结构内发生的变化的方法。

突变处理器通过注册回调函数来观察DOM中的特定目标元素或节点来工作。当发生更改（例如正在添加或删除节点）时，调用回调函数将带有描述发生的更改的MutationRecord对象列表。

突变处理器API为构建需要对DOM变化做出反应的响应Web应用程序提供了强大的工具。它可用于实现广泛的功能，例如懒惰的内容，自动更新UI元素和实时数据同步。

让我通过示例解释突变观察者。

我们的目的是在类别的部分高度变化时添加动画。我们需要听那个操作
before after

为了做到这一点，我们需要类别部分的参考。

import React, { useRef } from 'react';
import { CategoryItems } from './category-items/category-items';
import { CategoryTitles } from './category-titles/category-titles';
import './categories.scss';

const Categories = () => {
  const categoriesRef = useRef<HTMLDivElement>(null);

  return (
    <div className="categories" ref={categoriesRef}>
      <CategoryTitles />
      <CategoryItems />
    </div>
  );
};

export { Categories };

准备categoriesRef后，我们可以创建 mutationObserver 结构。

首先，我们需要创建MutationObserver 

  const mutationObserver = new MutationObserver(async () => {
    console.log('mutationObserver operation');
  });

这是我们的MutationObserver实例，我们将从useEffect
调用此实例 

  useEffect(() => {
    if (categoriesRef.current) {
      mutationObserver.observe(categoriesRef.current, {
        childList: true,
        subtree: true,
      });

      return () => {
        mutationObserver.disconnect();
      };
    }
  }, []);

  • 我们用categoriesRef.current定义了mutationObserver.observe，它听到参数，例如childList和subtree，您也可以检查this以获取更多参数。

  • ，我们还定义了 componentWillunMount上的mutationObserver.disconnect() drete liste liste otery当组件关闭时。

此后，当categoriesRef处的高度变化时，我们将看到控制台日志。

    console.log('mutationObserver operation');

然后，我们将添加动画处理程序代码，并定义CSS过渡到categoriesRef 

  const mutationObserver = new MutationObserver(async () => {
    const categoryTitles = document.getElementById('categoryTitles') as HTMLDivElement | null;
    const categoryItems = document.getElementById('categoryItems') as HTMLDivElement | null;

    if (categoriesRef.current && categoryTitles && categoryItems) {
      if (categoryTitles.clientHeight > categoryItems.clientHeight) {
        categoriesRef.current.style.height = `${categoryTitles.clientHeight}px`;
      } else {
        categoriesRef.current.style.height = `${categoryItems.clientHeight}px`;
      }
    }
  });

.categories {
  transition: height 200ms ease;
}

after

voilð

来源