【Hooks 小贴士】：LifeCycle 相关 Hooks

目录
1. useMount
2. useUnmount
3. useUpdateEffect
4. useUpdate
5. useUnmountedRef、useMountedState
6. useLogger
7. useShallowCompareEffect、useDeepCompareEffect、useCustomCompareEffect

1. useMount

用途：只在组件 mount 时执行的 hook。

备注：更喜欢 ahooks 版实现，简洁。

源码：

• ahooks——useMount 实现
  • 阿里的实现很直接，useEffect + [] 依赖

• react-use——useMount 实现
  • react-use 内部采用 useEffectOnce 自定义 hook 实现。
    • useEffectOnce 本质上也是 useEffect + [] 依赖。

2. useUnmount

用途：只在组件 unmount 时执行的 hook。

备注：更喜欢 react-use 版实现，简洁。

源码：

• ahooks——useUnmount 实现

• react-use——useUnmount 实现

3. useUpdateEffect

用途：使用上与 useEffect 完全相同，只是它忽略了首次渲染，且只在依赖项更新时运行。

备注：更喜欢 ahooks 版实现，简洁。

示例：

源码：

• ahooks——useUnmount 实现

• react-use——useUnmount 实现

4. useUpdate

用途：强制组件重新渲染的 hook。

备注：无

示例：

源码：

• ahooks——useUpdate 实现

• react-use——useUpdate 实现
  • 采用无 action 型 reducer 实现

5. useUnmountedRef、useMountedState

用途：都用来判定组件是不是已被卸载，可用于避免一些组件卸载后的状态更新。

备注：

• ahooks 实现的是 useUnmountedRef ；
• react-use 实现的是 useMountedState。

示例：

import React, { useRef, useEffect, useState } from 'react';

const useUnmountedRef = () => {
  const unmountedRef = useRef(false);
  useEffect(() => {
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return unmountedRef;
};

const AComponent = () => {
  const isUnMounted = useUnmountedRef();

  useEffect(() => {
    setTimeout(() => {
      if (isUnMounted.current) {
        console.log("Acomponent is dead!");
      } else {
        console.log("Acomponent is alive!");
      }
    }, 5000);
  });

  return <div>AComponent {isUnMounted ? " is Alive" : " is Dead!"}</div>
}

export default function App() {
  const [visible, setVisible] = useState(true);

  return <>
    <button onClick={() => setVisible(false)}>hide</button>
    {visible ? <AComponent /> : 'nothing'}
  </>
};

源码：

• ahooks——useUnmountedRef 实现

• react-use——useMountedState 实现

6. useLogger

用途：React lifecycle hook that console logs parameters as component transitions through lifecycles.

备注：

• 利用 useEffectOnce 记录 mount 日志
• 利用 useUpdateEffect 记录 update 日志
• 利用 useEffectOnce 记录 unmount 日志

示例：

import React, { useState } from 'react';
import { useLogger } from 'react-use';
import { useInterval } from 'react-use';

const AComponent = (props: { count: number }) => {
  useLogger("AComponent", props);
  return <div>This is AComponent</div>
}

export default function App() {
  const [visible, setVisible] = useState(true);
  const [count, setCount] = useState(0);

  useInterval(() => setCount(count + 1), 1000);

  return <>
    <button onClick={() => setVisible(false)}>hide</button>
    {visible ? <AComponent count={count} /> : 'nothing'}
  </>
};

源码：

7. useShallowCompareEffect、useDeepCompareEffect、useCustomCompareEffect

用途：

• useShallowCompareEffect：A modified useEffect hook that is using shallow comparison on each of its dependencies instead of reference equality.
• useDeepCompareEffect：A modified useEffect hook that is using deep comparison on its dependencies instead of reference equality.
• useCustomCompareEffect：A modified useEffect hook that accepts a comparator which is used for comparison on dependencies instead of reference equality.

备注：useShallowCompareEffect、useDeepCompareEffect 都通过 useCustomCompareEffect 实现。

源码：

参考：

https://ahooks.js.org/zh-CN/hooks/life-cycle/use-unmount https://streamich.github.io/react-use/?path=/story/lifecycle-useunmount--docs