如何仅使用 React useEffect 调用加载函数一次

Question

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

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

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

使用钩子，这可能看起来像这样：

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

原文由 Dávid Molnár 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 return <div> {/* ... */} </div>;
 }

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

长话短说

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

详细解释

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

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

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

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

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

原文由 Edan Chetrit 发布，翻译遵循 CC BY-SA 4.0 许可协议