我认为创建一个自定义钩子将是多余的，我不想通过使用useLayoutEffect钩子的一些与布局无关的东西来混淆我的组件的可读性，所以，在我的情况下，我只是检查我的有状态变量selectedItem的值是否触发useEffect回调是它的原始值，以确定它是否是初始渲染:

export default function MyComponent(props) {
    const [selectedItem, setSelectedItem] = useState(null);

    useEffect(() => {
        if(!selectedItem) return; // If selected item is its initial value (null), don't continue
        
        //... This will not happen on initial render

    }, [selectedItem]);

    // ...

}

你可以使用自定义钩子在挂载后运行使用效果。

const useEffectAfterMount = (cb, dependencies) => {
  const mounted = useRef(true);

  useEffect(() => {
    if (!mounted.current) {
      return cb();
    }
    mounted.current = false;
  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};

以下是typescript版本:

const useEffectAfterMount = (cb: EffectCallback, dependencies: DependencyList | undefined) => {
  const mounted = useRef(true);

  useEffect(() => {
    if (!mounted.current) {
      return cb();
    }
    mounted.current = false;
  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};

与Tholle的答案相同，但使用useState而不是useRef。

const [skipCount, setSkipCount] = useState(true);

...

useEffect(() => {
    if (skipCount) setSkipCount(false);
    if (!skipCount) runYourFunction();
}, [dependencies])

EDIT

虽然这也可以工作，但它涉及到更新状态，这会导致组件重新呈现。如果你的组件的所有useEffect调用(以及它的所有子组件)都有一个依赖数组，这没有关系。但是请记住，任何没有依赖数组的useEffect(useEffect(() =>{…})将再次运行。

使用和更新useRef不会导致任何重渲染。

function useEffectAfterMount(effect, deps) {
  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) return effect();
    else isMounted.current = true;
  }, deps);

  // reset on unmount; in React 18, components can mount again
  useEffect(() => {
    isMounted.current = false;
  });
}

我们需要返回从effect()返回的内容，因为它可能是一个清理函数。但我们不需要确定它是否是。只需传递它，让useEffect来计算。

在这篇文章的早期版本中，我说过重置ref (isMounted.)Current = false)没有必要。但在React 18中是这样的，因为组件可以以以前的状态重新挂载(感谢@Whatabrain)。

@MehdiDehghani，你的解决方案工作得非常好，你必须做的一件事是卸载，重置didMount。当前值为false。当你试图在其他地方使用这个自定义钩子时，你不会得到缓存值。

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

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        let unmount;
        if (didMount.current) unmount = func();
        else didMount.current = true;

        return () => {
            didMount.current = false;
            unmount && unmount();
        }
    }, deps);
}

export default useDidMountEffect;

简化的实现

import { useRef, useEffect } from 'react';

function MyComp(props) {

  const firstRender = useRef(true);

  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
    } else {
      myProp = 'some val';
    };

  }, [props.myProp])


  return (
    <div>
      ...
    </div>
  )

}