如何调用加载函数与React useEffect只一次

useEffect React钩子将在每次更改时运行传入函数。可以对其进行优化，使其仅在所需属性更改时调用。

如果我想从componentDidMount调用初始化函数，而不是在更改时再次调用它，该怎么办?假设我想加载一个实体，但加载函数不需要来自组件的任何数据。我们如何使用useEffect钩子来实现这个?

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

如果使用钩子，可能是这样的:

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}

当前回答

博士TL;

useEffect(yourCallback，[]) -只在第一次渲染后触发回调。

详细解释

默认情况下，useEffect在每次呈现组件后运行(因此会产生效果)。

当在你的组件中放置useEffect时，你告诉React你想要运行回调作为一个效果。React将在渲染和执行DOM更新后运行效果。

如果你只传递一个回调-回调将在每次渲染后运行。

如果传递第二个参数(数组)，React将在第一次渲染后和每次数组中的一个元素被更改时运行回调。例如，当放置useEffect(() => console.log('hello')， [someVar, someOtherVar])时，回调将在第一次渲染之后和someVar或someOtherVar中的一个被更改的任何渲染之后运行。

通过将第二个参数传递给一个空数组，React将在每次渲染数组后进行比较，并且不会看到任何更改，因此只在第一次渲染后调用回调。

2019-04-02 18:38:44

其他回答

我在网上花了一段时间后发现的。useEffect在组件挂载时触发一次，然后组件卸载并再次挂载，useEffect再次触发。你得多看看React文档，他们为什么这么做。

我使用了自定义钩子。卸载时，你必须改变你的useRef状态。在这种情况下，不要忘记返回语句:当组件卸载时，useEffect在返回后运行清理函数。

import React, { useEffect, useRef } from "react"

const useDidMountEffect = (
  func: () => void,
  deps: React.DependencyList | undefined
) => {
  const didMount = useRef(false)

  useEffect(() => {
    if (didMount.current) {
      func()
    }
    return () => {
      didMount.current = true
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps)
}

export default useDidMountEffect

使用它像正常的useEffect:

  useDidMountEffect(() => {
    // your action    
  }, [])

2022-08-08 08:46:44

如果你只是在渲染后调用useeffect中的函数，你添加一个空数组作为useeffect的第二个参数

useEffect=(()=>{
   functionName(firstName,lastName);
},[firstName,lastName])

2021-12-05 14:03:26

窗口。即使用户按下返回按钮导航到页面，Onpageshow也能工作，这与传递一个空数组作为use-effect钩子的第二个参数不同，后者在通过返回按钮返回页面时不会触发(因此不是在每一种形式的初始页面加载上)。

 useEffect(() => {    
     window.onpageshow = async function() {
      setSomeState(false)
      let results = await AsyncFunction() 
       console.log(results, 'Fires on on first load, 
        refresh, or coming to the page via the back button')
    };
 };

2022-05-26 15:15:07

useMountEffect钩

在组件挂载后只运行一次函数是一种非常常见的模式，因此需要使用自己的钩子来隐藏实现细节。

const useMountEffect = (fun) => useEffect(fun, [])

在任何功能组件中使用它。

function MyComponent() {
    useMountEffect(function) // function will run only once after it has mounted. 
    return <div>...</div>;
}

关于useMountEffect钩子

当使用useEffect和第二个数组参数时，React将在挂载(初始渲染)和数组中的值发生变化后运行回调。因为我们传递了一个空数组，所以它只会在挂载之后运行。

2019-06-26 07:54:41