使用 useEffect 钩子

在 React 中，useEffect 钩子是控制副作用逻辑执行时机的常用方式。通过传递空依赖数组 []，可以让方法仅在组件挂载时执行一次。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码只会在组件挂载时执行一次
    console.log('Initialization logic here');
  }, []); // 空依赖数组是关键
}

使用 useRef 标记执行状态

如果需要更精细的控制（例如避免某些条件触发重复执行），可以通过 useRef 标记是否已执行。

import { useEffect, useRef } from 'react';

function MyComponent() {
  const hasExecuted = useRef(false);

  useEffect(() => {
    if (!hasExecuted.current) {
      // 仅首次执行
      console.log('Run once');
      hasExecuted.current = true;
    }
  }, [/* 可能的依赖项 */]);
}

Class 组件中的 componentDidMount

对于 Class 组件，直接在 componentDidMount 生命周期方法中实现逻辑，该方法天然仅执行一次。

class MyComponent extends React.Component {
  componentDidMount() {
    // 初始化逻辑
    console.log('Run once on mount');
  }

  render() {
    return <div>Example</div>;
  }
}

注意事项

• 若依赖项数组不为空，useEffect 会在依赖变化时重新执行。
• 在严格模式（Strict Mode）下，开发环境会故意重复调用 useEffect 以检测副作用问题，但生产环境不会。

h