useUpdateEffect

作用

useUpdateEffect 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行。

原理

通过useRef保存一个标记位初始值为false,在第一次执行完的时候修改标记值为true,在依赖更新的时候判断标记值是否为true,如果为true则执行副作用

源码

import { useEffect } from 'react'
import { createUpdateEffect } from '../createUpdateEffect'

export default createUpdateEffect(useEffect)

import { useRef } from 'react'
import type { useEffect, useLayoutEffect } from 'react'

// 传递的hook类型
type EffectHookType = typeof useEffect | typeof useLayoutEffect

export const createUpdateEffect: (hook: EffectHookType) => EffectHookType =
  (hook) => (effect, deps) => {
    // 定义一个标记位
    const isMounted = useRef(false)

    // for react-refresh
    hook(() => {
      return () => {
        // 组件卸载时修改标记位
        isMounted.current = false
      }
    }, [])

    hook(() => {
      // 判断标记位是否为false
      if (!isMounted.current) {
        // 修改标记位
        isMounted.current = true
      } else {
        return effect()
      }
    }, deps)
  }

export default createUpdateEffect