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

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

...

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

EDIT

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

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

我做了一个简单的useFirstRender钩子来处理像聚焦表单输入这样的情况:

import { useRef, useEffect } from 'react';

export function useFirstRender() {
  const firstRender = useRef(true);

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

  return firstRender.current;
}

它开始时为true，然后在useEffect中切换为false，只运行一次，再也不会运行。

在你的组件中使用它:

const firstRender = useFirstRender();
const phoneNumberRef = useRef(null);

useEffect(() => {
  if (firstRender || errors.phoneNumber) {
    phoneNumberRef.current.focus();
  }
}, [firstRender, errors.phoneNumber]);

对于您的情况，只需使用if (!firstRender) {....

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

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

...

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

EDIT

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

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

我们可以使用useRef钩子来存储我们喜欢的任何可变值，因此我们可以使用它来跟踪useEffect函数是否第一次运行。

如果希望效果与componentDidUpdate运行在同一阶段，可以使用useLayoutEffect代替。

例子

const { useState, useRef, useLayoutEffect } = React; function ComponentDidUpdateFunction() { const [count, setCount] = useState(0); const firstUpdate = useRef(true); useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; return; } console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } ReactDOM.render( <ComponentDidUpdateFunction />, document.getElementById("app") ); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

@ravi，你的没有调用传入的卸载函数。下面是一个更完整的版本:

/** * Identical to React.useEffect, except that it never runs on mount. This is * the equivalent of the componentDidUpdate lifecycle function. * * @param {function:function} effect - A useEffect effect. * @param {array} [dependencies] - useEffect dependency list. */ export const useEffectExceptOnMount = (effect, dependencies) => { const mounted = React.useRef(false); React.useEffect(() => { if (mounted.current) { const unmount = effect(); return () => unmount && unmount(); } else { mounted.current = true; } }, dependencies); // Reset on unmount for the next mount. React.useEffect(() => { return () => mounted.current = false; }, []); };

我认为创建一个自定义钩子将是多余的，我不想通过使用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]);

    // ...

}