402

useEffect React 挂钩将在每次更改时运行传入的函数这可以优化为仅在所需属性更改时才调用。

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

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

使用钩子,这可能看起来像这样:

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

11 回答 11

697

如果你只想useEffect在初始渲染后运行给定的函数,你可以给它一个空数组作为第二个参数。

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}
于 2018-11-02T15:01:29.780 回答
165

TL;博士

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

详细解释

useEffect默认情况下在每次渲染组件后运行(从而产生效果)。

放入useEffect组件时,您告诉 React 您希望将回调作为效果运行。React 将在渲染后和执行 DOM 更新后运行效果。

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

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

通过向第二个参数传递一个空数组,React 将在每次渲染后比较该数组,并且会发现没有任何变化,因此仅在第一次渲染后调用回调。

于 2019-04-02T18:38:44.320 回答
158

使用MountEffect挂钩

在组件挂载后只运行一次函数是一种常见的模式,它证明了它自己的一个隐藏实现细节的钩子是合理的。

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-26T07:54:41.950 回答
31

将一个空数组作为第二个参数传递给useEffect. 这有效地告诉 React,引用文档

这告诉 React 你的效果不依赖于任何来自 props 或 state 的值,所以它永远不需要重新运行。

这是一个片段,您可以运行它来证明它有效:

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, 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>

于 2018-11-11T21:28:31.267 回答
31

我们必须停止思考组件生命周期方法(即componentDidMount)。我们必须开始思考效果。React 效果不同于旧式的类生命周期方法。

默认情况下,效果会在每个渲染周期后运行,但可以选择退出此行为。要选择退出,您可以定义依赖关系,这意味着仅在对依赖关系之一进行更改时才会执行效果。

如果您明确定义效果没有依赖关系,则效果仅在第一个渲染周期之后运行一次。

第一种解决方案(带有 ESLint 投诉)

因此,您的示例的第一个解决方案如下:

function MyComponent() {

    const loadDataOnlyOnce = () => {
      console.log("loadDataOnlyOnce");
    };

    useEffect(() => {
        loadDataOnlyOnce(); // this will fire only on first render
    }, []);
    return (...);
}

但是 React Hooks ESLint 插件会抱怨这样的事情:

React Hook useEffect has missing dependency: loadDataOnlyOnce. Either include it or remove the dependency array.

起初,这个警告似乎很烦人,但请不要忽视它。它可以帮助您更好地编码。

第二种解决方案(正确的方法,如果依赖项不依赖于组件)

如果我们添加loadDataOnlyOnce到依赖数组中,我们的效果将在每个渲染周期后运行,因为每次渲染的引用loadDataOnlyOnce都会发生变化,因为函数被销毁(垃圾收集)并创建了一个新函数,但这正是我们所做的不想。

我们必须loadDataOnlyOnce在渲染周期中保持相同的引用。

所以只需移动上面的函数定义:

const loadDataOnlyOnce = () => {
  console.log("loadDataOnlyOnce");
};

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire only on first render
    }, []);
    return (...);
}

第三种解决方案(正确的方法,如果依赖项依赖于组件)

如果 effect ( loadDataOnlyOnce) 的依赖依赖于组件(需要 props 或 state),则有 React 的内置useCallback-Hook。

-Hook的基本意义useCallback是在渲染周期内保持函数的引用相同。

function MyComponent() {
    const [state, setState] = useState("state");

    const loadDataOnlyOnce = useCallback(() => {
      console.log(`I need ${state}!!`);
    }, [state]);

    useEffect(() => {
        loadDataOnlyOnce(); // // this will fire only when loadDataOnlyOnce-reference changes
    }, [loadDataOnlyOnce]);
    return (...);
}
于 2021-09-21T07:04:18.347 回答
23
function useOnceCall(cb, condition = true) {
  const isCalledRef = React.useRef(false);

  React.useEffect(() => {
    if (condition && !isCalledRef.current) {
      isCalledRef.current = true;
      cb();
    }
  }, [cb, condition]);
}

并使用它。

useOnceCall(() => {
  console.log('called');
})

或者

useOnceCall(()=>{
  console.log('Fetched Data');
}, isFetched);
于 2020-12-04T21:28:24.947 回答
10

我喜欢定义一个mount函数,它以同样的方式欺骗​​ EsLint,useMount我发现它更不言自明。

const mount = () => {
  console.log('mounted')
  // ...

  const unmount = () => {
    console.log('unmounted')
    // ...
  }
  return unmount
}
useEffect(mount, [])

于 2019-10-12T02:20:24.580 回答
4

将依赖项数组留空。希望这将帮助您更好地理解。

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

空依赖数组仅在挂载上运行一次

useEffect(() => {
  doSomething(value)
}, [value])  

value作为依赖项传递。如果自上次以来依赖项发生了变化,则效果将再次运行。

useEffect(() => {
  doSomething(value)
})  

没有依赖。每次渲染后都会调用它。

于 2020-11-16T15:57:14.793 回答
2

这并不能完全回答您的问题,但可能具有相同的预期效果,即仅在第一次渲染后运行一次函数。非常类似于 componentDidMount 函数。这使用 useState 而不是 useEffect 来避免依赖 lint 错误。您只需将一个自执行匿名函数作为第一个参数传递给 useState。顺便说一句,我不确定为什么 React 不简单地提供一个这样做的钩子。

import React, { useState } from "react"

const Component = () => {

  useState((() => {
    console.log('componentDidMountHook...')
  }))

  return (
    <div className='component'>Component</div>
  )
}

export default Component
于 2022-01-19T04:51:38.500 回答
1

这是我对亚辛答案的看法。

import {useEffect, useRef} from 'react';

const useOnceEffect = (effect: () => void) => {
  const initialRef = useRef(true);

  useEffect(() => {
    if (!initialRef.current) {
      return;
    }
    initialRef.current = false;
    effect();
  }, [effect]);
};

export default useOnceEffect;

用法:

useOnceEffect(
  useCallback(() => {
    nonHookFunc(deps1, deps2);
  }, [deps1, deps2])
);
于 2021-08-10T14:00:31.053 回答
0

如果您只是在渲染后调用 useEffect 中的函数,则添加一个空数组作为 useEffect 的第二个参数

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

调用自定义钩子

添加一个空数组进行渲染

于 2021-12-05T14:03:26.043 回答