useEffectOnce - Javascript

在React中，我们经常需要使用 useEffect() 来处理组件的生命周期事件。然而，在某些情况下，我们只需要在组件挂载时执行一次。为了更方便地完成这项任务，React社区已经提供了一个自定义钩子函数 useEffectOnce() 。

import { useEffect } from 'react';

const useEffectOnce = (effect) => {
  useEffect(effect, []);
}

export default useEffectOnce;

在上面的代码中，我们定义了一个名为 useEffectOnce() 的函数，它接受一个 effect 参数，该参数是一个 useEffect() 回调函数。同时，我们将 useEffect() 的依赖数组设置为空数组，这意味着该 effect 只会在组件挂载时执行一次。

现在，我们可以在React组件中使用 useEffectOnce() 函数，如下所示：

import React from 'react';
import useEffectOnce from './useEffectOnce';

const MyComponent = () => {
  useEffectOnce(() => {
    console.log('MyComponent mounted!');
  });

  return <p>Hello, World!</p>;
}

export default MyComponent;

在上面的代码中，我们在组件中使用了 useEffectOnce() 函数，并将其传递给 useEffect() 回调函数。由于我们已将依赖数组设置为空数组，因此该 effect 只会在组件挂载时执行一次，并在控制台中输出了一条消息。

总之，使用 useEffectOnce() 函数可以使我们更轻松地处理组件挂载后只需要执行一次的操作，而不必在代码中编写额外的逻辑。