React 如何防止在初始渲染时触发 useEffect ？

在 React 中，useEffect 默认情况下会在组件初次渲染之后和每次更新时执行。如果我们想防止useEffect在初始渲染时触发，我们可以通过设置一个依赖项数组，并在其中加入一个状态或属性，来控制useEffect的执行时机。

示例：

设想我们有一个组件，我们希望在组件的 prop userId 更改时获取用户信息，但不希望在组件首次渲染时执行该操作。我们可以这样实现：

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const userData = await response.json();
      setUser(userData);
    };

    // 只有 userId 更改时才执行
    if(userId) {
      fetchUser();
    }
  }, [userId]);  // 这里指定了 useEffect 的依赖项为 userId

  return (
    <div>
      {user ? (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      ) : (
        <p>Loading user...</p>
      )}
    </div>
  );
}

在这个例子中，useEffect 拥有一个依赖项数组，其中包含了 userId。这意味着只有当 userId 改变时，useEffect 中的代码才会执行。由于在组件的初始渲染时 userId 通常不会发生变化（假设它从父组件传递而来且初始时不是 undefined），因此 useEffect 中的代码不会在首次渲染时执行。如果 userId 是 undefined 或可能在初次渲染后才有值，那么我们需要在代码中加入相应的检查，如 if(userId) 语句，以避免在 userId 无效时执行不必要的操作。