@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; }, []); };

如果你想跳过第一次渲染，你可以创建一个状态“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加载数据但我的标题必须是“Loading”直到日期不存在，所以我有一个数组，开始时为空，并显示文本“显示” 使用来自这些API的不同信息来呈现组件。 用户可以一个一个删除这些信息，甚至所有使tour数组再次为空，作为开始，但这一次API获取已经完成 一旦旅游列表是空的删除，然后显示另一个标题。

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

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

我们可以使用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>

简化的实现

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

}

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

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

...

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

EDIT

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

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