DOM Hooks 逐个击破，解锁高阶组件开发新境界

2023-10-24 03:07:14

DOM Hooks：揭开 React 与 DOM 交互的秘密武器

DOM Hooks 的魅力

DOM Hooks 是 React 生态系统中的一组强大工具，它们赋予开发者与 DOM 元素进行无缝交互的能力。这些 Hooks 简化了高阶组件的构建，使开发者能够轻松应对各种复杂的交互和状态管理场景。

揭秘各个 DOM Hooks 的真面目

1. useLayoutEffect

useLayoutEffect 是 useEffect 的兄弟，但在浏览器渲染完成和 DOM 更新后才执行。它主要用于更新 DOM 布局相关的内容，例如改变元素尺寸、位置或添加动画效果。

import { useLayoutEffect } from 'ahooks';

const MyComponent = () => {
  useLayoutEffect(() => {
    // 在浏览器渲染完成后更新 DOM 布局
    document.body.style.backgroundColor = 'red';
  }, []);

  return <h1>Hello World!</h1>;
};

2. useEffect

useEffect Hook 在每次渲染后执行，负责处理 DOM 更新、事件处理和异步请求等任务。它本质上是一种“生命周期方法”，可用于在组件装载、更新或卸载时执行特定操作。

import { useEffect } from 'ahooks';

const MyComponent = () => {
  useEffect(() => {
    // 在组件装载时获取数据并更新 DOM
    fetchData().then(data => {
      setState({ data });
    });
  }, []);

  return <div>{state.data}</div>;
};

3. useImperativeHandle

useImperativeHandle Hook 是一种高级 Hook，允许开发者以受控的方式公开组件的引用。换句话说，它提供了一种机制，让父组件能够与子组件进行交互，控制其行为和状态。

import { useImperativeHandle } from 'ahooks';

const MyChildComponent = ({ onClick }) => {
  const ref = useRef();

  useImperativeHandle(ref, () => ({
    click() {
      onClick();
    },
  }));

  return <button ref={ref}>Click me</button>;
};

4. useRef

useRef Hook 创建一个可变的引用对象，用于存储持久数据，例如 DOM 元素或 React 组件实例。它特别适用于需要在渲染之间保持状态或访问 DOM 元素的信息。

import { useRef } from 'ahooks';

const MyComponent = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Log input value</button>
    </>
  );
};

5. useSyncExternalStore

useSyncExternalStore Hook 为同步外部存储创建了一条途径，允许组件订阅并响应来自外部数据源的状态更改。它可用于与 Redux 存储或其他状态管理库进行集成。

import { useSyncExternalStore } from 'ahooks';

const MyComponent = () => {
  const store = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

  const { count } = store.getState();

  return <div>{count}</div>;
};

6. useInsertionEffect

useInsertionEffect Hook 是一个专门为函数组件量身定制的 Hooks，与 useEffect 类似，但在组件首次插入 DOM 时执行。它特别适合需要在组件插入 DOM 时执行特定操作的情况，例如加载数据或播放动画。

import { useInsertionEffect } from 'ahooks';

const MyComponent = () => {
  useInsertionEffect(() => {
    // 在组件首次插入 DOM 时加载数据
    fetchData().then(data => {
      setState({ data });
    });
  });

  return <div>{state.data}</div>;
};