第一次加载页面时如何不执行useEffect

在使用 React Hooks 中的 useEffect 时，我们通常会遇到一个问题：在组件初次渲染时也会执行 useEffect 中的副作用函数。

这样会产生一些问题，比如在初次渲染时访问一些未定义的数据或函数，从而导致报错。那么如何让程序在初次渲染时不执行 useEffect 中的副作用函数呢？下面介绍几种解决方案：

方案一：在 useEffect 中判断

可以在 useEffect 中判断是否为初次渲染，如果是，则直接返回，不执行副作用函数。代码示例如下：

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 判断是否为初次渲染
    if (!data) {
      return;
    }

    // 执行副作用函数
    fetchData();
  }, [data]);

  function fetchData() {
    // 异步获取数据
    // ...
  }

  return (
    <div className="example">
      <h1>Example</h1>
    </div>
  );
}

export default Example;

在初次渲染时，data 的值为 null，因此不会执行 fetchData。

方案二：使用 useRef

我们可以使用 useRef 创建一个变量，用于记录是否为初次渲染。代码示例如下：

import React, { useEffect, useRef, useState } from "react";

function Example() {
  const [data, setData] = useState(null);

  const isFirstRender = useRef(true);

  useEffect(() => {
    // 判断是否为初次渲染
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    // 执行副作用函数
    fetchData();
  }, [data]);

  function fetchData() {
    // 异步获取数据
    // ...
  }

  return (
    <div className="example">
      <h1>Example</h1>
    </div>
  );
}

export default Example;

在初次渲染时，isFirstRender 的值为 true，因此不会执行 fetchData。

方案三：使用 useLayoutEffect

我们可以使用 useLayoutEffect 代替 useEffect，这样副作用函数会在浏览器布局和绘制之前执行，保证了正常的渲染流程。代码示例如下：

import React, { useLayoutEffect, useState } from "react";

function Example() {
  const [data, setData] = useState(null);

  useLayoutEffect(() => {
    // 执行副作用函数
    fetchData();
  }, [data]);

  function fetchData() {
    // 异步获取数据
    // ...
  }

  return (
    <div className="example">
      <h1>Example</h1>
    </div>
  );
}

export default Example;

以上就是三种解决初次渲染时不执行 useEffect 中的副作用函数的方案，可以根据自己的需求来选择合适的方案。