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

Question

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

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

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

有了钩子(Hook)，这看起来像这样:

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

Answer 1

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

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

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