使 React useEffect 钩子不在初始渲染时运行

We can use the useRef hook to store any mutable value we like，因此我们可以使用它来跟踪是否是第一次运行 useEffect 函数。

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

例子

常量 { useState, useRef, useLayoutEffect } = React;函数 ComponentDidUpdateFunction() { const [count, setCount] = useState(0);常量 firstUpdate = useRef(true); useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; return; } console.log("componentDidUpdateFunction"); }); return (

您可以将其变成 custom hooks，如下所示：

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

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

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
}

export default useDidMountEffect;

使用示例：

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

import useDidMountEffect from '../path/to/useDidMountEffect';

const MyComponent = (props) => {    
    const [state, setState] = useState({
        key: false
    });    

    useEffect(() => {
        // you know what is this, don't you?
    }, []);

    useDidMountEffect(() => {
        // react please run me if 'key' changes, but not on initial render
    }, [state.key]);    

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

我做了一个简单的 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's answer 相同，但使用 useState 而不是 useRef。

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

...

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

编辑

虽然这也有效，但它涉及更新状态，这将导致您的组件重新渲染。如果您的所有组件的 useEffect 调用（以及它的所有子组件）都具有依赖关系数组，那么这无关紧要。但请记住，任何没有依赖关系数组的 useEffect (useEffect(() => {...}) 都将再次运行。

使用和更新 useRef 不会导致任何重新呈现。

@ravi，你的不调用传入的卸载函数。这是一个更完整的版本：

/** * 与 React.useEffect 相同，只是它永远不会在挂载时运行。这是 * componentDidUpdate 生命周期函数的等价物。 * * @param {function:function} 效果 - 一个 useEffect 效果。 * @param {array} [dependencies] - useEffect 依赖列表。 */ 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; } }, 依赖项); // 在卸载时重置以进行下一次装载。 React.useEffect(() => { return () =>mounted.current = false; }, []); };

这是迄今为止我使用 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 挂钩一样简单地使用它，但是这一次，它不会在初始渲染时运行。以下是如何使用这个钩子。

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

如果您使用 ESLint 并希望对此自定义挂钩使用 react-hooks/exhaustive-deps 规则：

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

把事情简单化：

function useEffectAfterFirstRender(effect, deps) {
  const isFirstRender = useRef(true);

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

如果您消除不必要的并发症，这里的其他解决方案会减少这种情况：

我们需要传递 effect() 的返回值，因为它可能是一个析构函数，但我们不需要做任何条件逻辑来确定它是否存在。只需传递它，不管它是什么，让 useEffect 弄清楚。

在卸载时将 isFirstRender 重置为 true 是没有意义的，因为 1）条件尚未变为真，并且 2）在卸载时，该 ref 将进入焚化炉。它不会在“下一个安装”上重复使用。没有下一个坐骑。卸载就是死亡。

这是一个完整的打字稿模块：

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

function useEffectAfterFirstRender(effect: EffectCallback, deps: DependencyList): void {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) isFirstRender.current = false;
    else return effect();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}

export default useEffectAfterFirstRender;

我赞成 Kiran Maniya 的建议，给它一个详尽的 deps eslint 规则：

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

一种简单的方法是从您的组件中创建一个 let 并将其设置为 true。

然后说如果它的真设置为假然后返回（停止）useEffect函数

像那样：

    import { useEffect} from 'react';
    //your let must be out of component to avoid re-evaluation 
    
    let isFirst = true
    
    function App() {
      useEffect(() => {
          if(isFirst){
            isFirst = false
            return
          }
    
        //your code that don't want to execute at first time
      },[])
      return (
        <div>
            <p>its simple huh...</p>
        </div>
      );
    }

它类似于@Carmine Tambasciabs 解决方案，但不使用状态:) ‍‍‍‍‍‍ ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

@MehdiDehghani，您的解决方案工作得非常好，您必须做的一个补充是在卸载时，将 didMount.current 值重置为 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>
  )

}

我认为创建一个自定义钩子会过大，我不想通过使用 useLayoutEffect 钩子来处理与布局无关的东西来混淆我的组件的可读性，所以，就我而言，我只是检查了我的 stateful 的值触发 useEffect 回调的变量 selectedItem 是它的原始值，以确定它是否是初始渲染：

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]);

    // ...

}

如果你想跳过第一次渲染，你可以创建一个状态“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]);

之前的一切都很好，但是考虑到 useEffect 中的操作可以“跳过”放置一个基本上不是第一次运行并且仍然具有依赖关系的 if 条件（或任何其他），这可以通过更简单的方式实现。

例如，我有以下情况：

从 API 加载数据，但我的标题必须是“正在加载”，直到日期不存在，所以我有一个数组，游览开始时为空并显示文本“正在显示”有一个组件使用来自这些 API 的不同信息呈现.用户可以一个一个地删除这些信息，甚至所有这些都使游览数组再次为空，但这次API获取已经完成一旦游览列表为空，通过删除然后显示另一个标题。

所以我的“解决方案”是创建另一个 useState 来创建一个布尔值，该值仅在数据获取后才更改，使 useEffect 中的另一个条件为 true，以便运行另一个也取决于游览长度的函数。

useEffect(() => {
  if (isTitle) {
    changeTitle(newTitle)
  }else{
    isSetTitle(true)
  }
}, [tours])

这里是我的 App.js

import React, { useState, useEffect } from 'react'
import Loading from './Loading'
import Tours from './Tours'

const url = 'API url'

let newTours

function App() {
  const [loading, setLoading ] = useState(true)
  const [tours, setTours] = useState([])
  const [isTitle, isSetTitle] = useState(false)
  const [title, setTitle] = useState("Our Tours")

  const newTitle = "Tours are empty"

  const removeTours = (id) => {
    newTours = tours.filter(tour => ( tour.id !== id))

    return setTours(newTours)
  }

  const changeTitle = (title) =>{
    if(tours.length === 0 && loading === false){
      setTitle(title)
    }
  }

const fetchTours = async () => {
  setLoading(true)

  try {
    const response = await fetch(url)
    const tours = await response.json()
    setLoading(false)
    setTours(tours)
  }catch(error) {
    setLoading(false)
    console.log(error)
  }  
}


useEffect(()=>{
  fetchTours()
},[])

useEffect(() => {
  if (isTitle) {
    changeTitle(newTitle)
  }else{
    isSetTitle(true)
  }
}, [tours])


if(loading){
  return (
    <main>
      <Loading />
    </main>
  )  
}else{
  return ( 

    <main>
      <Tours tours={tours} title={title} changeTitle={changeTitle}           
removeTours={removeTours} />
    </main>
  )  
 }
}



export default App