React useEffect 如何避免第一次执行副作用操作

在 React 中，useEffect Hook 非常实用，可以在组件渲染时执行副作用操作。有时我们希望在组件第一次渲染时不执行 useEffect，而是等到组件的某个状态或属性改变后再执行。这时可以使用一个额外的状态变量来控制 useEffect 的执行。

具体实现方法是在组件中定义一个布尔型的状态变量，初始值为 false。然后在 useEffect 中判断这个变量的值，如果为 false 则不执行副作用操作，否则执行副作用操作并将这个变量的值设置为 true。

示例代码如下：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [shouldExecuteEffect, setShouldExecuteEffect] = useState(false);

  useEffect(() => {
    if (shouldExecuteEffect) {
      // 执行副作用操作
    } else {
      // 第一次渲染不执行副作用操作
      setShouldExecuteEffect(true);
    }
  }, [shouldExecuteEffect]);

  // 组件的其它代码

  return (
    // 组件的JSX代码
  );
}

在这个示例中，我们使用了一个名为 shouldExecuteEffect 的状态变量来控制 useEffect 的执行。useEffect 的依赖数组中传入了 shouldExecuteEffect，表示只有 shouldExecuteEffect 变化时才会重新执行 useEffect。在 useEffect 的函数体中，我们根据 shouldExecuteEffect 的值来决定是否执行副作用操作。如果 shouldExecuteEffect 为 false，则不执行副作用操作，否则执行副作用操作并将 shouldExecuteEffect 设置为 true。这样，第一次渲染时不会执行副作用操作，只有在 shouldExecuteEffect 变化后才会执行副作用操作。