useMount

首先看下 # useMount 的作用是什么

useMount 的作用是只在组件初始化时执行的 Hook。

接下来看下 API

API

useMount(fn: () => void);

参数

只有1个参数，就是fn，表示初始化时执行的函数

参数	说明	类型	默认值
fn	初始化时执行的函数	`() => void`	-
接下来看下用法

基本用法

在组件首次渲染时，执行方法。

import { useMount, useBoolean } from 'ahooks';
import { message } from 'antd';
import React from 'react';

const MyComponent = () => {
  useMount(() => {
    message.info('mount');
  });

  return <div>Hello World</div>;
};

export default () => {
  const [state, { toggle }] = useBoolean(false);

  return (
    <>
      <button type="button" onClick={toggle}>
        {state ? 'unmount' : 'mount'}
      </button>
      {state && <MyComponent />}
    </>
  );
};

在组件未加载时显示unmount,组件加载后，显示mount

接下来一起看下源码

源码

1.直接通过 useEffect 执行传入的函数fn

  useEffect(() => {
    fn?.();
  }, []);

2.源码里做了个判断，判断是否是开发环境，如果是开发环境，并且传入的参数不是一个函数，则直接报错

if (isDev) {
    if (!isFunction(fn)) {
      console.error(
        `useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`,
      );
    }
  }

useUnmount

首先看下 useUnmount 的作用是什么

useUnmount 的作用是在组件卸载（unmount）时执行的 Hook。

接下来看下 API

API

useUnmount(fn: () => void);

参数

只有1个参数，就是fn，表示组件卸载时执行的函数

参数	说明	类型	默认值
fn	组件卸载时执行的函数	`() => void`	-
接下来看下用法

基本用法

在组件首次渲染时，执行方法。

import { useBoolean, useUnmount } from 'ahooks';
import { message } from 'antd';
import React from 'react';

const MyComponent = () => {
  useUnmount(() => {
    message.info('unmount');
  });

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

export default () => {
  const [state, { toggle }] = useBoolean(true);

  return (
    <>
      <button type="button" onClick={toggle}>
        {state ? 'unmount' : 'mount'}
      </button>
      {state && <MyComponent />}
    </>
  );
};

在组件未加载时显示mount,组件加载后，点击显示unmount

接下来一起看下源码

源码

1.使用useLatest包裹住传入的函数fn

 const fnRef = useLatest(fn);

2.在useEffect中的return 中执行函数，表示卸载时执行函数

useEffect(
    () => () => {
      fnRef.current();
    },
    [],
  );

2.源码里做了个判断，判断是否是开发环境，如果是开发环境，并且传入的参数不是一个函数，则直接报错

if (isDev) {
    if (!isFunction(fn)) {
      console.error(
        `useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`,
      );
    }
  }