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

Question

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

javascriptreactjsreact-hooks

340

根据文档：

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>

- Yangshun Tay

1

我可以问一下，在什么情况下根据渲染次数而不是显式状态变量（如count）来执行某些操作有意义？ - Aprillion

@Aprillion，在我的情况下，需要更改一个H2的内容，该文本需要在项目列表之后更改，该列表为空并且一开始甚至不同。相同的列表在从API获取数据之前也为空，因此基于数组长度的正常条件呈现将覆盖初始值。 - Carmine Tambascia

19个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shahul01 · Answer 1

简化实现

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

}

- Ravi Kumar Sha · Answer 2

@MehdiDehghani，你的解决方案完美地运行了，但还需要添加一点内容，在卸载时将didMount.current值重置为false。当你尝试在其他地方使用这个自定义hook时，你不会得到缓存值。

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;

- zamuka · Answer 3

最近我需要在第一次渲染时运行第一个效果，因为我在其中初始化了一些存储，并且不希望应用程序在未执行此效果至少一次的情况下被渲染，所以我最终使用了一个新钩子 usePreffect :) 因为它可以在预渲染期间运行效果。

/**
 * Same as useEffect but runs the very first effect synchronously on the first render.
 * Useful for state initializing effects
 */
export const usePreffect = (effect: EffectCallback, deps: any[]): void => {
  const isFirstEffectRun = useRef(true);
  // Run the effect synchronously on the first render and save its cleanup function
  const firstCleanUp = useMemo(() => effect(), []);

  useEffect(() => {
    // Skip the first run and return the previously saved cleanup function
    if (isFirstEffectRun.current) {
      isFirstEffectRun.current = false;
      return firstCleanUp;
    }
    return effect();
  }, deps);
};

- Caleb Liu · Answer 4

对于在React 18严格模式下遇到useEffect在初始渲染时被调用两次的人，可以尝试以下方法：

// The init variable is necessary if your state is an object/array, because the == operator compares the references, not the actual values.
const init = []; 
const [state, setState] = useState(init);
const dummyState = useRef(init);

useEffect(() => {
  // Compare the old state with the new state
  if (dummyState.current == state) {
    // This means that the component is mounting
  } else {
    // This means that the component updated.
    dummyState.current = state;
  }
}, [state]);

在开发模式下运行...

function App() {
  const init = []; 
  const [state, setState] = React.useState(init);
  const dummyState = React.useRef(init);

  React.useEffect(() => {
    if (dummyState.current == state) {
      console.log('mount');
    } else {
      console.log('update');
      dummyState.current = state;
    }
  }, [state]);
  
  return (
    <button onClick={() => setState([...state, Math.random()])}>Update state </button>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="app"></div>

而且在生产中。

function App() {
  const init = []; 
  const [state, setState] = React.useState(init);
  const dummyState = React.useRef(init);

  React.useEffect(() => {
    if (dummyState.current == state) {
      console.log('mount');
    } else {
      console.log('update');
      dummyState.current = state;
    }
  }, [state]);
  return (
    <button onClick={() => setState([...state, Math.random()])}>Update state </button>
    );
}

ReactDOM.createRoot(document.getElementById("app")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id="app"></div>

- Qwerty · Answer 5

让我们从根本的角度来看待 useEffect

请注意，以下解决方案利用了 useEffect 的基本特性，可能并不适用于所有需求。重要的是要记住，这个钩子函数在组件卸载时额外执行，在某些情况下可能是一个不错的权衡。

你所得到的是一个优雅而简洁的解决方案，没有任何其他人建议的额外复杂性。

简而言之

你可以使用清理函数来实现类似的结果。这个清理函数在每次正常的 effect 函数被调用之前*都会运行。

// a slick oneliner
useEffect(() => closeModal, [router.asPath])

// or 

useEffect(() => () => { // notice the two functions
  // do something here
}, [router.asPath])

// or

useEffect(() => {
  // not here
  return () => {
    // do something here
  }
}, [router.asPath])

为什么以及在什么时候这个工作会有效？

https://codesandbox.io/s/useeffect-lifecycle-s3gkzs

首先，为了理解useEffect生命周期的工作原理，让我们创建这个测试：

let i = 0

const MyComponent = () => {
  const router = useRouter() // Next.js router changes value when navigating

  console.log('hooktest: render', ++i)

  useEffect(() => {
    console.log('hooktest: setup', ++i)

    return () => {
      console.log('hooktest: cleanup', ++i)
    }
  }, [router.asPath])

  return null
}

渲染完这个组件后，我们会得到这个。

// first render (component is mounted)
hooktest: render 1
hooktest: setup 2
// navigated (2nd render)
hooktest: render 3
hooktest: cleanup 4
hooktest: setup 5
// navigated (3rd render)
hooktest: render 6
hooktest: cleanup 7
hooktest: setup 8
// app is closed (component gets unmounted)
hooktest: cleanup 9

有了这个知识，我们可以轻松地操作钩子，使得函数只在钩子第二次“执行”时运行。

*

React 何时清理 effect？

React 在组件卸载时进行清理。React 也会在下一次运行 effect 之前清理上一次渲染的 effect。

~ React 文档：

- [无清理的 effect](link1) - [有清理的 effect](link2)

注意：如果你在中开发，你会看到 effect 运行两次。这只会在开发模式下发生。

- Carmine Tambascia · Answer 6

之前的方法都不错，但是可以通过更简单的方式实现，考虑到在useEffect中的操作可以通过放置一个if条件（或其他条件）来“跳过”，这个条件基本上不会在第一次运行时执行，但仍然具有依赖性。

例如，我遇到了以下情况：

从API加载数据，但我的标题必须是“正在加载”，直到日期出现为止，因此我有一个数组tours，在开始时为空，并显示文本“显示”
使用与API不同的信息呈现组件。
用户可以逐个删除这些信息，甚至全部将tour数组再次清空，但这次API获取已经完成
一旦旅游列表通过删除变为空，则显示另一个标题。

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

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

- Leandro Ortiz · Answer 7

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

- golammostofa · Answer 8

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

这段代码是关于编程的，它使用了React Hooks中的useState和useEffect函数。useState函数用于声明一个状态变量dojob，并将其初始值设置为false。yourfunction函数用于将dojob状态变量设置为true。useEffect函数则会在组件渲染后执行，当dojob状态变量发生改变时，会调用yourfunction函数并将dojob状态变量重置为false。

- knaitas · Answer 9

大家都在给出复杂的答案，所以我就在这里放下：

这将在初始加载时呈现：

useEffect(() => {
    setData(data)
  });

这段代码不会在初始加载时呈现

useEffect(() => {
    setData(data)
  }, []);

只是一些关于Javascript的东西 :shrug: