根据文件:

componentDidUpdate()在更新发生后立即调用。初始呈现时不调用此方法。

我们可以使用新的useEffect()钩子来模拟componentDidUpdate(),但似乎每次渲染后都会运行useEffect(),甚至是第一次渲染。我如何让它在初始渲染时不运行?

正如你在下面的例子中看到的,componentDidUpdateFunction在初始渲染期间被打印,但是componentDidUpdateClass在初始渲染期间没有被打印。

function ComponentDidUpdateFunction() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } class ComponentDidUpdateClass extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } componentDidUpdate() { console.log("componentDidUpdateClass"); } render() { return ( <div> <p>componentDidUpdateClass: {this.state.count} times</p> <button onClick={() => { this.setState({ count: this.state.count + 1 }); }} > Click Me </button> </div> ); } } ReactDOM.render( <div> <ComponentDidUpdateFunction /> <ComponentDidUpdateClass /> </div>, document.querySelector("#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>


当前回答


    const [dojob, setDojob] = useState(false);

    yourfunction(){
        setDojob(true);
    }

    useEffect(()=>{
        if(dojob){
            yourfunction();
            setDojob(false);
        }
    },[dojob]);

其他回答

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

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

...

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

EDIT

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

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

如果你想跳过第一次渲染,你可以创建一个状态“firstRenderDone”,并在useEffect中使用空依赖列表将其设置为true(就像didMount一样)。然后,在你的另一个useEffect中,你可以检查第一个渲染是否已经在做某事之前完成。

const [firstRenderDone, setFirstRenderDone] = useState(false);

//useEffect with empty dependecy list (that works like a componentDidMount)
useEffect(() => {
  setFirstRenderDone(true);
}, []);

// your other useEffect (that works as componetDidUpdate)
useEffect(() => {
  if(firstRenderDone){
    console.log("componentDidUpdateFunction");
  }
}, [firstRenderDone]);
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)。

这是迄今为止我使用typescript创建的最好的实现。基本上,想法是相同的,使用Ref,但我也考虑了useEffect返回的回调,以执行组件卸载时的清理。

import {
  useRef,
  EffectCallback,
  DependencyList,
  useEffect
} from 'react';

/**
 * @param effect 
 * @param dependencies
 *  
 */
export default function useNoInitialEffect(
  effect: EffectCallback,
  dependencies?: DependencyList
) {
  //Preserving the true by default as initial render cycle
  const initialRender = useRef(true);

  useEffect(() => {
    let effectReturns: void | (() => void) = () => {};

    // Updating the ref to false on the first render, causing
    // subsequent render to execute the effect
    if (initialRender.current) {
      initialRender.current = false;
    } else {
      effectReturns = effect();
    }

    // Preserving and allowing the Destructor returned by the effect
    // to execute on component unmount and perform cleanup if
    // required.
    if (effectReturns && typeof effectReturns === 'function') {
      return effectReturns;
    } 
    return undefined;
  }, dependencies);
}

你可以简单地使用它,就像你通常使用useEffect钩子一样,但这一次,它不会在初始渲染时运行。下面是如何使用这个钩子。

useNoInitialEffect(() => {
  // perform something, returning callback is supported
}, [a, b]);

如果你使用ESLint并且想为这个自定义钩子使用react-hooks/竭-deps规则:

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "useNoInitialEffect"
    }]
  }
}

我做了一个简单的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) {....