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

Jim老丝达蒙2020-03-11

该useEffect阵营钩将运行在功能上传递的每一个变化。可以对其进行优化，使其仅在所需属性更改时调用。

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

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

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

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

JinJin神奇宝儿2020/03/11 12:15:50

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

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

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

乐猪猪2020/03/11 12:15:50

在组件挂载后仅运行一次功能是一种常见的模式，它证明了自己的钩子隐藏了实现细节。

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

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

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

关于useMountEffect挂钩

当useEffect与第二个数组参数一起使用时，React将在挂载（初始渲染）之后和数组中的值更改后运行回调。由于我们传递了一个空数组，因此它将仅在安装后运行。

Newest Answer